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

Question

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

如果有许多较小的组件，那么从redux中拉出或传递常规道具有什么区别吗？

Redux docs说：

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

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

Answer 1

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

虽然连接小型组件的性能更高，但它具有this answer中所述的一些缺点。总而言之，连接组件会将其耦合到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>
  )
}

通过这种方法，Todo UI可以在与应用程序状态分离的情况下进行通信，以隔离状态进行测试并可以重用。

在实践中，您应该在权衡的情况下决定连接哪些组件。表现出色的应用程序不必阻止所有可能的不需要的重发。而且，您始终可以使用React devtools分析器查看需要优化哪些组件。