React的Reducer Hook让state有了状态！
一、解决什么问题？
useReducer 是 useState 的升级版本，对 setState 这个操作进行了拆分，可以根据不同类型，进行不同的逻辑计算，最后去改变 state 对象。
1、实例：useReducer 实现计数器组件
const initialState = { count: 0 };
function reducer(state, action) {
switch (action.type) {
case 'increment':
return { count: state.count + 1 };
case 'decrement':
return { count: state.count - 1 };
default:
throw new Error();
}
}function Counter() {
const [state, dispatch] = React.useReducer(reducer, initialState);
return (
<>
Count: {state.count}
);
}二、useReducer 初始化方法 1、法一：使用第二个参数初始化
const [state, dispatch] = useReducer(
reducer,
{ count: initialCount }
);
2、法二：惰性初始化 useReducer 需要一个初始值和初始函数，经过计算得到的值作为 useReduccer 的初始化数据。这样就把计算逻辑独立在 useReducer 外部，为将来对重置 state 的 action 做处理提供了便利。
function init(initialCount) {
return { count: initialCount };
}function reducer(state, action) {
switch (action.type) {
case 'increment':
return { count: state.count + 1 };
case 'decrement':
return { count: state.count - 1 };
case 'reset':
return init(action.payload);
default:
throw new Error();
}
}function Counter({ initialCount }) {
const [state, dispatch] = useReducer(reducer, initialCount, init);
return (
<>
Count: {state.count}
);
}三、提升性能的说明 【React的Reducer Hook让state有了状态！】如果 useReducer 返回的 state 相比于之前没有变化，React会自动跳过对组件的渲染操作。这里的比较操作是调用了js的
Object.is() 方法。四、解决层层回调的烦恼 1、useContext + useReducer 顶层组件有个回调函数要传递下去，需要每一层都使用 props 进行设置，很繁琐，这里可以用
useContext + useReducer 来解决。useContext 负责传递执行函数，useReducer 负责对执行函数划分出不同状态，可供选择执行。
const TodosDispatch = React.createContext(null);
function TodosApp() {
// 提示：`dispatch` 不会在重新渲染之间变化
const [todos, dispatch] = useReducer(todosReducer);
return (
);
}function DeepChild(props) {
// 如果我们想要执行一个 action，我们可以从 context 中获取 dispatch。
const dispatch = useContext(TodosDispatch);
function handleClick() {
dispatch({ type: 'add', text: 'hello' });
}return (
);
}五、参考链接：
- React的Reducer Hook让state有了状态！
推荐阅读
- 热闹中的孤独
- JAVA（抽象类与接口的区别&重载与重写&内存泄漏）
- 放屁有这三个特征的，请注意啦！这说明你的身体毒素太多
- 一个人的旅行，三亚
- 布丽吉特，人生绝对的赢家
- 慢慢的美丽
- 尽力
- 一个小故事，我的思考。
- 家乡的那条小河
- 《真与假的困惑》???|《真与假的困惑》??? ——致良知是一种伟大的力量