React是否在每次调用setState()时重新渲染所有组件和子组件?
如果有，为什么?我认为React的想法是只渲染需要的部分-当状态改变时。
在下面这个简单的例子中，当文本被点击时，这两个类都会再次呈现，尽管在随后的点击中状态不会改变，因为onClick处理程序总是将状态设置为相同的值:
this.setState({'test':'me'});
我本以为只有在状态数据发生变化时才会发生渲染。
下面是这个例子的代码，作为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>
React是否在每次调用setState时重新渲染所有组件和子组件?
默认情况下是。
有一个方法布尔shouldComponentUpdate(对象nextProps，对象nextState)，每个组件都有这个方法，它负责确定每次你改变状态或从父组件传递新道具时“组件是否应该更新(运行渲染函数)?”
你可以为你的组件编写自己的shouldComponentUpdate方法实现，但是默认实现总是返回true——这意味着总是重新运行渲染函数。
引用自官方文档http://facebook.github.io/react/docs/component-specs.html#updating-shouldcomponentupdate
默认情况下，shouldComponentUpdate总是返回true来防止
细微的bug发生时状态是突变的，但如果小心的话
始终将状态视为不可变的，并且从props和state到只读
在render()中，您可以使用
实现，将旧的道具和状态与其进行比较
更换。
你问题的下一部分:
如果有，为什么?我认为React只在需要的时候渲染一点点——当状态改变的时候。
我们称之为“渲染”的有两个步骤:
Virtual DOM renders: when render method is called it returns a new virtual dom structure of the component. As I mentioned before, this render method is called always when you call setState(), because shouldComponentUpdate always returns true by default. So, by default, there is no optimization here in React.
Native DOM renders: React changes real DOM nodes in your browser only if they were changed in the Virtual DOM and as little as needed - this is that great React's feature which optimizes real DOM mutation and makes React fast.
“丢失更新”的另一个原因可能是:
如果定义了静态getDerivedStateFromProps，则根据官方文档https://reactjs.org/docs/react-component.html#updating在每次更新过程中重新运行它。
如果状态值来自一开始的道具，它会在每次更新中被覆盖。
如果是这个问题，你可以避免在更新过程中设置状态，你应该像这样检查状态参数值
static getDerivedStateFromProps(props: TimeCorrectionProps, state: TimeCorrectionState): TimeCorrectionState {
return state ? state : {disable: false, timeCorrection: props.timeCorrection};
}
另一种解决方案是向state添加一个初始化的属性，并在第一时间设置它(如果状态被初始化为非空值)。
尽管在这里的许多其他答案中都有说明，但组件应该:
实现shouldComponentUpdate，只在状态或属性改变时才呈现
切换到扩展一个PureComponent，它已经在内部实现了一个shouldComponentUpdate方法来进行浅比较。
下面是一个使用shouldComponentUpdate的示例，它只适用于这个简单的用例和演示目的。使用此选项时，组件不再在每次单击时重新呈现自身，而是在第一次显示时和单击一次后呈现。
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'});
},
shouldComponentUpdate: function(nextProps, nextState) {
if (this.state == null)
return true;
if (this.state.test == nextState.test)
return false;
return true;
},
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>
