ReactJS--在调用“setstate”时是否调用render？

Question

React是否在每次调用setstate()时重新呈现所有组件和子组件？

如果是，为什么？我认为这个想法是，当状态改变时，只会根据需要提供少量的反应。

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>

Answer 1

React是否在每次调用setState时重新呈现所有组件和子组件？

默认情况下-是。

boolean有一个方法shouldComponentUpdate（object nextProps,object nextState）,每个组件都有这个方法,它负责确定“组件是否应该更新（运行呈现函数）？”每次更改状态或从父组件传递新道具时。

您可以为组件编写自己的shouldComponentUpdate方法实现，但默认实现总是返回真正意义上的always re-run render函数。

引用官方文档http://facebook.github.io/react/docs/component-specs.html#updating-shouldcomponentupdate

默认情况下，shouldComponentUpdate总是返回true，以防止在状态发生变化时出现细微的bug，但是如果您谨慎地始终将状态视为不可变的，并且从render（）中的props和state只读，那么您可以使用一个实现来覆盖shouldComponentUpdate，该实现将旧的props和state与它们的替换项进行比较。

问题的下一部分：

如果是，为什么？我认为这个想法是，当状态发生变化时，只在需要的时候做出很小的反应。

我们可以称之为“渲染”有两个步骤：

原生DOM呈现：React仅在虚拟DOM中更改真实DOM节点时才在浏览器中更改它们，并且只需更改少量--这是great React的特性，它优化了真实DOM的变化，使React更快。