useReducer
const [state, dispatch] = useReducer(reducer, initialArg, init);
useState
的替代方案。它接收一个形如 (state, action) => newState
的 reducer,并返回当前的 state 以及与其配套的 dispatch
方法。
使用场景
普通需求场景下,useState直接处理比较简单
但是对于state逻辑复杂且包含多个子值的组件,使用useReducer有如下好处:
- 不需要再基于useState一个个创建单独的状态了
- 所有状态修改的逻辑统一化在reducer中处理,统一管理,便于维护,提升可读性
初始化
指定初始 state
将初始 state 作为第二个参数传入 useReducer
是最简单的方法:
const [state, dispatch] = useReducer(
reducer,
{count: initialCount}
);
惰性初始化
将 init
函数作为 useReducer
的第三个参数传入,这样初始 state 将被设置为 init(initialArg)
。
使用reducer重写Counter
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] = useReducer(reducer, initialState);
return (
<>
Count: {state.count}
<button onClick={() => dispatch({type: 'decrement'})}>-</button>
<button onClick={() => dispatch({type: 'increment'})}>+</button>
</>
);
}
纯函数 immutable 浅比较
React 使用 Object.is
比较算法 来浅比较 state,因此传入的新状态和旧状态不能是同一个地址。若在旧状态上直接更改,React将跳过子组件的视图重新渲染和副作用的执行
需要注意的是,React 可能仍需要在跳过渲染前再次渲染该组件。不过由于 React 不会对组件树的“深层”节点进行不必要的渲染,所以大可不必担心。如果你在渲染期间执行了高开销的计算,则可以使用 useMemo
来进行优化。