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

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

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

提前致谢！

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

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组件进行不必要的渲染。为了避免这种情况，您需要将自定义设置器函数包装在React.useCallback以防止不必要的重新渲染，这只是另一个任意的钩子层。