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

Question

我在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？

Answer 1

提高ReactJS渲染性能

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

防止反应将未更改的组件呈现到虚拟DOM中(就像你问的那样)

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

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

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

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

不对组件应用非更改

这意味着只有在新值与当前值不同时才更新 state或props.这种方法并不常见,但我觉得它值得一些优点.

状态:只有做到setState({ value: newValue }),如果newValue !== this.state.value.这可以通过多种方式实现,但一种方法是在执行之前实际进行检查setState().

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

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

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

使用全局应用程序状态的另一个好处是,您可以实现检查(在应用程序状态处理程序中),以确保您只更新应用程序状态的实际更改(即,如果它与以前相同,则不设置值).

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

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

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

选择战术

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

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