在 React 中的子组件之间传递数据的最佳方式是什么？

DiegoGoLeoro 发表于 Dev

迭戈戈莱奥罗

我很想知道如果我们有多个嵌套组件并且我们将回调函数传递给最低级别的组件，然后整个组件树从最低级别组件中的事件呈现，那么 React 应用程序的性能是否会受到影响触发此回调。

如果是这样，解决这个问题的最佳方法是什么？

谢谢。

伊戈尔·洛斯库托夫

有很多方法可以传递数据，但对于函数来说则较少。

可以使用 Redux、useContext 或其他一些外部解决方案，如jotai。

其实官方推荐的方式是useContext：https ://reactjs.org/docs/hooks-faq.html#how-to-avoid-passing-callbacks-down

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>
  );
}

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>
  );
}

但坦率地说，将一个函数传递几个组件也不是那么糟糕。

它使数据依赖关系更加明确并提高了可测试性，尽管它确实有点冗长。做你觉得更正确的事。您可以稍后（在这种情况下）很容易地更改您的方法。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。