React中的生命周期

主要指的是继承React.Component创建出来的组件的生命周期
参考vue的生命周期做的笔记，react和vue的生命周期都差不多，有错的可以告诉我，我再改

1.生命周期的状态

1. created：组件被创建了
2. mounted：组件被挂载到DOM中了
3. updated：组件被挂载到浏览器上了
4. unmounted：组件被销毁了

2.生命周期中的钩子函数

1. componentWillMount()
   时机：组件被挂载到浏览器前，这时DOM树（html模板）已经创建完成（但没有渲染，这是DOM树中只有{}占位符）
   作用：此时可以访问this.state和方法，当DOM树创建完毕后，会触发这个函数
   对创建好的DOM树进行渲染，将数据或方法渲染上去

2. compontDidMount()
   时机：组件被挂载到浏览器后，这是DOM树已经创建完成
   作用：此时可以访问this.state和方法（那么以下的钩子函数都可以访问this.state和方法），当DOM树渲染完毕后，会触发这个函数
   将DOM树挂载到浏览器上

3. componentWillReceiveProps()
   时机：组件接收props数据前
   作用：在接收到props数据更新后触发

4. shouldComponentUpdate()
   时机：组件接收到新的state或props，判断是否更新
   作用：在新的state或props改变后，会触发这个函数，此时已经在内存中新建了一个虚拟DOM树，但访问的还是浏览器上的旧DOM树，只有return true才会将新建一个新的DOM树
   根据返回值判断是否将新的DOM树进行渲染

5. componentWillUpdate()
   时机：新的组件更新到浏览器前
   作用：在新的DOM树渲染完毕后，会触发这个函数
   对新的DOM树进行渲染

6. componentDidUpdate()
   时机：新的组件更新到浏览器后
   作用：新的DOM树已经挂载到浏览器上后，会触发这个函数，将新的DOM树挂载到浏览器上，这里可能用到diff算法
   将新的DOM树挂载到浏览器上

7. componentWillUnmount()
   时机：组件销毁前
   作用：在组件被销毁前会触发这个函数，
   做好被销毁的准备