3

我最近开始使用带有 useContext Hook 的 Context React Api。我观察到，当我们有一个状态变量即 const someState = useState(state, setState) 时，一些开发人员直接在提供程序值中传递 setSate，然后在子组件中调用它。这是一个好习惯吗？

当您不使用上下文时，您必须创建一个处理程序来“访问”子组件中的 setState。我仍在使用处理函数并将它们传递给提供者值，以便从子上下文中导入它们。

在上下文中传递 setState 是一个好习惯吗？我仍然有一些疑问，因为通常您不能将 setState 直接传递给组件。我应该考虑的性能或任何其他缺点是否有任何差异？

谢谢你。

4

2 回答 2

2

编辑：我实际上认为我错了，但我不确定。如果您编写自己的具有状态的提供程序，我的回复对这种情况有效。如果您只是使用提供 setter 的默认提供程序，我会同意 Amel 的回复。

我个人不会这样做，但这更像是一种观点。但是，像往常一样，这在很大程度上取决于您想要达到的目标。

这样做的一个积极方面是，useState 给定的状态设置器在每次重新渲染时始终保持不变。如果您传递自定义值，您应该避免它过于频繁地更改，因为使用 useContext 监听更改的每个组件都会重新呈现。

我仍然希望通过回调传递一个自定义对象（例如来自 useMemo 以避免不必要的重新渲染）来设置状态。如果您想在将来提供更多内容，则更容易扩展。

像这样的东西（非常简单的例子，这样当然没有意义，只是为了理解）：

function MyProvider({children}) {
   const [state, setState] = useState(0);
   const provided = useMemo(() => ({
       value: state,
       setValue: (value) => setState(value)
   }, [value]);
   return <MyContext.Provider value={provided}>{children}</MyContext.Provider>;
}

在使用上下文的每个地方都可以在不更改代码的情况下进行扩展。但是，我仍然认为传递二传手并没有什么特别糟糕的，如果这是你想要实现的。

于 2020-08-20T09:52:15.520 回答
2

如果我理解正确，区别在于，在一种方式中，状态是从父组件设置的，而在另一种方式中，状态是从子组件设置的。有时人们这样做是为了避免在更改状态时循环渲染。应该没有缺点，但使用处理函数是常规方法。

于 2020-08-20T09:40:12.367 回答