React生命周期理解

React生命周期理解

1. 组件将要挂载时触发的函数：componentWillMount
2. 组件挂载完成时触发的函数：componentDidMount
3. 是否要更新数据时触发的函数：shouldComponentUpdate
4. 将要更新数据时触发的函数：componentWillUpdate
5. 数据更新完成时触发的函数：componentDidUpdate
6. 组件将要销毁时触发的函数：componentWillUnmount
7. 父组件中改变了props传值时触发的函数：componentWillReceiveProps

react的生命周期实际分为三个部分
> 1.实例化
> 2.存在期
> 3.销毁&清理期

一、实例化

（1）实例化是首次加载js展示给用户最直观的内容，效率的高低直接决定体验的好坏；
（2）实例化过程是对数据进行说明和描述的过程。
（3）实例化过程完成了虚拟DOM和真实DOM的生成。

a) 创建阶段

该阶段主要发生在创建组件类的时候，即调用React.createClass的时候。这个阶段只会触发一个getDefaultProps方法，该方法返回一个对象，并且缓存下来。然后与父组件指定的props对象合并，最后赋值给this.props作为该组件的默认属性。

对于那些没有被父辈组件指定的props属性的新建实例来说，这个方法返回的对象可用于为实例设置默认的props值。

props属性又是什么呢，它是一个对象，是组件用来接收外面传来的参数的，组件内部是不允许修改自己的props属性的，只能通过父组件来修改。在getDefaultProps方法中，是可以设定props默认值的。

b) 实例化阶段

该阶段主要发生在实例化组件类的时候，也就是该组件类被调用的时候：

调用顺序在demo结果中

1. getInitialState 初始化组件的state的值，其返回值会赋值给组件的this.state属性。对于组件的每个实例来说，这个方法的调用次数有且只有一次。与getDefaultProps方法不同的是，每次实例创建时该方法都会被调用一次。

2. componentWillMount 此方法会在完成首次渲染之前被调用。这也是在render方法调用前可以修改组件state的最后一次机会。

3. render 生成页面需要的虚拟DOM结构，用来表示组件的输出。
   render方法需要满足：
   （1）只能通过this.props和this.state访问数据；
   （2）可以返回null、false或者任何React组件；
   （3）只能出现一个顶级组件；
   （4）必需纯净，意味着不能改变组件的状态或者修改DOM的输出。

4. componentDidMount 该方法发生在render方法成功调用并且真实的DOM已经被渲染之后，在该函数内部可以通过this.getDOMNode()来获取当前组件的节点。然后就可以像Web开发中的那样操作里面的DOM元素了。

state和虚拟DOM
state：是组建的属性，主要用来存储组件自身需要的数据。它是可以改变的，它的每次改变都会引起组件的更新，这也是ReactJS中的关键点之一。每次数据的更新都是通过修改state属性的值，然后ReactJS内部会监听state属性的变化，一旦发生变化，就会主动出发组件的render方法来更新DOM结构。
虚拟DOM：它是ReactJS中提出的一个概念，是将真实的DOM结构映射成一个JSON数据结构，在有数据更改的时候更新真实的DOM，不需修改的时候不更新真实的DOM。
虚拟的DOM的核心思想是：对复杂的文档DOM结构，提供一种方便的工具，进行最小化地DOM操作

(1) 提供一种方便的工具，使得开发效率得到保证
(2) 保证最小化的DOM操作，使得执行效率得到保证

Velement

var vdom = velement('div', { 'id': 'container' }, [
velement('h1', { style: 'color:red' }, ['simple virtual dom']),
velement('p', ['hello world']),
velement('ul', [velement('li', ['item #1']), velement('li', ['item #2'])]),
]);

转化为JavaScript

<div id="container">
    <h1 style="color:red">simple virtual dom</h1>
    <p>hello world</p>
    <ul>
        <li>item #1</li>
        <li>item #2</li>
    </ul>   
</div>

对一个虚拟的DOM对象VElement，调用其原型的render方法，就可以产生一颗真实的DOM树。

二、存在期

此时组件已经渲染好并且用户可以与它进行交互，通常是通过一次鼠标点击、手指点按或者键盘事件来触发一个事件处理器。
随着用户改变了组件或者整个应用的state，便会有新的state流入组件结构树。
通过对buttle等按钮的事件绑定去实现第二阶段存在期的更新，该阶段在state状态发生改变，组件受到影响。

组件实例对象已经生成时，我们可以通过setState()来更新组件。setState机制后面会有单独文章分析，现在只用知道它会调用updateComponent()来完成更新即可

三、销毁&清理期

更新组件时，如果不满足DOM diff条件，会先unmountComponent, 然后再mountComponent。

1. 调用componentWillUnmount()
2. 递归调用unmountComponent(),销毁子组件
3. 将内部变量置空，防止内存泄漏

生命周期图如下：