reactjs - redux 连接组件如何知道何时重新渲染？

Question

我可能遗漏了一些非常明显的东西，想澄清一下自己。

这是我的理解。
在一个简单的 React 组件中，我们有 states & props 。更新中state与 setState重新渲染整个组件。 props大多数是只读的，更新它们没有意义。

在订阅 redux 存储的 React 组件中，通过类似 store.subscribe(render) 的方式，它显然会在每次商店更新时重新渲染。

react-redux有 helper connect()注入(inject)状态树的一部分(组件感兴趣的部分)和 actionCreators 作为 props到组件，通常通过类似

const TodoListComponent = connect(
  mapStateToProps,
  mapDispatchToProps
)(TodoList)

但要了解 setState对于 TodoListComponent 至关重要为了对 redux 状态树更改(重新渲染)使用react，我找不到任何 state或setState相关代码在 TodoList组件文件。它的内容是这样的:

const TodoList = ({ todos, onTodoClick }) => (
  <ul>
    {todos.map(todo =>
      <Todo
        key={todo.id}
        {...todo}
        onClick={() => onTodoClick(todo.id)}
      />
    )}
  </ul>
)

有人能指出我所缺少的正确方向吗？

P.S 我正在关注与 redux package 捆绑在一起的待办事项列表示例.

Answer 1

connect 函数生成一个订阅商店的包装组件。当分派(dispatch)操作时，将通知包装器组件的回调。然后，它运行您的 mapState 函数，并对这次的结果对象与上次的结果对象进行浅度比较(因此，如果您要重写 具有相同值的 redux store 字段，它不会触发重新渲染)。如果结果不同，那么它将结果作为 props 传递给您的“真实”组件”。

Dan Abramov 在 ( connect.js ) 编写了一个非常简化的 connect 版本，它说明了基本思想，尽管它没有显示任何优化工作。我还有关于 Redux performance 的许多文章的链接讨论一些相关的想法。

更新

React-Redux v6.0.0对连接组件从商店接收数据的方式进行了一些重大内部更改。

作为其中的一部分，我写了一篇文章，解释 connect API 及其内部结构如何工作，以及它们如何随着时间的推移而发生变化:

<强> Idiomatic Redux: The History and Implementation of React-Redux