React组件生命周期流程与调用顺序及setState在生命周期中的使用注意事项

React组件在挂载到真实DOM之前会以JavaScript变量的形式经历一系列的生命周期，该变量跟真实DOM树形结构一样。最终渲染到到真实DOM上。

React组件分为有状态组件和无状态组件，无状态组件本质上就是一个函数，它没有this对象，没有state，没有生命周期等特性，不能使用ref引用。有状态组件即一个类，必须继承于React.Component，有状态组件拥有继承父类this对象，自己的state及生命周期，唯一必须调用的方法既render()方法并返回一段DOM。

有状态组件从挂在到卸载经历一下生命周期：

constructor() {
    super() // 必须在定义在内部state之前
}           // super指代父类实例，调用super继承父类的this对象

UNSAFE_componentWillMount(){}    //组件即将加载componentWillMount在16.3.0被弃用但目前前依然可用，以下UNSAFE_开头的均同理
render(){}                //组件被渲染
componentDidMount(){}     //组件已加载

UNSAFE_componentWillReceiveProps(nextProps){}            // 组件将要从父组件获得props
shouldComponentUpdate(nextProps, nextState){}     // 是否确认重新渲染组件
render() {}               // 重新渲染组件
UNSAFE_componentWillUpdate(){}   // 组件将要更新
componentDidUpdate(){}    // 组价被更新

componentWillUnmount(){}  // 组件将要卸载

上实