探索问题:

  1. React生命周期有哪些,各自在什么阶段触发
  2. 哪些阶段可以使用重新设置状态,例如使用setState

生命周期

React的生命周期可以分为四个阶段:初始化(initialization),挂载(mounting),更新(updating),销毁(unmounting)

初始化(initialization)

getDefaultProps

如果没有传递props, 会使用getDefaultProps返回的对象

getInitialState

初始化state,在ES6中可以直接使用

1
2
3
4
5
6
7
8
9
10
11
12
class Input extend Component {
constructor(props) {
super(props);
this.state = {
txt: ''
}
}
// 或者直接赋值
state = {
txt: ''
}
}

挂载(mounting)

componentWillUpdate

render之前执行,可以处理一下业务逻辑相关的操作

render

首次渲染到DOM中

componentDidMount

render之后执行,此时可以获取dom元素,可以初始化一些dom操作相关

更新(updating)

componentWillReceiveProps

如果父级组件传递下来的props发生变化时,会被触发

componentWillUpdate

可以通过返回值来决定是否需要重新渲染改组件,可以用于做一些性能优化

render

组件state或者props发生变化时,重新渲染组件

componentDidUpdate

组件状态已经更新到dom上,此时可以执行一些dom相关的操作

销毁(unmounting)

componentWillUnmount

组件从dom中销毁时会触发,用于执行一些清理

重设状态

一般state用于描述组件的状态,而prop表示父级组件传递下来的属性,所以重新设置状态可以分为两种情况:

  1. 改变组件自身的state
  2. 改变父级组件的state, 即相当于改变prop

这两种情况都会触发组件的重新渲染,但有些阶段却不允许改变状态,因为会使组件无限渲染

参考

  1. ReactJS 生命周期、数据流与事件
  2. React component’s lifecycle
Contents
  1. 1. 生命周期
    1. 1.1. 初始化(initialization)
      1. 1.1.1. getDefaultProps
      2. 1.1.2. getInitialState
    2. 1.2. 挂载(mounting)
      1. 1.2.1. componentWillUpdate
      2. 1.2.2. render
      3. 1.2.3. componentDidMount
    3. 1.3. 更新(updating)
      1. 1.3.1. componentWillReceiveProps
      2. 1.3.2. componentWillUpdate
      3. 1.3.3. render
      4. 1.3.4. componentDidUpdate
    4. 1.4. 销毁(unmounting)
      1. 1.4.1. componentWillUnmount
  2. 2. 重设状态
  3. 3. 参考