ReactJS - parent 组件中 `setState` 的性能影响
ReactJS - Performance implication of `setState` in parent component
我正在使用 React 构建一个大型应用程序，其中共享 parent 组件处理多个 children 的所有状态。其中一些 children 呈现超过 1000 项的列表。
我意识到用 setState 切换 parent 中的布尔值将 re-render parent，然后再次渲染它的所有 children .
我的问题是，如果列表项中的 none 更改为 child，那么 re-render 是否会导致 child 循环并构建庞大的重新列出一遍——每次 parent re-renders?
虚拟DOM在这其中发挥了什么作用？ child re-build 是列表但 DOM 永远不必更新，因为 diff 发现列表元素没有改变吗？
编辑：
最后，如果是这样的话，key 属性 是如何影响列表 re-rendering 的？如果我有 1000 个项目都具有唯一键，但 3 个项目的键是 null，（意味着它们具有相同的键值） 然后 做整个列表 re-render?
Does the child re-build the list but the DOM never has to update because the diff sees that the list elements haven't changed?
是的。您可以在此处阅读更多详细信息：https://facebook.github.io/react/docs/reconciliation.html
通常这个操作快得你几乎看不出来，但是在某些时候差异补丁会变慢。翻转布尔值可能没什么大不了的，但以 60 fps 的速度翻转布尔值可能会导致一些卡顿。
通常可以采取一些明智的措施来防止任何明显的延迟，但实施 shouldComponentUpdate 始终是一种选择。
https://facebook.github.io/react/docs/react-component.html#shouldcomponentupdate
当你在那里的时候，阅读一下 React.PureComponent 以防你感兴趣。
我正在使用 React 构建一个大型应用程序，其中共享 parent 组件处理多个 children 的所有状态。其中一些 children 呈现超过 1000 项的列表。
我意识到用 setState 切换 parent 中的布尔值将 re-render parent，然后再次渲染它的所有 children .
我的问题是，如果列表项中的 none 更改为 child，那么 re-render 是否会导致 child 循环并构建庞大的重新列出一遍——每次 parent re-renders?
虚拟DOM在这其中发挥了什么作用？ child re-build 是列表但 DOM 永远不必更新，因为 diff 发现列表元素没有改变吗？
编辑：
最后，如果是这样的话，key 属性 是如何影响列表 re-rendering 的？如果我有 1000 个项目都具有唯一键，但 3 个项目的键是 null，（意味着它们具有相同的键值） 然后 做整个列表 re-render?
Does the child re-build the list but the DOM never has to update because the diff sees that the list elements haven't changed?
是的。您可以在此处阅读更多详细信息：https://facebook.github.io/react/docs/reconciliation.html
通常这个操作快得你几乎看不出来，但是在某些时候差异补丁会变慢。翻转布尔值可能没什么大不了的，但以 60 fps 的速度翻转布尔值可能会导致一些卡顿。
通常可以采取一些明智的措施来防止任何明显的延迟，但实施 shouldComponentUpdate 始终是一种选择。
https://facebook.github.io/react/docs/react-component.html#shouldcomponentupdate
当你在那里的时候，阅读一下 React.PureComponent 以防你感兴趣。