useReducer
useState 的替代方案。它接收一个形如 (state, action) => newState 的 reducer，并返回当前的 state 以及与其配套的 dispatch 方法。（如果你熟悉 Redux 的话，就已经知道它如何工作了。）
基本使用：
const [state, dispatch] = useReducer(reducer, initialArg);
当然还有第三个参数，不经常用，不做赘述。
和其他的hooks（useState、useEffect、useSelector、useDispatch等等）一样，都是从react中解构出来，使用的时候我们只需要将action函数和初始state传入即可，这个时候useReducer会给我们返回一个数组元素，数组的第0项是我们最新的state，第1项是dispatch函数，我们只需要将我们的action标识传入，就可以改变state中的数据并且入react-rudex\redux一样，可以实现自动render()
action函数
const initialState = {count: 0};
function reducer(state=initialState , action) {
switch (action.type) {
case 'increment':
return {count: state.count + 1};
case 'decrement':
return {count: state.count - 1};
default:
throw new Error();
}
}
使用useReducer
function Counter() {
const [state, dispatch] = useReducer(reducer, initialState);
return (
<>
Count: {state.count}
<button onClick={() => dispatch({type: 'decrement'})}>-</button>
<button onClick={() => dispatch({type: 'increment'})}>+</button>
</>
);
}
这样就实现了状态的更新，而我们并没有使用useState这个hook,如果我们要更新的数据很多，我们完全可以使用一个dispatch来解决，而不是调用多个setXXXX来更新状态。也不用使用回调函数的形式来更新父级组件中的状态。useReducer适用于单个模块下，如果想使用useReducer来实现全局的状态，还是推荐使用创建全局状态管理的形式来解决。
Hooks使用createStore、Provider、useSelector、useDispatch实现connect功能
在某些场景下，useReducer 会比 useState 更适用，例如 state 逻辑较复杂且包含多个子值，或者下一个 state 依赖于之前的 state 等。并且，使用 useReducer 还能给那些会触发深更新的组件做性能优化，因为你可以向子组件传递 dispatch 而不是回调函数 。
useReducer的状态也会和useState的状态一样，会一直持久化，不会在组件重新渲染时改变。
createContext && useContext
使用Context我们可以实现父组件向孙组件传递参数的问题，无论是属性还是callback。
也可以配合上面的useRecuder来实现孙组件更新父组件中state中的状态，只要孙组件拿到父组件中的dispatch就可以出发action，使父组件重新render。
首先我们可以选择再一个单独的js中创建一个Context
export const myName='六卿'
export const myCreateContext= React.createContext();
在父组件中引入这个js，使用解构赋值的形式拿到myName、myCreateContext：
import {myName,myCreateContext} from './xxx.js'
在render中使用：
<myCreateContext.Provider value={myName}>
<子组件 />
</myCreateContext.Provider>
这个时候我们成功的将myName传入后代组件，无论是子组件还是孙组件；
在子组件或者孙组件中同样也引入xxx.js
在子组件或者孙组件中使用useContext这个hook来接收来自父组件中的数据；
const myName= useContext(myCreateContext);
这个时候我们就可以直接使用myName的值了。
useReducer && createContext
还是上面的例子，我们将value传入的值为我们在useReducer中返回的值，state、dispatch
const [state, dispatch] = useReducer(reducer, initialState);
<myCreateContext.Provider value={{state,dispatch}}>
<子组件 />
</myCreateContext.Provider>
这样在子组件或者孙组件中我们可以这样写：
const {state,dispatch}= useContext(myCreateContext);
这样我们就可以使用父组件中的state，以及我们可以触发父组件中的action来实现更改父组件中的数据。
上面的操作就实现了父孙组件的通信。
同样是上面的useReducer和context还是适用单个模块使用，不推荐这样形式实现全局数据共享。
其他文章
1.hooks实现toDoList
2.hooks实现左添右减
3.React实现添加多行输入框(点击一行增加一行)
4.React页面跳转取消上一个页面的所有请求
5.React配合axios请求拦截校验session，403跳转至登陆页面
6.Hooks使用createStore、Provider、useSelector、useDispatch实现connect功能
六卿
见贤思齐焉，见不贤内自省
个人见解，不对之处还请斧正。
|