State&生命周期
React中组件生命周期如下图：
从上图中也可以看出，组件在构造函数中有state，也就是状态。状态与属性十分相似，但是状态时私有的，完全受控于当前组件。需要使用类组件类添加这个状态的能力。
在具有多组件的应用程序中，在销毁时释放组件占用的资源非常重要。
每当组件第一次添加到DOM中的时候，会调用componentDidMount函数，我们称之为挂载。每当组件从DOM被移除的时候，会调用componentWillUnmount函数，我们称之为卸载。这些函数被称作生命周期钩子。
正确使用状态
在构造函数中，初始化state的时候，我们可以使用this.state = {} 的形式，对state进行初始化。但是在其他函数中来对state进行更新的时候，需要注意：
直接更新状态，代码不会重新渲染组件也就是如下写法是错误的：
this.state.comment = 'Hello';
应当调用setState()函数：
this.setState({comment:'Hello'});
虽然传入函数的是一个对象，但是React不会使用这个对象直接覆盖掉原来的state对象，而是将state中comment的值替换为字符串Hello，如果没有则创建。
状态更新可能是异步的
React可以将多个setState()调动合并成一个调用来提高性能，因为每调用一次，如果state的值发生改变，就要render渲染一次，如果多个setState()合并调用那就会只渲染一次。
需要知道的是this.props和this.state可能是异步更新的，所以不能依靠它们的值来计算下一个状态。比如如下代码可能无法更新计数器:
this.setState({
counter: this.state.counter + this.props.increment
});
可以使用setState()的第二种形式，即参数不是一个对象，而是一个函数。这个函数有两个参数：第一个是先前的状态，第二个是修改时使用的props对象：
this.setState((preState, props) => ({
countter: preState.counter + props.increment
}));
如上使用的是箭头函数，也可以使用常规函数：
this.setState(function(preState, props) {
return {
counter: preState.counter + props.increment
};
});
状态更新合并
如前文所说，setState()函数设置对象到state中时，是合并更新，不是覆盖更新。如下边的代码，两次调用对state中另外的字段是没有影响的。
state有如下两个属性：posts和comments：
constructor(props) {
super(props);
this.state = {
posts:[],
comments:[]
};
}
可以调用setState()单独更新posts和comments:
componentDidMount() {
fetchPosts().then(response => {
this.setState({
posts: response.posts
});
});
fetchPosts().then(response => {
this.setState({
comments: response.comments
});
});
}
这里的合并是浅合并，也就是说this.setState({comments})完全保留了this.state.posts,但完全替换了this.state.comments。
数据自顶向下流动
父组件或者子组件都不能知道其他组件是有状态还是无状态。并且也不应该关心其他组件是被定义为类组件还是函数组件。
也就是说状态除了拥有它的组件，其他组件是不可访问的。也是为什么状态被曾为局部或者封装。其实就是状态只在组件内部可见。
组件可以选择将其状态作为属性传递给其子组件：
<h1>it is {this.state.date.toLocaleTimeString()}</h1>
如上是针对标准的Html DOM标签所表示的组件或者元素，用户自定义组件也可以：
<FormattedDate date={this.state.date} />
那么例如对于函数组件FormattedDate而言：
function FormattedDate(props) {
return <h1> it is {props.date.toLocaleTimeString()} </h1>
}
FormattedDate组件并不知道其属性date是来自哪个组件，比如是来自Clock组件的状态还是来自Clock组件的属性，或者是来起手动输入呢？
这种数据传递的方式被称为自顶向下或者单项数据流。任何状态始终由某些特定组件所有，并且该状态导出的任何数据或者UI只能影响树中的下方的组件。
在React应用程序中，组件是有状态还是无状态被认为是可能随时间而变化的组件的实现细节。可以在有状态组件中使用负状态组件，反之亦然。
