reactjs - 防止 React 将未更改的组件渲染到虚拟 DOM 中

Question

我用 typescript 编写了一个简单的 TreeView ，使用 React 来渲染 DOM。

每个节点都必须遵循简单的界面。

interface INode {
    label: string;
    children: INode[];
}

树的描述如下:

var tree = {
    label: "root",
    children: [
        {
            label: "node 1",
            children: [
                {
                    label: "node 1.0",
                    children: []
                },
                {
                    label: "node 1.1",
                    children: []
                }
            ]
        },
        {
            label: "node 2",
            children: []
        }
    ]
};

非常简单。现在的组件也非常简单。对于我有的节点:

class Node extends React.Component<INode, void>{
    render() {
        console.log(`Rendering ${this.props.label}`);
        var list = this.props.children.map((node, i) => <li key={i}><Node {...node}/></li>);
        return (
            <div>
                <span>{this.props.label}</span>
                {this.props.children.length > 0 ? <ul>{list}</ul> : ""}
            </div>
        );
    }
}

对于树的根，我使用状态而不是 Prop 。但1秒后我刷新了状态。但状态本身并没有改变:

class Root extends React.Component<void, INode>{
    constructor() {
        super();
        this.state = tree;
    }

    componentWillMount() {
        setTimeout(() => {
            this.setState((prevState: INode, props: void) => {
                console.log(`Updating state of ${this.state.label}`);
                return prevState;
            });
        }, 1000);
    }

    render() {
        var list = this.state.children.map((node, i) => <li key={i}><Node {...node} /></li>);
        return (
            <div>
                <span>{this.state.label}</span>
                {this.state.children.length > 0 ? <ul>{list}</ul> : ""}
            </div>
        );
    }
}

要运行此应用程序，只需以下几行代码:

ReactDOM.render(
    <Root/>,
    document.getElementById("app")
);

呈现的 html 看起来应该是这样。我现在的问题是当我查看浏览器控制台时看到

Rendering node 1

Rendering node 1.0

Rendering node 1.1

Rendering node 2

Updating state of root

Rendering node 1

Rendering node 1.0

Rendering node 1.1

Rendering node 2

整个树被重新渲染(进入虚拟 DOM)，而子节点的状态值和 props 没有改变。

假设渲染过程非常复杂且耗时。是否有可能停止将子元素重新渲染到虚拟 DOM 中？

Answer 1

提高ReactJS渲染性能

首先，除非您在应用程序中看到需要它，否则不要花时间在这上面。检查虚拟 DOM 是一个相当便宜的操作。但是，如果您需要优化您的应用，可以采取一些策略来实现这一目标。

防止React将未更改的组件渲染到虚拟DOM中(就像你问的那样)

有两种广泛的方法可以实现此目的:

• 不重新渲染将产生相同输出的组件
• 除非组件发生更改，否则不会将更改应用于组件

不重新渲染将产生相同输出的组件

您可以使用 shouldComponentUpdate 避免重新渲染。为了使shouldComponentUpdate更高效，您可以使用框架来确保只有不可变的对象处于状态，或者您可以简单地养成不改变对象而是创建新对象的习惯。请参阅React Immutability Helpers 。这将允许您在将 nextState 和 nextProps 与当前状态和 props 进行比较时进行浅层检查(可以使用 shallowCompare 轻松完成)。

不对组件应用非更改

这意味着如果新值与当前值不同，则仅更新状态或 Prop 。这种方法并不经常被提出，但我认为它值得一些优点。

State:仅在 newValue !== this.state.value 时才执行 setState({ value: newValue })。这可以通过多种方式实现，但一种方法是在执行 setState() 之前实际进行检查。

Props:如果 props 没有发生变化，通常是因为父组件持有一个值(在其状态下)，该值被传递给其其他子组件之一作为 Prop 。然后，父组件需要重新渲染自身及其所有子组件。如果您只想更改依赖于该值的组件，则可以让组件监听全局应用程序状态的一部分，并仅注入(inject)对该组件有用的内容。这样，该值将直接传递给对其感兴趣的组件，而不会重新渲染其他组件。

(在多个组件依赖相同数据的情况下，这消除了将状态存储在公共(public)父组件中的需要。除了提高效率之外，这通常还可以更轻松地创建依赖于某些部分的新组件现有应用程序状态。)

您可以使用例如维护全局应用程序状态 Flux , Redux或Baobab ，仅举几个选项。

使用全局应用状态的另一个优点是，您可以(在应用状态处理程序中)实现检查，以确保您只更新实际更改的应用状态(即不设置值)如果它和以前一样)。

更小的组件:减少每次更改时重新渲染的 DOM 元素数量

降低重新渲染成本的另一个策略是使组件更小。然后，每个数据更改仅适用于 DOM 的一小部分，因为每个组件要渲染的元素较少。

在我看来，您应该始终尝试这样做，因为除了性能方面之外，它还使您的代码更易于理解、可重用和可维护。

选择策略

每种策略都可以单独使用或结合使用，但是应用第一组中的两种策略通常不会比仅应用其中一种策略显示出显着的改进。

我建议从缩小组件开始，因为如上所述，这还会给您带来其他优势。