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

Question

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

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

谢谢。

Answer 1

传递数据的方法有很多，但函数的方法却很少。

可以使用 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>
  );
}

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

它使数据依赖性更加明确并提高了可测试性，尽管它确实有点冗长。做你认为更正确的事情。您稍后可以轻松地更改您的方法(在本例中)。