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

【问题标题】：performance: connecting to the Redux store vs passing data through props性能：连接到 Redux 存储与通过 props 传递数据
【发布时间】：2020-04-18 01:35:41
【问题描述】：

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

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

Redux docs 说：

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

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

【问题讨论】：

标签： reactjs redux react-redux

【解决方案1】：

connecting 较小的组件性能更高，因为当 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 来查看哪些组件需要优化。

【讨论】：

如果你只导出连接的组件，它只会连接到商店——这不是应该做的。导出组件，将它连接到它使用的地方——而不是它定义的地方。或者两者都导出，这样更容易测试，用途更广泛。