React生命周期

React生命周期图

1. Initialization: 初始化阶段
2. Mounting: 挂载阶段
3. Updation: 更新阶段
4. Unmounting: 销毁阶段

什么是生命周期函数

• 生命周期函数指在某个时刻，会自动执行的函数，但是constructor不算生命周期函数，因为它是ES6的基本语法，是构造函数，虽然它和生命周期函数性质一样，但不能认为生命周期函数

生命周期函数

Initialization阶段

• constructor
  定义属性(props) 和 状态(state)

Mounting阶段

• componentWillMount
  组件将要挂载到页面的时刻

componentWillMount() {
  console.log('componentWillMount -- 组件将要挂载到页面');
}

• componentDidMount
  组件挂载完成的时刻

componentDidMount() {
  console.log('componentDidMount -- 组件挂载完成时');
}

• render
  组件挂载中

render() {
  console.log('render -- 组件挂载中')
}

控制台会打印出

componentWillMount -- 组件将要挂载到页面
render -- 组件挂载中
componentDidMount -- 组件挂载完成时

这是生命周期执行的顺序，与哪个函数写在前后，没有关系的

• 注意
  componentWillMount 和 componentDidMount 只在页面刷新时执行一次，render函数只要有state和props变化就会执行

Updation阶段

• shouldComponentUpdate
  在组件更新之前执行，它要求返回一个布尔值，必须要有返回值

shouldComponentUpdate() {
  console.log('shouldComponentUpdate -- 组件发生改变前执行')
  return true
}

在控制台打印出结果，并且组件每次更新都会执行，当return 返回 false 时，这时组件就不会更新了，shouldComponentUpdate 后都不会执行，总结：当返回true时，组件可以更新，false，组件不更新

• componentWillUpdate
  在组件更新之前，shouldComponentUpdate之后，如果前面shouldComponentUpdate返回 false 那么这个就不会被执行

componentWillUpdate() {
  console.log('componentWillUpdate -- 组件更新前，shouldComponentUpdate之后执行')
}

• componentDidUpdate

componentDidUpdate() {
  console.log('componentDidUpdate -- 组件更新之后执行')
}

控制台会打印出

shouldComponentUpdate -- 组件发生改变前执行
componentWillUpdate -- 组件更新前，shouldComponentUpdate之后执行
render -- 组件挂载中
componentDidUpdate -- 组件更新之后执行

• 难点 componentWillReceiveProps
• 组件第一次存在 Dom 中，函数不会被执行
• 如果已经存在 Dom 中，函数才会被执行

componentWillReceiveProps() {
  console.log('componentWillReceiveProps')
}

如果在顶层组件写入上述代码，会发现什么时候都不会执行它，因为顶层组件没有接收任何的 props，可以把这个函数移动到一个接收了 props 的子组件中，这时函数就可以被执行了

• 代码执行时间分析
  子组件先接收到父组件传递过来的参数，父组件render函数重新被执行，这个生命周期就会被执行。

Unmounting阶段

• componentWillUnmount
  存在这个函数的组件被删除的时候，就会调用这个函数

componentWillUnmount() {
  console.log('componentWillUnmount')
}

将这个函数写在子组件上，则当那个子组件被删除时就会触发函数打印 componentWillUnmount