小编典典

Redux连接的组件如何知道何时重新渲染?

reactjs

我可能缺少一些非常明显的东西,想让自己清楚。

这是我的理解。
在幼稚的react组件中,我们有statesprops。更新state时会setState重新渲染整个组件。props大多是只读的,更新它们没有任何意义。

在订阅redux商店的react组件中,通过类似于store.subscribe(render),它每次商店更新时都会重新渲染。

react-
redux
有一个帮助程序,通常通过类似这样的方法connect()来注入状态树的一部分(组件感兴趣)和actionCreators
props组件

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

但是,了解到a
setState对于TodoListComponent响应redux状态树更改(重新渲染)必不可少,因此我无法在组件文件中找到任何statesetState相关代码TodoList。它的内容如下:

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

有人可以指出我所缺少的正确方向吗?

言:我遵循与redux软件包捆绑在一起的待办事项清单示例。


阅读 556

收藏
2020-07-22

共1个答案

小编典典

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

Dan
Abramov写了connectat(connect.js)的简化版本,它阐明了基本思想,尽管它没有显示任何优化工作。我还有指向Redux性能的许多文章的链接,这些文章讨论了一些相关的想法。

更新

React-Redux v6.0.0对连接的组件如何从存储中接收数据进行了一些重大的内部更改。

作为其中的一部分,我写了一篇文章,解释了connectAPI及其内部的工作方式以及它们随着时间的变化:

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

2020-07-22