更改状态会导致在ReactJS中重新渲染

时间:2020-07-21 20:14:50

标签: javascript reactjs user-interface

在我的ReactJS应用程序中,我有一组字典存储为状态,称为项,如下所示:

this.state = {
   items: []
}

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

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

项目状态直接影响我的用户界面,因为

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

我的问题是:这是否导致UI每次项目状态更改时都必须重新渲染已经渲染过的项目列表中的项目。如果是这样,我该如何解决?

谢谢!

1 个答案:

答案 0 :(得分:2)

这取决于您如何设置状态,如果您使用提供的this.setState,则可以,React将注意到并重新渲染您的应用。如果改为执行state = { /* some new state */ },则它可能不会重新呈现。我希望这能回答您的问题。

请下次仅查看React文档(State and Lifecycle