React 基础篇（五）—— State与生命周期
State
程序之所以有灵魂是因为它具有状态，然而，在 React 中，通过 state 的变化来改变视图，从而让 UI 发生变化。组件的 state 是组件内部的状态，而且这个状态是组件私有的。在组件的 constructor 方法中，通过 this.state 定义组件的初始状态。状态改变的唯一途径就是 this.setState() 这个方法。
需要注意的是，通过函数定义的组件是没有状态的，所以通过函数定义的组件都是无状态组件。如果需要定义有状态组件，必须使用类的方式定义。
class Clock extends React.Component {
constructor(props) {
super(props);
//初始化状态
this.state = {
date: new Date()};
}
render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>It is {
this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
}
ReactDOM.render(
<Clock />,
document.getElementById('root')
);
生命周期
组件从创建到被销毁的过程就是组件的生命周期，React 为组件在不同的生命周期阶段提供不同的生命周期方法。生命周期大致可以分为三个阶段：挂载阶段、更新阶段、卸载阶段。
挂载阶段
在这个阶段组件被创建，执行初始化，并挂载到 DOM 中，完成组件的第一次渲染，依次调用的生命周期方法如下：
constroctorstatic getDerivedStateFromPropsrendercomponentDidMount
constroctor(props)
这个是 ES6 中一个类的构造方法，组件被创建时，首先会调用组件的构造方法。这个构造方法接收一个 props 参数，它是从父组件中传入的属性对象，如果父组件中没有传入属性而组件自身定义了默认属性，那么这个 props 指向的就是组件的默认属性。在构造方法中，必须显式的调用 super(props) 才能保证被传入组件中。
除此以外，还通常在这个方法中初始化组件的 state。
constructor(props) {
//在其他代码之前调用super(props)
super(props);
// 初始化状态
this.state = {
counter: 0 };
}
需要注意的是，该方法只适用于状态的初始化，而不是改变状态！！所以，不能在构造方法中调用 this.setState() 。
static getDerivedStateFromProps(props,state)
getDerivedStateFromProps 会在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。它应返回一个对象来更新 state，如果返回 null 则不更新任何内容。
该方法的适用场景是 state 的值在任何时候都取决于 props ，然而这些 state 也被称为派生 state。
派生状态会使代码冗余，并难以维护，通常情况下更应该使用替代方案来替代派生状态（具体示例参考后面的文章）。
render
该方法是所有生命周期方法中必须实现的方法。该方法的作用就如它的名字一样 —— 渲染。
当该方法被调用时，它会检查 this.props 和 this.state 的变化并返回以下类型之一：
React元素，通常由JSX创建。- 数组或者
fragments，使得可以返回多个元素。 Portals，可以渲染子节点到不同的子DOM树中。- 字符串或数值，被渲染为文本节点。
- 布尔类型或
null，什么都不渲染。
需要注意的是，不能在该方法中改变状态，因为改变状态会引起 render 方法的调用，然而这就会造成一个死循环了。
通常只是返回一个 React 元素，对于其他的方式在后面的文章再详细介绍。
componentDidMount
该方法会在组件被挂载到 DOM 后调用，且只会被调用一次。依赖于 DOM 节点的初始化行为都应该放在该方法中，比如网络请求。
在这个方法中调用 setState 改变状态会引起额外渲染，这个渲染会发生在浏览器更新屏幕之前，也就是说，render 被执行了两次，但是用户也不会看到中间的状态！！！
更新阶段
当组件的 props 或 state 发生变化时，组件就会更新。组件更新的生命周期方法调用顺序如下：
static getDerivedStateFromPropsshouldComponentUpdaterendergetSnapshotBeforeUpdatecomponentDidUpdate
shouldComponentUpdate(nextProps, nextState)
该方法用于决定是否让组件更新。该方法在 render 之前调用（首次渲染和 forceUpdate 不会调用该方法），默认情况下它返回布尔值 true 表示允许组件更新。该方法主要用于性能优化，而不要通过该方法来拒绝更新。
getSnapshotBeforeUpdate(prevProps, prevState)
getSnapshotBeforeUpdate 在最近一次渲染输出（提交到 DOM 节点）之前调用。它使得组件能在发生更改之前从 DOM 中捕获一些信息（例如，滚动位置）。此生命周期的任何返回值将作为参数传递给 componentDidUpdate。
componentDidUpdate(prevProps, prevState, snapshot)
该方法在组件更新后被调用，第三个参数就是上面的方法的返回值。
卸载阶段
这个阶段就是组件从 DOM 中被卸载的过程，这个过程只有一个生命周期方法：componentWillUnmount
该方法会在组件卸载及销毁之前直接调用。在此方法中执行必要的清理操作，例如，清除 timer，取消网络请求或清除在 componentDidMount 中创建的订阅等。
注意，不要在此修改状态状态，因为组件将不会被更新。