React JS 如何避免深层回调函数

Question

我的问题是，“是否有一种方法可以避免在访问/响应子组件数据时向树深处发送回调”。

我有一个名为“Application”的组件，它包含一个子组件“Person”，而“Person”又包含一个子组件“TraitCollection”，“TraitCollection”又包含一个子组件“Trait”。

当“Trait”被更改时，我希望将数据发送回“Application”，以便转发到“Application”中的另一个名为“PersonList”的子节点。

我当前的解决方案是将回调函数作为props发送给每个子节点。每个回调函数构造并附加数据，最终到达“Application”，在那里我将其作为props传递给“PersonList”。

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

是否还有其他方法来处理在React中从子组件传递数据到父组件，或者这是处理此类情况的最佳方法？

- George Hanna

Answer 1

你处理问题的方式是React中推荐的方式，也是最符合React思想的。这种方式本身没有问题，除了你发现的那个问题。看起来Redux可以帮助你解决这个问题。Redux让你使用一个公共存储库和基于操作创建者、操作和减速器的良好设计模式统一React应用的状态。

- César Landesa

---

谢谢您的帮助，我将会深入研究 Redux！ - George Hanna

你为什么认为“这种方法没有问题”？如果有人改变回调的名称，那么必须更改谁知道有多少个文件，它们都是一堆无用的属性，只有开头和结尾才有意义，中间的一切都可能造成潜在的复杂性，甚至通过一个链接中的单个错误来破坏整个精细链。 - vsync

Answer 2

你可以直接使用React Context https://facebook.github.io/react/docs/context.html，但更好的选择是使用React-Redux，它将允许你避免传递回调函数，并且你将能够使用dispatch函数从任何连接到store的组件更改任何组件的状态。

- Anatoly Strashkevich

Answer 3

文档直接回答了这个问题：

在大型组件树中，我们建议的另一种方法是通过上下文从 useReducer 传递 dispatch 函数

来源：https://reactjs.org/docs/hooks-faq.html#how-to-avoid-passing-callbacks-down （存档）

- ADJenks

Answer 4

为了避免深层回调，根据React文档，可以通过以下方式使用useReducer和context： 如何避免传递回调函数？ 我们发现大多数人不喜欢手动将callbacks通过每个组件层级进行传递。即使它更明确，但感觉上就像是很多“管道”。

在大型组件树中，我们建议的替代方法是通过context从useReducer传递一个dispatch函数：

const TodosDispatch = React.createContext(null);

function TodosApp() {
  // Note: `dispatch` won't change between re-renders 
  const [todos, dispatch] = useReducer(todosReducer);
  return (
    <TodosDispatch.Provider value={dispatch}>
      <DeepTree todos={todos} />
    </TodosDispatch.Provider>
  );
}

TodosApp 内部树形结构中的任何 child 都可以使用 dispatch 函数将操作传递给 TodosApp：

function DeepChild(props) {
  // If we want to perform an action, we can get dispatch from context. 
  const dispatch = useContext(TodosDispatch);
  function handleClick() {
    dispatch({ type: 'add', text: 'hello' });
  }

  return (
    <button onClick={handleClick}>Add todo</button>
  );
}

从维护的角度来看，这种方法更加方便（无需保留回调函数），并且完全避免了回调问题。像这样传递dispatch down是进行深层次更新的推荐模式。

- Dawlatzai Ghousi