我可能错过了一些非常明显的事情,我想澄清一下.

这是我的理解

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

react-redux有一个助手connect(),它将部分状态树(组件感兴趣的)和actionCreators作为props注入组件,通常通过以下方式

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

但是由于理解了setState对于TodoListComponent响应redux状态树更改(重新渲染)是必不可少的,我在TodoList组件文件中找不到任何statesetState相关代码.它是这样写的:

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

有人能给我指出正确的方向吗?我错过了什么?

另外,我将遵循redux package的待办事项 list 示例.

推荐答案

connect函数生成订阅存储的包装器组件.当一个动作被调度时,包装器组件的回调会被通知.然后,它运行mapState函数,并shallow-compares此时的结果对象与上次的结果对象(因此,如果您要rewrite一个具有相同值的redux存储字段,它将不会触发重新渲染).如果结果不同,它会将结果作为props 传递给"真实"组件.

丹·阿布拉莫夫(Dan Abramov)编写了一个非常简单的connect at(connect.js)版本,说明了基本思想,尽管它没有显示任何优化工作.我也有一些关于Redux performance的文章的链接,这些文章讨论了一些相关的 idea .

update

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

作为其中的一部分,我写了一篇文章,解释了connect API及其内部如何工作,以及它们是如何随着时间的推移而改变的:

100

Reactjs相关问答推荐

无法在列表中看到文本

在Redux工具包查询中,是否可以将标记应用到API切片内的所有端点?

Reactjs中的chartjs和reaction-chartjs-2的问题

如何在单击行中的图标时避免选中ionic 复选框?

左边框不在图表中显示

阻止组件更新的多分派Redux Thunk或setState是否有任何问题

更改点几何体的坐标会将其隐藏

在任何渲染之前在ReactJs中获取数据

错误:操作必须是普通对象.使用自定义中间件进行异步操作. Redux/工具包

如何清除过滤器搜索的状态

当 URL 与我声明的任何路由都不匹配时,如何使用不会重定向到错误页面的动态 URL? - react 路由 dom

在MongoDB中,如何获取最后N条记录中字段不为空或不为空字符串的数据

i18next中复数键的理解

将外部 JavaScript 导入 React(通过文件)

next js 13 在获取中使用标头时动态渲染而不是静态渲染?

在 React 的父级中多次调用子级时从子级获取数据到父级

将 ref 转发到所有页面(路由组件)只是为了将其应用于
并具有跳过导航链接(按钮).有没有更好的办法?

使用 React Router v6 监听来自不同组件的组件状态变化

如何通过 id 从 useSprings 数组中删除元素

组件焦点上的 MUI 更改栏 colored颜色