当您具有涉及多个子值的复杂状态逻辑时,或者当下一个状态取决于上一个状态时,useReducer通常比useState更可取。useReducer还可以让您优化触发深层更新的组件的性能,因为您可以传递调度而不是回调。
(引自https://reactjs.org/docs/hooks-reference.html#usereducer)
我对粗体部分感兴趣,该部分指出useReducer应useState在上下文中使用而不是使用。
我尝试了两种变体,但它们似乎没有什么不同。
我比较这两种方法的方式如下:
const [state, updateState] = useState();
const [reducerState, dispatch] = useReducer(myReducerFunction);
Run Code Online (Sandbox Code Playgroud)
我将它们每个都传递给一个上下文对象,该上下文对象被一个更深的孩子使用(我只是运行了单独的测试,将值替换为要测试的函数)。
<ContextObject.Provider value={updateState // dispatch}>
孩子包含这些功能
const updateFunction = useContext(ContextObject);
useEffect(
() => {
console.log('effect triggered');
console.log(updateFunction);
},
[updateFunction]
);
Run Code Online (Sandbox Code Playgroud)
在这两种情况下,当父级重新渲染时(由于另一个局部状态更改),效果永远不会运行,这表明在渲染之间更新功能未更改。我看错了引号中的粗体字吗?还是我忽略了什么?