更改 state 是否会导致在 ReactJS 中重新渲染

Question

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

this.state = {
   items: []
}

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

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

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

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

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

谢谢！

Answer 1

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

请下次检查 React 文档（ State 和 Lifecycle ）