当前位置: 首页 > 面试题库 >

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

和丰羽
2023-03-14
问题内容

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

这是我的理解。
在幼稚的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软件包捆绑在一起的待办事项清单示例


问题答案:

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

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

更新

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

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

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



 类似资料:
  • 问题内容: 我用来对我的React组件进行单元测试。我知道,为了测试原始未连接的组件,我只需要导出它并对其进行测试(我已经做到了)。我已经设法为连接的组件编写了一个测试,但是我真的不确定这是否是正确的方法,以及我究竟想对连接的组件进行什么测试。 Container.jsx Container.test.js 问题答案: 这是个有趣的问题。 我通常会同时导入容器和组件以进行测试。对于容器测试,我使用

  • 问题内容: 我有一个动作和减速器,可以更新全局计数器。快速执行此操作。减速器为每个操作返回状态的新副本。减速器看起来像: 我在各种React组件上使用的方法。并非所有组件都关心此循环计数器。因为我在每个刻度上都在化简器中返回新状态,所以所有订阅的组件都将执行,这会导致不必要的React渲染调用。 这些组件之一如下所示: 即使此组件不依赖它,也会触发重新渲染。这会导致重新渲染,过度渲染,多次渲染,不

  • 问题内容: 我正在尝试将表示性组件与容器组件分开。我有一个和一个。容器负责触发redux操作,以根据当前用户获取适当的网站。 问题是在最初呈现容器组件之后,异步获取了当前用户。这意味着容器组件不知道它需要重新执行其函数中的代码,该代码将更新数据以发送到。我认为我需要在其props(user)之一更改时重新渲染容器组件。如何正确执行此操作? 问题答案: 您必须在方法中添加条件。 该示例用于比较对象。

  • 我对react还比较陌生,我一直在分解一个web应用程序,并用react组件替换部分。我现在正在开发一个组件,其中包含我创建的几个不同组件。 在新组件中,我在componentDidMount函数中进行API调用,并创建子组件。乍一看,一切看起来都很完美,但当我们在其中一个子组件中进行状态更改,然后在父组件中进行更改时,子组件将其状态重置为更改之前的状态。 我知道发生了什么,州政府没有被传递给家长

  • 根据IBM文档:清除策略指定在检测到陈旧连接或致命连接错误时如何清除连接。有效值为EntirePool和FailingConnectionOnly。 问题:服务器如何/何时知道连接已过时?它是否会尽快(立即)清洗池任何连接都会过时,或者按照收获时间发生? 假设收割时间为180秒。假设收割线程上次在下午3:05运行,连接在下午3:06失效,服务器是在下午3:06自己清除池,还是只在下午3:08清除池

  • 最后,在中有一个子组件,名为。这就是问题所在。我还将从获得的项传递到。因此,数据流是(连接)>(未连接)>(连接)。 连接到Redux。它使用redux中的一些操作来更新中的项。当我在中更新时,可以很好地接收更新后的数据,但是却什么都接收不到。中的项从未更新。 我发现问题出在将连接到Redux时。如果没有连接到redux,它也会接收更新的道具,就像一样。 组件如下。我已经试着尽可能地简化它们。 D