React的生命周期

提到生命周期，我们首先想到的是从一个程序的产生到消亡，那么React的生命周期是什么样子的呢？

在知道React的生命周期之前，我们必须得弄明白React是什么？

是什么呢？其实它就是一个用于构建用户界面的JavaScript库。

那么问题又来了，为什么我们要使用React呢？这里就要谈谈它的特点了：

• 1.声明式设计 −React采用声明范式，可以轻松描述应用。

• 2.高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。

• 3.灵活 −React可以与已知的库或框架很好地配合。

• 4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。

• 5.组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。

• 6.单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。

简单的了解React之后，直接进入主题，组件的生命周期可分为三个状态：

1、Mounting：已插入真实 DOM

这个阶段表示当一个组件被实例化创建并且插入到DOM中。被调用的方法：

• constructor()  constructor参数接受两个参数props,context可以获取到父组件传下来的的props,context,如果你想在constructor构造函数内部（注意是内部，在组件其他地方是可以直接接收的）使用props或context，则需要传入，并传入super对象。
• static getDerivedStateFromProps() 我们之前的有些方法带有UNSAFE，官方建议的是使用getDerivedStateFromProps代替这些方法的使用。在每次渲染之前都会调用，不管造成重新渲染的原因，不管初始挂载还是后面的更新都会调用，这一点和UNSAFE_componentWillReceiveRrops不同（只有当父组件造成重新渲染时才调用），每次都应该返回一个对象作为static的更新，或者返回null表示不更新。
• componentWillMount/UNSAFE_componentWillMount() 在渲染前调用,在客户端也在服务端。
• render()  render函数会插入jsx生成的dom结构，react会生成一份虚拟dom树，在每一次组件更新时，在此react会通过其diff算法比较更新前后的新旧DOM树，比较以后，找到最小有差异的dom节点，并重新渲染。
• componentDidMount : 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异步操作阻塞UI)。

2、Updating：正在被重新渲染

当组件已经被插入到DOM中，渲染完毕后，props／state发生改变，即组件的状态发生了改变，此时组件会被重新渲染。在这个阶段，被调用的方法有：

• componentWillReceiveProps/UNSAFE_componentWillReceiveProps() 在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。
• static getDerivedStateFromProps()
• shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。可以在你确认不需要更新组件时使用。
• componentWillUpdate/UNSAFE_componentWillUpdate 在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
• render()
• getSnapshotBeforeUpdate() 在最新的渲染数据提交给DOM前会立即调用，它让你在组件的数据可能要改变之前获取他们，他的返回值会被传递给componentDidUpdate的第三个参数
• componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。

3、Unmounting：已移出真实 DOM

这个阶段意味着组件将要被移出DOM。在这个阶段，被调用的方法有：

• componentWillUnmount在组件从 DOM 中移除之前立刻被调用。

Error Handling

当在构造函数、生命周期函数或渲染的时候出现错误时，将会调用以下方法：

• 如果一个组件定义了componentDidCatch生命周期，则他将成为一个错误边界(错误边界会捕捉渲染期间、在生命周期方法中和在它们之下整棵树的构造函数中的错误，就像使用了try catch，不会将错误直接抛出了，保证应用的可用性)。