我有一个问题来提高我对 React 钩子的理解。它说，如果将设置的状态函数或钩子传递给孩子，这是不好的做法。因此，应该将处理程序函数传递给位于父级中的子级，然后在那里使用设置状态函数。当我在开发应用程序的许多工作部分后遇到这个问题时，我想知道为什么必须避免这种情况，因为它对我来说效果很好。
我希望你们在没有代码示例的情况下理解我的问题，如果我需要澄清，我会提供一些片段。
提前致谢！
React Hooks：为什么将设置状态函数传递给子组件是不好的做法？
IT技术
javascript
reactjs
react-hooks
2021-05-05 16:57:02
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以防止不必要的重新渲染，这只是另一个任意的钩子层。