使用 React Context API 和 useReducer() 钩子有什么优点和缺点？

Question

我正在开发一个 Web 应用程序，并且正在使用 React Context，而不使用 useReducer() 挂钩。这是我如何在应用程序中使用 Context 的简单示例：

const [stateValue, setStateValue] = useState("");
const [stateValue1, setStateValue1] = useState("");
const contextValue : MainContext = {
      stateValue: stateValue,
      setStateValue: setStateValue,
      stateValue1: stateValue1,
      setStateValue1: setStateValue1
}

因此，我将 contextValue 传递给我的 Context Provider，每次子组件必须更改 stateValuex 时，只需调用 setStateValuex，以便它触发所有子组件内 stateValuex 的重新渲染。使用 useReducer() 钩子代替 Context 有什么优点和缺点？

Answer 1

我将其视为两个问题：1）优点/缺点useStatevs useReducer2）道具与上下文的优点/缺点。然后将这些答案粘在一起。

useReducer如果您处于一种复杂的状态，并且想要确保所有更新逻辑都位于一个集中位置，那么该方法会很有用。useState另一方面对于不需要这种控制的简单状态很有好处。

props 是将值从一个组件传递给其子组件的标准方法。如果您要经过很短的距离，这是最简单且最好的方法。如果您需要在组件树中向下传递很长的值，那么 context 很有用。如果在很多情况下，组件接收到的 prop 不是为了自己，而是为了将其转发给子组件，那么这可能表明 context 会比 props 更好。

const contextValue : MainContext = {
  stateValue: stateValue,
  setStateValue: setStateValue,
  stateValue1: stateValue1,
  setStateValue1: setStateValue1
}

PS：如果您的上下文值是一个对象，请不要忘记记住它。如果不这样做，每次渲染时都会创建一个全新的对象，这将迫使任何消耗上下文的组件也进行渲染

const contextValue: MainContext = useMemo(() => {
  return {
    stateValue: stateValue,
    setStateValue: setStateValue,
    stateValue1: stateValue1,
    setStateValue1: setStateValue1
  }
}, [stateValue, stateValue1])