Redux存储效率v。使用常规的反应道具

Question

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

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

redux网站这样说是关于performace的：many individual components should be connected to the store instead of just a few

这听起来我也应该连接甚至更小的（有时很小的）组件，但是我也在很多地方使用了商店，而不仅仅是每个组件。

欢迎对此问题进行任何输入。

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

使用这种方法，我们获得了将组件与状态分离，可重用和可隔离地进行测试的好处，以及使用它来传达应用程序状态的好处。