virtual-dom 和 shouldComponentUpdate

Question

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

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

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

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

2)如果virtualDOM每次只渲染未渲染的组件，为什么当父props改变时子组件会重新渲染？

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

Answer 1

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

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

2)如果virtual DOM每次只渲染还没有渲染的组件，为什么当父props改变时子组件会重新渲染？

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

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

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

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

Answer 2

我认为之前的回复没有解决所问的问题。我相信本质上，被问到的是：

虚拟 DOM 协调过程不会使 shouldComponentUpdate() 方法变得多余吗？

答案是否定的。

原因是当这个 reconciliation process 在树上的一个组件中发现差异时，出于差异算法的性能原因，它将 re-render 整个子树。

通过以下简单示例可以清楚地理解这一点：

class NothingChanges extends React.Component {
    render() {
        return <h3>Nothing changed here...</h3>;
    }
}

class Counter extends React.Component {
    state = { value: 0 };

    increment = () => {
        this.setState(
            prevState => ({ value: prevState.value + 1 })
        );
    };

    render() {
        return (
            <div>
                <h2 onClick={this.increment}>{this.state.value}</h2>
                <NothingChanges />
            </div>
        );
    }
}

虽然 NothingChanges 组件上没有任何变化，但每次父组件更改其状态时都会调用其渲染函数。

如果我们向它添加一个 shouldComponentUpdate() { return false; } 方法，我们将获得完全相同的视觉结果，但没有不必要的 re-render。

virtual-dom 和 shouldComponentUpdate

virtual-dom and shouldComponentUpdate

reactjs

virtual-dom