我正在使用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
的信息,以防您感兴趣。