react 组件的生命周期

1. 组件的生命周期
1. 过程
1. 装载（Mounting） ：组件被插入到 DOM 中；
2. 更新（Updating） ：组件重新渲染以更新 DOM；
3. 卸载（Unmounting） ：组件从 DOM 中移除。
2. 过程
1. 包含 will 的方法在某个时间节点之前执行
2. 包含 did 方法在某个时间节点 之后 执行
3. 三个阶段（按调用顺序
1. 实例化(装载)

• 　　getDefaultProps(在任何实例创建之前执行，不在装载阶段执行
  1. 该方法在 组件创建时（ createClass ）执行一次并缓存返回值。
  2. 如果组件使用时未设置属性，就从缓存中读取默认属性。
  3. getDefaultProps() 返回的缓存数据会在所有实例间共享。
  1. getInitialState
  1. 组件装载之前执行一次，返回值用作 this.state 的初始值。
  2. constructor
  1. 构造器。
  2. super();//第一行必须是这个。调用父组件的构造器。
  3. this.state = {......};//初始化实例的属性和组件的状态。
  3. componentWillMount
  1. 在完成首次渲染之前被调用。
  4. render（必需
  1. 创建一个虚拟DOM
  2. 只能通过this.props和this.state访问数据
  3. 可以返回null,false或者react组件
  4. 只能有一个顶级组件
  5. componentDidMount
  1. 真实的DOM已经被渲染之后调用
  2. 可以访问原始DOM，如测量渲染出DOM元素的高度，或用计时器操作它
  3. 此方法中可进行
  1. 与其他 JavaScript 框架集成，如初始化 jQuery 插件；
  2. 使用 setTimeout / setInterval 设置定时器；
  3. 通过 Ajax/Fetch 获取数据；
  4. 绑定 DOM 事件；
• 存在期(更新)

1. componentWillReceiveProps（state改变时，不调用
1. 组件的props发生改变时才调用（任意时刻，组件的props都可以通过父辈组件来更改
2. 函数内可以更改props对象及更新state
3. 此时props并没有改变，通过this.prop获取到的仍是还没有更改的
2. shouldComponentUpdate
1. componentWillReceiveProps调用后调用
2. 首次渲染或调用了forceUpdate方法后不调用
3. componentWillUpdate
1. 组件会在接收到新的props或state进行渲染前，调用该方法
2. 该方法中不可以更新state或props
3. 此时props并没有改变，通过this.prop获取到的仍是还没有更改的
4. render
5. componentDidUpdate
1. 更新渲染好的DOM
2. 此处获取到的是改变后的props
• 销毁&清理期(卸载)
1. componentWillUnmount
2. 需要撤销componentDidMount中添加的所有任务，如：定时器、事件监听
• 反模式
1. 尝试在constructor中通过this.props来创建state是一种反模式
2. 从prop中计算然后将它赋值为state的做法也是一种反模式
3. 正确模式应该是在渲染时，计算这些值
4. 保证计算后的值永远不会与派生出它的props值不同步