将Reaction上下文API与useReducer()挂钩一起使用有什么利弊？ [英] What are the pros and cons on using React Context API with the useReducer() hook?

问题描述

我正在处理一个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)useState与useReducer的利弊；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])

这篇关于将Reaction上下文API与useReducer()挂钩一起使用有什么利弊？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！