如何只更新一个组件中的一个元素而不重新渲染整个组件?

时间:2019-07-05 18:33:30

标签: reactjs

我正在尝试优化应用程序的性能。我发现问题是我的一个组件在我设置的条件下重新渲染,并且其中包含大量数据。我想知道是否有可能不重新渲染整个组件,而仅重新渲染已更改的元素?

我已经尝试过使用PureComponent,但这对我来说没有足够的控制权。我目前正在使用shouldComponentUpdate。

2 个答案:

答案 0 :(得分:1)

默认情况下,每次重新渲染父组件时,默认情况下,所有子节点也将被渲染,如果您确定给定组件在使用相同道具的情况下始终会渲染相同内容,则可以将其变成{ {1}},纯组件在props中执行浅比较PureComponent,仅在发生更改时才重新渲染。如果您需要更复杂的比较逻辑,则可以使用obj1 === obj2

shouldComponentUpdate

默认情况下,此方法始终返回true,除非您明确告诉它不这样做。 shoudComponentUpdate(prevProps, prevState){ if(prevProps.items.length !== this.props.items.length) return true return false } 的功能版本为shouldComponentUpdate。但请记住,比较需要时间,并且执行比较所需的处理量会随着复杂性的增加而增加。小心使用。

答案 1 :(得分:0)

我建议将需要更新的部分分解为自己的组件,并像您所说的那样使用React.memo或PureComponent。这也可能有帮助。

React partial render