ReactJS - 在调用“setState”的任何时候都会调用render吗？

Question

ReactJS - 在调用“setState”的任何时候都会调用render吗？

React是否每次都会重新渲染所有组件和子组件setState？

如果是这样，为什么？我认为这个想法是React只在需要的时候渲染 - 当状态改变时。

在下面的简单示例中，两个类在单击文本时再次呈现，尽管状态在后续单击时不会更改，因为onClick处理程序始终将其state设置为相同的值：

this.setState({'test':'me'});

我希望渲染只会在state数据发生变化时发生。

以下是该示例的代码，作为JS Fiddle和嵌入式代码段：

var TimeInChild = React.createClass({
    render: function() {
        var t = new Date().getTime();

        return (
            <p>Time in child:{t}</p>
        );
    }});var Main = React.createClass({
    onTest: function() {
        this.setState({'test':'me'});
    },

    render: function() {
        var currentTime = new Date().getTime();

        return (
            <div onClick={this.onTest}>
            <p>Time in main:{currentTime}</p>
            <p>Click me to update time</p>
            <TimeInChild/>
            </div>
        );
    }});ReactDOM.render(<Main/>, document.body);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react-dom.min.js"></script>

[1]: http://jsfiddle.net/fp2tncmb/2/




Answer 1

不，当状态发生变化时，React不会渲染所有内容。每当组件变脏（其状态发生变化）时，该组件及其子组件将被重新呈现。在某种程度上，这是尽可能少地重新渲染。没有调用render的唯一时间是将某个分支移动到另一个根，理论上我们不需要重新渲染任何东西。在您的示例中，TimeInChild是子组件Main，因此在Main更改状态时也会重新呈现。React不会比较状态数据。当setState被调用时，它标志着成分为脏（这意味着它需要被重新呈现）。需要注意的重要一点是，尽管render调用了组件的方法，但只有当输出与当前DOM树（也就是虚拟DOM树和文档的DOM树之间的差异）不同时，才会更新真正的DOM。在您的示例中，即使state数据没有更改，上次更改的时间也会发生，使Virtual DOM与文档的DOM不同，因此更新了HTML的原因。