React是否在每次调用setState()
时重新渲染所有组件和子组件?
如果是,为什么?我以为这样的 idea 是,当状态改变时,React只提供所需的少量内容.
在下面的简单示例中,两个类在单击文本时都会再次呈现,尽管在随后的单击中状态不会改变,因为onClick处理程序总是将state
设置为相同的值:
this.setState({'test':'me'});
我本以为只有在state
个数据发生更改时才会进行渲染.
下面是示例as a 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>