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

Question

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

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

Answer 1

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

shouldComponentUpdate

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

Answer 2

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

React partial render