时间戳

首页 > 解决方案 > 更改状态是否会导致 ReactJS 中的重新渲染

javascript - 更改状态是否会导致 ReactJS 中的重新渲染

问题描述

在我的 ReactJS 应用程序中，我有一个字典数组存储为称为 items 的状态，如下所示：

this.state = {
   items: []
}

然后我在某些事件之后将项目添加到列表中，例如：单击一个按钮，这会导致 this.state.items 继续增长，看起来像这样：

items: [{"item": "milk", "price": 3.00}, {"item": "eggs", "price": 5.00}]

项目状态直接影响我的 UI，因为

this.state.items.map((item, i) => <><h1>{item.item}</h1><p>{item.price}</p></>)

我的问题是：这是否导致我的 UI 必须在每次项目状态更改时重新渲染项目列表中已经呈现的项目。如果是这样，我该如何解决？

谢谢！

标签： javascriptreactjsuser-interface

解决方案

这取决于您如何设置状态，如果您使用提供的，this.setState那么是的，react 会注意到并重新渲染您的应用程序。如果您改为这样做，state = { /* some new state */ }则它可能不会重新渲染。我希望这回答了你的问题。

请下次检查 React 文档（状态和生命周期）

推荐阅读