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的原因。