React JS 如何避免深度回调

Posted 2023-04-14

【中文标题】React JS 如何避免深度回调

【英文标题】：React JS how to avoid deep callbacks

【发布时间】：2018-02-06 15:59:15

【问题描述】：

我的问题是“当我想访问/响应子组件数据时，有没有办法避免在树的深处发送回调”。

我有一个组件Application，其中包含一个子组件Person，而子组件TraitCollection又包含一个子组件Trait。

当Trait 更改时，我想将数据发送回Application，以便转发给Application 中名为PersonList 的另一个孩子。

我目前的解决方案是将回调作为道具发送给每个孩子。每个回调函数构造并附加最终到达Application 的数据，我将其作为道具传递给PersonList。

我可以想象，“添加更多关卡”或将组件拆分成更小的部分会进一步使回调链复杂化。

有没有其他方法可以做到这一点，或者这是在 React 中处理从孩子向父母传递数据的最佳方式？

【参考方案1】：

你处理它的方式是推荐的方式，也是最像 React 的。除了您发现的问题之外，该方法本身没有任何问题。看起来Redux 可以帮助您解决这个问题。 Redux 让您可以使用公共存储和基于动作创建器、动作和缩减器的良好设计模式来统一 React 应用程序的状态。

【讨论】：

感谢您的帮助，将研究 Redux！

您为什么认为“这种方法没有任何问题”？如果要更改回调的名称，则必须更改谁知道有多少文件，这些文件都是无用道具的纠结网，只有开头和结尾才是重要的，而两者之间的一切只会造成潜在的复杂性，甚至破坏整体精致的链条，因为它的一个链接中的一个错误。

【参考方案2】：

你可以直接使用 React Context https://facebook.github.io/react/docs/context.html，但更好的选择是使用 React-Redux，它可以让你避免传递回调，并且你可以从任何组件（连接到商店）更改任何组件的状态) 具有调度功能。

【参考方案3】：

文档直接回答这个问题：

在大型组件树中，我们推荐的替代方法是通过上下文从 useReducer 传递调度函数

发件人：https://reactjs.org/docs/hooks-faq.html#how-to-avoid-passing-callbacks-down (Archive)