react生命周期

组件的生命周期分成了三个不同阶段 实例化期 存在期 销毁时期

主要过程
>1.实例化期: 从组件开始创建到生成真实的dom (第一次渲染)
>2.存在时期: 实例化之后和用户交互的这个时期 (组件状态或者属性发生变化)
>3.销毁时期: 组件从内存中被销毁 (用户关闭该组件或者组件被其他组件替换)

一、.实例化时期过程 从组件开始创建到生成真实的dom
>1.组件属性的默认值设置
Es7在组件内部使用 static defaultProps={ }
Es6在组件外定义 组件名.defaultProps={ }
>2.默认状态的设置 this.state()
>3.componentWillMount() 调用时机：实例化阶段 render()方法之前调用
作用：整个周期过程只调用一次，利用该方法可以做一初始化工作，是render()之前最后一次修改state的机会
>4.render() 将jsx代码解析成对应的虚拟dom，渲染成最终的效果
>5.componentDidMount() 调用时机：真实dom已经生成并且渲染
作用：在该函数中由于真实dom已经生成，所以可以直接操作真实dom;数据请求，前后台交互；通过ref属性去操作子组件的dom
componentDidMount(){
document.getElementById(“myname”).innerHTML=“哈哈哈” }
面试题：实例化阶段的前后台数据请求，为什么要放在componentDidMount中，而不放在componentWillMount中？
答案：如果使用SSR（服务端渲染），componentWillMount会执行2次，一次在服务端，一次在客户端。而componentDidMount不会。
React16之后采用了Fiber架构，只有componentDidMount声明周期函数是确定被执行一次的，类似ComponentWillMount的生命周期钩子都有可能执行多次，所以不在这些生命周期中进行有副作用的操作，比如请求数据之类。

二、存在期过程 实例化期之后和用户交互的这个时期
>1.componentWillReceiveProps ( newprops ) 执行时机：当props发生改变时触发
注意：一般会把接收的属性存入状态中
作用：该函数会接收到新的属性，在这个函数中可以根据新的属性来修改状态。
componentWillReceiveProps(newprops){
this.setState({name: newprops.aname}) }
>2.shouldComponentUpdate( newprops, newstate ) 执行时机：组件状态或者属性发生改变
作用：决定是否重新渲染组件，返回false则不渲染，返回true则渲染，是react性能优化非常重要的一环
使用情景之一：父组件更新会导致子组件同时重新渲染，当子组件中的状态没有发生改变，这时可以在子组件中添加该方法，比较前后两次状态，如果一致就阻止自身的重新渲染。
shouldComponentUpdate(newprops,newstate){
if(newprops.aname===“你好啊”){
return false } } // 阻止渲染
>3.componentWillUpdate() 执行时机：组件确定更新之后，并且在render之前
作用：执行更新前的操作，该方法中不能使用setState()
注意：如果使用setState()，状态改变则又会调用shouldComponentUpdate()，陷入循环。
>4.render()
>5.componentDidUpdate() 执行时机：更新被应用到dom之后
作用：可以访问更新之后的真实dom

三、销毁期过程 组件从内存中被销毁*
>1.ComponentWillUnmount()
作用：在组件被卸载之前，将一些全局的变量，对象以及定时器等可能造成内存泄漏的值，从内存中清除。
**

React16新的生命周期

1.Mounting 组件加载阶段
1>constructor(),可以用来初始化状态
2>getDerivedStateFromProps(props,state) 新增
代替了原来生命周期中componentWillMount(),该函数的作用就是返回一个新的状态
3>render()
4>componentDidMount() Updating

2.Unmounting 组件更新阶段
1>增加了getDerivedStateFromProps(props,state)
代替了原来的componentWillReceiveProps()
2>shouldComponentUpdate(newprops, newstate)
这里没有了componentWillUpdate()
3>render()
4>增加了getSnapshotBeforeUpdate()
5>componentDidUpdate()与原来相同
3.Unmounting 组件卸载阶段
1>componentWillUnmount() 与原来相同

新的生命周期和原来的生命周期区别？
新的生命周期使用getDerivedStateFromProps()代替了render之前的函数，主要是componentWillMount，componentWillReciveProps()，componentWillUpdate()
新增了一个componentDidCatch(error),当组件运行过程中如果抛出错误，该函数会接收错误并且触发
新增了getSnapshotBeforeUpdate()在render之后，在组件dom渲染之前
生命周期更新的主要原因？
在react v16版本中使用了async rendering，导致render函数之前的函数都有可能被执行多次，并且由于render采用异步的加载模式，如果在render之前的函数中使用ajax的话，在执行render的时候前面的请求还没有完成，造成无法渲染数据。所以使用了一个静态函数getDerivedStateFromProps取代render之前的函数，强制开发者在render之前只能做无副作用的操作。