我已经在打字稿中使用React编写了一个简单的treeview来渲染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

更新根的状态

渲染节点1

渲染节点1.0

渲染节点1.1

渲染节点2

整棵树被重新放置（进入虚拟DOM），而状态的值和子代的道具没有改变。

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