生命周期.md

目录

实力化 存在期 销毁&清理期 说明

实力化

• 首次实力化

1. getDefaultProps
2. getInitialState
3. componentWillMount
4. render
5. componentDidMount

• 实力化完成后的更新

1. getInitialState
2. componentWillMount
3. render
4. componentDidMount

存在期

• 组建已存在时的状态改变

1. componentWillReceiveProps
2. shouldComponentUpdate
3. componentWillUpdate
4. render
5. componentDidUpdate

销毁&清理期

• componentWillUnmount

说明

• 生命周期共提供了10个不同的api

1. getDefaultProps
   作用于组件类,只调用一次,返回对象用于设置默认的props,对于引用值，会在实例中共享

2. getInitialState
   作用于组件的实例，在实例创建时调用一次，用于处事话每个实例的state,此时可以访问this.props

3. componentWillMount
   在完成首次渲染之前调用，此时仍可以修改组件的state

4. render
   必选的方法，创建虚拟dom,该方法具有特殊的规则：

   只能通过this.props和this.state访问数据
   可以返回null,false或任何react组件
   只能出现一个顶级组件
   不能改变组件的状态
   不能修改dom的输出

5. componentDidMount

   真实的dom被渲染出来后调用,在该方法中可通过this.getDOMNode()访问到真实的dom元素。此时已可以使用其他类库来操作这个dom

   在服务端中，该方法不会被调用.

6. componentWillReceiveProps 组件接受到新的props时调用,并将其作为参数nextProps使用，此时可以更改组件props及state.

componentWillReceiveProps:function(nextProps){
  if(nextProps.bool){
    this.setState({
      bool:true
    })
  }
}

7. shouldComponentUpdate 组件是否应当渲染新的props或state,返回false表示跳过后续的生命周期方法，
   通常不要使用一面出现bug.在出现应用的瓶颈时，可以通过该方法进行适当的优化.

在首次渲染期间或者调用了forceUpdate方法后，该方法不会被调用

8. componentWillUpdate
   接受到新的props或者state后,进行渲染之前调用，此时不允许更新props或state.

9. componentDidUpdate
   完成渲染新的props或者state后调用，此时可以访问到新的dom元素

10. componentWillUnmount
    组件被移除之前被调用，可以用于做一些清理工作，在componentDidMount方法中添加的多有任务都需要在该方法中撤销，
    比如创建的定时器货添加的时间监听器。