React生命周期详解

Mounting / 挂载阶段

getDefaultProps->getInitialState->componentWillMount -> render ->componentDidMount

getDefaultProps 初始化props

• 在这里可以给组件预设默认的Props值，防止组件渲染报错

// 旧写法
getDefaultProps() {
  return {
    style: {}
  }
}
// ES6
static defaultProps = {
  style: {}
}

getInitialState 初始化state

// 旧写法
getInitialState() {
  return { visible: false }
}
// ES6
constructor(props) {
  super(props);
  this.state = { visible: false }
}
// 或直接在组件第一层写
class MyComponent extends React.Component {
  constructor() {}
  state = { visible: false }
  // ...
}

componentWillMount 准备挂载组件

• 在此处可以做一些组件准备动作

componentWillMout() {
  // 第一次挂载时不可见，就不挂载，避免默认不可见时也fadeOut
  if(this.state.visible) {
    this.render = this.renderBody
  }
}
renderBody() {
  return (<div className={this.state.visible ? 'fadeOut' : 'fadeIn'>延迟加载的文字</div>)
}
render() {
  return <div/>
}

render 渲染组件

render() {
  // 注意此处需要保证有且只有一个组件返回，如果实在不想渲染一个元素，可以返回<noscript>
  return <div/>
}

componentDidMount 组件挂载完毕

• 可以在此处执行与服务端的交互

componentDidMount() {
  // 只有不在挂载中或更新中状态的生命钩子才可以获取到this.refs
  console.log(this.layer);
}
render() {
  return <div ref={c=> this.layer = c}>哈哈</div>
}

Updating / 更新阶段

componentWillReceiveProps -> shouldComponentUpdate -> componentWillUpdate -> render -> componentDidUpdate

componentWillReceiveProps 组件将接收并更新Props

• 这个钩子可以在组件props发生变动时帮助我们执行一些相应操作，在这个钩子中可以执行setState更新状态

componentWillReceiveProps (nextProps) {
  if(this.props.index !== nextProps.index) {
    // 当外部传入的index发生变化时，组件执行一些操作...
  }
}

shouldComponentUpdate 组件是否应该更新

• 当整个应用update频繁时，可以通过这个钩子对本组件的更新进行控制，防止无用刷新，可提高性能

shouldComponentUpdate(nextProps, nextState) {
  // 根据state数据的时间戳来决定是否应该更新组件
  return this.state.timeStamp !== nextState.timeStamp
}

componentWillUpdate 准备更新组件

• 此处不应该setState，可能造成过渡更新

componentWillUpdate(nextProps, nextState) {
  if(this.props.childCount !== nextProps.childCount) {
    // childCount发生了变化，对应做出操作
  }
}

render 渲染（更新）组件

• 与Mounting阶段相似

componentDidUpdate 组件更新完毕

componentDidUpdate(prevProps, prevState) {
  
}

Unmounting / 卸载阶段

componentWillUnmount

componentWillUnmount 准备卸载组件

• 可以在此处对组件状态、store数据、定时器等等进行清除

componentDidMount() {
  // 组件挂载完毕之后开始执行定时器
  this.timer = window.setInterval(()=> {
    // 定时器执行的一些操作
  }, 300)
}
componentWillUnmount() {
  // 组件卸载时清除定时器，防止内存消耗
  window.clearInterval(this.timer);
}