性能：连接到 Redux 存储与通过 props 传递数据

Question

我对所有主要组件使用 redux 存储，但对于较小的组件，我只是传递常规的 React props。哪个更有效率？

如果有许多较小的组件，从 redux 中拉取或在常规 props 中传递有什么区别吗？

Redux文档说：

许多单独的组件应该连接到商店，而不是仅仅几个

这听起来好像我也应该连接更小的（有时非常小的）组件。目前，我在许多（但不是全部）组件中使用该商店。

Answer 1

connect较小的组件性能更高，因为当 Redux 状态更改时，只有受影响的组件才会重新渲染。传递常规的 React props 效率较低，因为当状态发生变化时，该变化会通过许多嵌套组件传递到小组件，导致所有这些组件重新渲染。

虽然连接小型组件的性能更高，但它也存在本答案中描述的一些缺点。总而言之，连接组件将其耦合到 Redux 状态。因此，组件必须使用存储进行测试，并且除非存储实现与之配套，否则组件不能模块化。解决方案是将组件的有状态逻辑与其无状态逻辑分开。

const StatefulTodo = ({ id }) => {
  const todo = useSelector(state => getTodo(state, {id});

  return <StatelessTodo {...todo} />
}

const StatelessTodo = ({ ...todo }) => {
  return (
    <div>
      <p>{todo.title}</p>
      <p>{todo.description}</p>
      ...etc
    </div>
  )
}

通过这种方法，TodoUI 可以传达应用程序状态，同时与状态解耦、可隔离测试且可重用。

在实践中，您应该根据权衡来决定连接哪些组件。一个明显高性能的应用程序不必阻止所有可能的不需要的重新渲染。您始终可以使用 React devtools 分析器来查看哪些组件需要优化。