useReducer
相当于在大型组件内部建立了一个类似于redux的状态管理中心
import { useContext,useReducer } from 'react'
import { context } from '../App'
function B(){
const [store,dispatch] = useReducer((state,action)=>{
switch(action.type){
case 'change':
console.log(action)
return {...state,age:action.value}
default:
return {...state}
}
},{age:18,username:'zs',count:98})
const user = useContext(context)
return <div>{user.name}{store.age}<button onClick={()=>{
dispatch({type:'change',value:1000})
}}> 修改年龄</button></div>
}
export default B;
自定义hooks 加载中
import { useState,useEffect } from 'react'
export default function(initValue){
const [flag,changeFlag] = useState(false)
useEffect(()=>{
let dom
if(flag){
dom = document.createElement('div')
dom.setAttribute('id','myloading')
dom.innerHTML = '加载'
document.body.appendChild(dom)
}else{
let loading = document.querySelector('#myloading')
if(loading){
document.body.removeChild(loading)
}
}
},[flag])
return [flag,changeFlag]
}
封装一个简单的useState
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
let state = []
let setters = []
let index = 0
let firstRender = true
function createSetters(index){
return function(value){
state[index] = value
console.log(state,'-----',index)
render()
}
}
function MyUseState(value){
//如果是初次渲染，
if(firstRender){
state.push(value)
setters.push(createSetters(index))
}
let varibles = state[index]
let changeVaribles = setters[index]
index++
return [varibles,changeVaribles]
}
function App(){
const [varibles,changeVaribles] = MyUseState(0)
const [name,changeName] = MyUseState('zs')
return (
<div>{varibles}<button onClick={()=>{
changeVaribles(varibles+1)
}}>改数</button>
{name}
<button onClick={()=>{
changeName('lisi')
}}>改ming</button>
</div>
)
}
function render(){
index=0
ReactDOM.render(
<App />,
document.getElementById('root')
);
}
render()
