将Reaction上下文API与useReducer()挂钩一起使用有什么利弊?

我正在处理一个Web应用程序,我正在使用Reaction上下文,但没有使用useReducer()挂钩。这是我如何在我的应用程序中使用上下文的一个简单示例:

const [stateValue, setStateValue] = useState("");
const [stateValue1, setStateValue1] = useState("");
const contextValue : MainContext = {
      stateValue: stateValue,
      setStateValue: setStateValue,
      stateValue1: stateValue1,
      setStateValue1: setStateValue1
}
因此,我向上下文提供程序传递了contextValue,每次子组件必须更改stateValuex时,只需调用setStateValuex,以便它触发在所有子组件中重新呈现stateValuex。 将上下文与useReducer()挂钩一起使用会有什么利弊?


解决方案

我会将其视为两个问题:1)useStateuseReducer的利弊;2)道具与上下文的利弊。然后把这些答案放在一起。

如果您有一个复杂的状态,希望确保所有更新逻辑都在一个集中位置,

useReducer可能会很有用。useState另一方面,适用于不需要这种控制的简单状态。

PROPS是将值从一个组件传递到其子组件的标准方法。如果你路过它的距离很短,这是最简单也是最好的方法。如果您需要沿组件树向下传递很长一段时间的值,则上下文非常有用。如果在很多情况下,组件不是为自己接收道具,而只是为了可以将道具转发给子组件,则这可能表明上下文可能比道具更好。

const contextValue : MainContext = {
  stateValue: stateValue,
  setStateValue: setStateValue,
  stateValue1: stateValue1,
  setStateValue1: setStateValue1
}
附注:如果您的上下文值是对象,don't forget to memoize it。如果不这样做,您将在每次渲染时创建一个全新的对象,这将迫使任何使用上下文的组件也进行渲染

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

相关文章