组件的生命周期

一共有四个声明周期init（初始化），mount（装载），update（更新），unmount（卸载）。只有更新可能会执行多次，其余都只执行1次。

init
getDefaultProps（生成默认属性）：在创建类的时候，React.createclass时指定。是一个共有的，所有的实例都会使用，是针对类而言的，只会调用一次。
getInitialState（初始化state）：ES6时在构造函数中指定。getInitialState针对具体的实例，每个实例生成时都会调用一次。

const Item = React.createClass({
  getDefaultProps () {
    console.log('getDefaultProps')
    return {
      'group': 'javascript'
    }
  },
  getInitialState () {
    console.log('getInitialState')
    return {
      'name': 'cc'
    }
  },
  render () {
    return <div>{this.state.name + this.props.group}</div>
  }

})
ReactDOM.render(
  <div>
    <Item />
  </div>, document.getElementById('root'))

图片.png

执行的先后顺序。当调用多个item时：

ReactDOM.render(
  <div>
    <Item />
    <Item />
    <Item />
  </div>, document.getElementById('root'))

图片.png

调用了一次getDefaultProps，三次getInitialState。

---

mount组件装载阶段：包含预加载、渲染和加载完毕三个周期，都只执行一次。预加载时dom未成形，不能操作dom。

class Item extends React.Component {
  constructor (props) {
    super(props)
    console.log('getInitialState')
    this.state = {
      'group': 'hello'
    }
  }
  static get defaultProps () {
    console.log('defaultProps')
    return {
      'name': 'cc'
    }
  }
  componentWillMount () {
    console.log('componentWillMount')
    this.state.name = 'cc'
  }
  componentDidMount () {
    console.log('componentDidMount')
  }
  render () {
    console.log('render')
    return <div>{this.state.group + this.props.name}</div>
  }
}

打印顺序如下图

图片.png

componentWillMount(预加载)，可以操作组件的state，不能操作DOM。
componentDidMount（加载完毕），这时可以操作DOM，也可以再此处引入一些外部交互，比如发送请求，与其他框架交互。
render(渲染)，初次渲染，没什么好说的。

---

Update：只在组件更新时会触发，初次加载时不会触发。
把上面的代码页面渲染部分封装为render方法：

const Item = React.createClass({
  getDefaultProps () {
    console.log('getDefaultProps')
    return {
      'group': 'javascript'
    }
  },
  getInitialState () {
    console.log('getInitialState')
    return {
      'name': 'cc'
    }
  },
  componentWillMount () {
    console.log('componentWillMount')
    this.state.name = 'cc'
  },
  componentDidMount () {
    console.log('componentDidMount')
  },
  render () {
    console.log('render')
    return <div>{this.state.group + this.props.name}</div>
  },
  componentWillUpdate (nextProps, nextState) {
    console.log('component will update')
  },
  componentDidUpdate (oldProps, oldState) {
    console.log('compontent did update')
  }
})

ReactDOM.render(
    <div>
      <Item />
    </div>, document.getElementById('root'))

图片.png

初次加载没有触发update，触发update有三种方式，外部渲染（如本例中演示），内部state变化，外部传入参数。当我们页面的render方法包装下。

function render () {
  ReactDOM.render(
    <div>
      <Item />
    </div>, document.getElementById('root'))
}
render()   //调用两次render
render()

图片.png

触发了update，而且每次还会自动调用render。

componentWillUpdate（nextProps，nextState）：组件预更新，接受两个参数，新的组件props和新的状态state；
为了防止组件频繁刷新，还有一个组件的更新验证方法shouldComponentUpdate，用于控制组件是否需要更新状态。

特殊方法： shouldComponentUpdate (nextProps, nextState) {
    return false//返回false，则组件不会被update
  }

图片.png

组件加入shouldComponentUpdate 后没有被update。

特殊方法：componentWillReceiveProps(nextProps)已加载组件收到新的参数时调用。componentWillReceiveProps()
当一个组件收到新的props时被调用。如果需要改变状态来响应props的改变可以先比较传入的props和当前的props，再在此方法内调用setState（）来改变state。React可能会调用这个方法，即使props没有改变，所以在处理变化时必须在方法内比较当前值和新的值props。这个可能会因为父元素的变化导致子元素重新渲染。在组件加载过程中不会调用此方法。只有传入新的props时才会调用，同样setState也不会触发此方法。（以上翻自react官网说明）。
unmount卸载阶段
componentWillUnmount

在组件被卸载和摧毁前被立即调用。清理应该放在这里。

比如说我在组件的加载时写了个setInterval定时器，在路由router跳转后，我们应该要clearInterval这个定时器，不然是很耗性能的，包括我们的全局事件绑定，都需要在这里取消。
.