我正在使用React构建一个大型应用程序,其中共享父组件处理多个子组件的所有状态。这些孩子中的一些渲染超过1000个项目的列表。

我意识到,使用setState切换父级内部的布尔值将重新渲染父级,从而再次渲染其所有子级。

我的问题是,如果孩子的所有列表项都没有改变,那么重新渲染是否会导致孩子循环遍历并重新构建庞大列表-每次父母重新渲染?

虚拟DOM在其中扮演什么角色?子级是否会重新构建列表,但由于差异发现列表元素未更改,因此DOM从未更新过?

编辑:
最后,如果是这种情况,key属性如何影响列表的重新呈现?如果我有1000个项目都具有唯一键,但是3个项目的键都为null(表示它们具有相同的键值),那么整个列表是否会重新呈现?

最佳答案

子级是否会重新构建列表,但由于差异发现列表元素未更改,因此DOM从未更新过?


对,就是这样。您可以在这里详细了解以下内容:https://facebook.github.io/react/docs/reconciliation.html

通常,此操作是如此之快,几乎无法分辨,但是在某些时候,diff补丁会变慢。翻转布尔值可能没什么大不了,但是以60 fps的速度翻转布尔值可能会造成一些麻烦。

通常,您可以执行一些聪明的操作来防止任何明显的延迟,但是实现shouldComponentUpdate始终是一种选择。

https://facebook.github.io/react/docs/react-component.html#shouldcomponentupdate

当您在那里时,请阅读有关React.PureComponent的信息,以防您感兴趣。

10-07 19:51
查看更多