reactjs - useState 与 useReducer

Question

useReducer is usually preferable to useState when you have complex state logic that involves multiple sub-values or when the next state depends on the previous one. useReducer also lets you optimize performance for components that trigger deep updates because you can pass dispatch down instead of callbacks.

(引自 https://reactjs.org/docs/hooks-reference.html#usereducer )

我对粗体部分感兴趣，其中指出 useReducer应该使用而不是 useState在上下文中使用时。

我尝试了两种变体，但它们似乎没有不同。

我比较这两种方法的方式如下:

const [state, updateState] = useState();
const [reducerState, dispatch] = useReducer(myReducerFunction);

我将它们中的每一个传递给一个上下文对象，该对象正在更深的子对象中使用(我只是运行单独的测试，用我想要测试的函数替换该值)。

<ContextObject.Provider value={updateState // dispatch}>

子级包含这些功能

const updateFunction = useContext(ContextObject);
useEffect(
  () => {
    console.log('effect triggered');
    console.log(updateFunction);
  },
  [updateFunction]
);

在这两种情况下，当父级重新渲染时(由于另一个本地状态更改)，效果从未运行，这表明更新函数在渲染之间没有更改。我是否读错了引用中的粗体句子？或者有什么我忽略的事情？

Answer 1

useReducer also lets you optimize performance for components that trigger deep updates because you can pass dispatch down instead of callbacks.

上面的语句并不是试图表明 useState 返回的 setter 是在每次更新或渲染时新创建的。这意味着，当您有一个复杂的逻辑来更新状态时，您根本不会直接使用setter来更新状态，而是编写一个复杂的函数，该函数反过来会调用具有更新状态的setter，例如

const handleStateChange = () => {
   // lots of logic to derive updated state
   updateState(newState);
}

ContextObject.Provider value={{state, handleStateChange}}>

现在，在上述情况下，每次重新渲染父级时，都会创建一个新的handleStateChange实例，导致Context Consumer也重新渲染。

上述情况的解决方案是使用 useCallback 并记住状态更新器方法并使用它。但是，为此，您需要处理与在方法中使用值相关的闭包问题。

因此，建议使用 useReducer ，它返回一个 dispatch 方法，该方法在重新渲染之间不会改变，并且您可以在 reducer 中拥有操作逻辑。