ShouldComponentUpdate 和 Virtual DOM 做出反应答案

【问题标题】：ShouldComponentUpdate and Virtual DOM reactShouldComponentUpdate 和 Virtual DOM 做出反应
【发布时间】：2019-10-20 09:15:37
【问题描述】：

当使用 setState() 调用更新组件时，React 如何为组件创建新的虚拟 DOM，即使 shouldComponentUpdate() 返回 false？

react 是否会再次为所有组件创建虚拟 DOM，即使是未调用 setState() 的组件？我的意思是假设在子组件上调用setState()，是否也会为父组件反应一个新的虚拟DOM？

【问题讨论】：

这里有 2 个不同的阶段，您可能会感到困惑。有渲染阶段和更新阶段。渲染阶段并不总是导致和更新。 projects.wojtekmaj.pl/react-lifecycle-methods-diagram

【解决方案1】：

即使 shouldComponentUpdate 返回 false，react 也会创建虚拟 dom 吗？

不，它没有。如果 shouldComponentUpdate 返回 false，则该特定组件及其子组件的重新渲染不会完成。

react 是否会为所有组件再次创建虚拟 dom，即使对于未调用 setstate 的组件也是如此。

它将为状态或道具已更改的那些组件（及其子组件）创建。但这并不一定意味着会发生实际的 DOM 更新。同样如上所述，如果这些组件中的任何一个从 shouldComponentUpdate 返回 false，则该组件及其子树的重新渲染将停止。

我的意思是假设 setstate 在子组件上被调用，也会对父组件做出新的虚拟 d 反应

没有。父母导致孩子重新渲染，而不是相反。 React 只会重新渲染那个子树。不是它的根源。

也就是说，重新渲染（虚拟 DOM 创建）并不总是意味着 DOM 更改。如果子树之前的虚拟 DOM 和新的虚拟 DOM 相同，则实际的 DOM 保持不变。

React 在他们的docs 中使用了一个非常清晰简洁的示例来解释这一点。

【讨论】：

由于 react 总是在每次 setstate 调用时创建新的虚拟 dom，如果某个组件的 ShouldComponentUpdate 函数返回 false，则意味着它的渲染函数不会被调用，因为它没有返回任何东西或者它的渲染函数是未调用，特定 dom 节点处的新虚拟 dom 包含什么，据我了解，虚拟 dom 是使用组件的渲染函数返回的 JavaScript 对象创建
当 shouldComponentUpdate 返回 false 时，React 将忽略虚拟 DOM 差异，并保持实际 DOM 与以前一样。这意味着该组件不会发生任何变化。这将是它之前的样子。是的，你是对的。虚拟 DOM 具有该组件的 JS 表示。它是一个树结构，包含组件的子组件，可以是其他组件或 DOM 元素。
是的，它会忽略虚拟 dom 差异，但它是否会为该组件创建新的虚拟 dom，如果是的话，它将从哪里获取新的 JavaScript 对象，因为未调用渲染函数，因为 ShouldComponentUpdate 已返回 false
我的意思是当有 setstate 调用时反应创建新的虚拟 dom，然后它在两个虚拟 dom 之间做差异，然后它将应用实际 dom 的更改，但是如果组件返回 false，react 将如何创建新的该组件的虚拟 dom
不会。如果组件返回 false，则不创建虚拟 DOM，不进行比较，不会更改实际 DOM。旧的实际 DOM 将保持原样。