gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 12:54:24 25 4
gpt4 key购买 nike

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

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

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

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

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

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

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

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

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

最佳答案

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

关于reactjs - redux 连接组件如何知道何时重新渲染?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40386128/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com