React Hooks：为什么将 setstate 函数传递给子组件是不好的做法？

【问题标题】：React Hooks : Why is it bad practice to pass the set state funcitons to a Child Component?React Hooks：为什么将 setstate 函数传递给子组件是不好的做法？
【发布时间】：2020-06-19 11:57:03
【问题描述】：

我有一个问题要提高我对反应钩子的理解。它说，如果将设置状态函数或钩子传递给孩子，这是不好的做法。因此，应该只将一个处理函数传递给位于父级中的子级，然后使用其中的设置状态函数。当我在开发应用程序的许多工作部分后遇到这个问题时，我想知道为什么必须避免这种情况，因为它对我来说很好用。

我希望你们在没有代码示例的情况下理解我的问题，如果我需要澄清，我会提供一些 sn-ps。

提前致谢！

【问题讨论】：

“据说如果将设置状态函数或钩子传递给孩子，这是不好的做法。”你在哪里读到这个？
@EmileBergeron 似乎传递了错误信息here

标签： javascript reactjs react-hooks

【解决方案1】：

将状态设置器函数传递给孩子是不错的做法，这是完全可以接受的。事实上，我认为这样做：

const MyComponent = () => {
  const [state, setState] = useState();

  return <Child onStateChange={setState} />
}

const Child = React.memo(() => {...});

优于

const MyComponent = () => {
  const [state, setState] = useState();

  return <Child onStateChange={(value) => setState(value)} />
}

const Child = React.memo(() => {...});

因为在第一个示例中，Child 组件不会在 MyComponent 呈现时重新呈现。在第二个示例中，每当MyComponent 呈现时，它都会重新创建自定义状态设置器函数，这会强制Child 组件进行不必要的呈现。为避免这种情况，您需要将自定义 setter 函数包装在 React.useCallback 中以防止不必要的重新渲染，这只是另一个任意层的钩子。

【讨论】：