如何在不重新启动整个组件的情况下仅更新组件中的一个元素

Question

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

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

Answer 1

默认情况下，如果您确定一个给定的组件始终将始终呈现相同的内容给定相同的props，则每次渲染父零件时，所有子节点也会呈现所有子节点然后，您可以将其转换为PureComponent，纯组件在Props中执行浅层比较obj1 === obj2，并且仅在发生更改时才能重新渲染。如果您需要更复杂的比较逻辑，则shouldComponentUpdate是GO的方法：

shoudComponentUpdate(prevProps, prevState){
    if(prevProps.items.length !== this.props.items.length) return true
    return false
}

默认情况下，此方法始终返回true，除非您明确地告诉它。shouldComponentUpdate的功能版本是React.memo。但是请记住，比较需要时间，并且进行比较所需的处理数量随复杂性而增长。仔细使用它。

Answer 2

我建议打破需要更新到自己的组件中并使用react.memo或purecomponent的作品。这也可能有帮助。

反应部分渲染