按新版本做对应更新
由于组件并不是真实的 DOM 节点，而是存在于内存之中的一种数据结构，叫做虚拟 DOM （virtual DOM）。只有当它插入文档以后，才会变成真实的 DOM 。有时需要从组件获取真实 DOM 的节点，这时要用到 ref 属性。
var Area = React.createClass({
render: function(){
this.getDOMNode(); //render调用时，组件未挂载，这里将报错
return <canvas ref='mainCanvas'>
},
componentDidMount: function(){
var canvas = this.refs.mainCanvas.getDOMNode();
//这是有效的，可以访问到 Canvas 节点
}
})一. 挂载组件阶段
**1. constructor **：构造函数，在此处可以设置state的初始值以及this的绑定
constructor()是在React 组件在挂载之前调用的方法，当创建的组件extends React.Component，在调用constructor()方法内必须先调用 super(props) 来调用基类的构造方法 constructor()， 也将父组件的props注入给子组件，供子组件读取(组件中props只读不可变，state可变)。
2. getDerivedStateFromProps： 获取到props并进行一个state的设置，在挂载和更新阶段的render之前都会执行（一个静态函数static）
static getDerivedStateFromProps(props, state) 在组件创建时和更新时的render方法之前调用，它应该返回一个对象来更新状态，或者返回null来不更新任何内容。
3. render： 对组件进行一个渲染的过程
**4. componentDidMount **：此时组件已挂载完成可以进行数据的加载了
二. 更新组件阶段
1. shouldComponentUpdate ： 在此阶段确认是否更新组件，也是react可以做优化的一个阶段
此方法返回布尔值控制组件是否重新渲染（基本不在开发中使用）
（当执行this.forceUpdate时，shouldComponentUpdate将不会被触发）
2. getDerivedStateFromProps： render之前执行
3. render
**4. getSnapShotBeforeUpdate **: 可以从这个钩子函数中获取到Shot ，搭配componentDidUpdate使用
getSnapshotBeforeUpdate() 被调用于render之后，可以读取但无法使用DOM的时候。它使您的组件可以在可能更改之前从DOM捕获一些信息（例如滚动位置）。此生命周期返回的任何值都将作为参数传递给componentDidUpdate（）。
**5. componentDidUpdate **: 在组件re-render之后调用，在此处访问并修改DOM。
三. 卸载组件阶段
1. componentDidUnMount： 在此阶段清除state以及注册的事件等。（当React使用完一个组件，此组件必须从 DOM 中卸载后被销毁，执行 componentWillUnmout 完成所有的清理和销毁工作）
四. 错误边界
1. getDerivedStateFromProps
2. componentDidCatch()
错误捕获
当我们为组件添加以上两个周期函数时，说明我们将当前组件设置为错误边界组件。将错误边界组件包裹在所有组件的最外层，可以在上述两个周期函数的参数中捕获到相应的错误。
仅能捕获到子组件中的前端错误。不能捕获到：
- 错误边界组件自身错误无法捕获
- 异步加载API出错无法捕获（后台错误）
- handle操作在挂载阶段不会执行无法捕获
