redux 连接组件如何知道何时重新渲染? [英] How does a redux connected component know when to re-render?

问题描述

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

I'm probably missing something very obvious and would like to clear myself.

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

Here's my understanding.
In a naive react component, we have states & props. Updating state with setState re-renders the entire component. props are mostly read only and updating them doesn't make sense.

在订阅 redux store 的 react 组件中，通过诸如 store.subscribe(render) 之类的东西，它显然会在每次 store 更新时重新渲染.

In a react component that subscribes to a redux store, via something like store.subscribe(render), it obviously re-renders for every time store is updated.

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

react-redux has a helper connect() that injects part of the state tree (that is of interest to the component) and actionCreators as props to the component, usually via something like

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

但是在理解 setState 对于 TodoListComponent 对 redux 状态树更改(重新渲染)做出反应必不可少的情况下，我找不到任何 TodoList 组件文件中的 >state 或 setState 相关代码.它的内容是这样的:

But with the understanding that a setState is essential for the TodoListComponent to react to redux state tree change(re-render), I can't find any state or setState related code in the TodoList component file. It reads something like this:

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

有人能指出我缺少什么的正确方向吗?

Can someone point me in the right direction as to what I am missing?

PS 我正在关注与 捆绑的待办事项列表示例redux 包.

P.S I'm following the todo list example bundled with the redux package.

推荐答案

connect 函数生成订阅存储的包装器组件.当一个动作被分派时，包装器组件的回调被通知.然后它运行你的 mapState 函数，并浅比较这次的结果对象与上次的结果对象(所以如果你要重写em> 具有相同值的 redux 存储字段，则不会触发重新渲染).如果结果不同，那么它会将结果作为道具传递给您的真实"组件.

The connect function generates a wrapper component that subscribes to the store. When an action is dispatched, the wrapper component's callback is notified. It then runs your mapState function, and shallow-compares the result object from this time vs the result object from last time (so if you were to rewrite a redux store field with its same value, it would not trigger a re-render). If the results are different, then it passes the results to your "real" component" as props.

Dan Abramov 在 (connect.js) 说明了基本思想，尽管它没有显示任何优化工作.我还有一些关于 Redux 性能，讨论一些相关的想法.

Dan Abramov wrote a great simplified version of connect at (connect.js) that illustrates the basic idea, although it doesn't show any of the optimization work. I also have links to a number of articles on Redux performance that discuss some related ideas.

更新

React-Redux v6.0.0 做了一些主要的内部改变连接组件从商店接收数据的方式.

React-Redux v6.0.0 made some major internal changes to how connected components receive their data from the store.

作为其中的一部分，我写了一篇博文，解释了 connect API 及其内部结构是如何工作的，以及它们是如何随时间变化的:

As part of that, I wrote a post that explains how the connect API and its internals work, and how they've changed over time:

惯用的 Redux:React 的历史和实现-Redux

这篇关于redux 连接组件如何知道何时重新渲染?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！