防止将未更改的组件呈现到虚拟DOM中

时间：2016-03-14 14:13:09

标签： reactjs

我在typescript中编写了一个简单的树视图，使用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>
        );
    }
}

并且对于树的根我使用状态而不是道具。但是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看起来应该如此。我现在的问题是当我看到我看到的浏览器控制台时

  

渲染节点1

     

渲染节点1.0

     

渲染节点1.1

     

渲染节点2

     

更新root的状态

     

渲染节点1

     

渲染节点1.0

     

渲染节点1.1

     

渲染节点2

整个树被重新渲染（进入虚拟DOM），而状态的值和孩子的道具没有变化。

假设渲染过程非常复杂且耗时。是否有可能停止将儿童重新纳入虚拟DOM？

1 个答案:

答案 0 :(得分：8)

提高ReactJS渲染性能

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

防止反应将未更改的组件呈现到虚拟DOM中（就像您要求的那样）

这样做有两种广泛的方法：

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

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

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

未对组件应用非更改

这意味着如果新值与当前值不同，则仅更新状态或道具。这种方法并不常见，但我觉得它值得一些优点。

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

道具：如果非改变来自道具，那通常是因为父组件持有一个值（在其状态下）传递给其中一个其他子项作为道具。然后，父组件需要重新呈现自己及其所有子项。如果您只希望更改依赖于值的组件，则可以让组件侦听全局应用程序状态的一部分，并仅注入对该组件有用的内容。这样，该值将直接传递给对其感兴趣的组件，并且不会重新呈现其他组件。

（在多个组件依赖相同数据的情况下，这消除了将状态存储在公共父组件中的需要。除了提高效率之外，这通常使创建依赖于某些部分的新组件变得更容易现有应用程序状态。）

您可以使用以下方式维护全局应用状态： Flux，Redux或Baobab，列举了几个选项。

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

较小的组件：减少每次更改重新呈现的DOM元素数量

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

在我看来，你应该总是尝试这样做，因为除了性能方面，它还使你的代码更容易理解，可重用和可维护。

选择战术

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

我建议从缩小组件开始，因为如上所述，这也为您提供了其他优势。

相关问题
最新问题