reactjs - 虚拟 dom 和 shouldComponentUpdate

Question

如果我是对的，ReactJS 中的 Virtual DOM 将之前的 DOM 与当前 DOM 进行比较，即在状态树发生变化后形成。那么为什么当父 props 发生变化时子组件会重新渲染。

如果虚拟 DOM 只渲染尚未渲染的 DOM，我为什么要使用 shouldComponentUpdate() 方法。

我看过很多关于这方面的视频，但我没有得到他们行为的确切方式。如果有人能清楚地解释以下疑惑，将不胜感激。

1)virtual DOM每次只渲染还没有渲染的组件还是会出现异常？

2)如果虚拟 DOM 每次只渲染尚未渲染的组件，为什么当父 props 发生变化时子组件会重新渲染？

3)什么时候应该使用shouldComponentUpdate()？

Answer 1

1)virtual DOM每次只渲染还没有渲染的组件还是会出现异常？

虚拟 DOM 是 HTML DOM 的抽象。由于 DOM 本身已经是一个抽象，因此虚拟 DOM 实际上是一个抽象的抽象。虚拟 DOM 所做的是，它不是渲染整个页面，而是只渲染发生变化的组件。可能已经存在所有组件，但如果一个组件发生更改，它只会重新呈现该组件。

2) 如果虚拟 DOM 每次只渲染尚未渲染的组件，为什么当父 props 发生变化时子组件会重新渲染？

当父 props 发生变化时，子组件会重新渲染，因为 props 已传递给子组件，并且它们会根据这些 props 进行行为。如上所述，只要有变化，组件就会重新渲染。

3) 我什么时候应该使用 shouldComponentUpdate()？

shouldComponentUpdate() 用于优化重新渲染。该方法返回 true 或 false。您希望组件如何呈现和重新呈现取决于您。它主要用于性能增强。可能存在您不希望组件在状态更改时重新呈现的情况，因此您使用此方法。例如:

shouldComponentUpdate(nextProps, nextState) {
  if(this.props.abc !== nextProps.abc) {
    // anything you want to do and return true or false accordingly
  }
}