reactjs - 性能 : connecting to the Redux store vs passing data through props

Question

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

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

Redux docs说:

many individual components should be connected to the store instead of just a few

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

Answer 1

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

虽然连接小型组件的性能更高，但它也有一些缺点，如 this answer 中所述。 .总而言之，连接一个组件会将其耦合到 Redux 状态。因此，组件必须使用 store 进行测试，并且组件不能是模块化的，除非 store 实现与它一起使用。对此的解决方案是将组件的有状态逻辑与其无状态逻辑分开。

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 profiler 来查看哪些组件需要优化。