React学习总结3--生命周期函数

每个组件都包含“生命周期方法”。速查表。 demos源码

挂载

当组件实例被创建并插入 DOM 中时，其生命周期调用顺序如下：

• constructor()
• static getDerivedStateFromProps()
  会在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。它应返回一个对象来更新 state，如果返回 null 则不更新任何内容。此方法无权访问组件实例
• render()
• componentDidMount()
  挂载结束调用，通常在此进行数据请求。

如果上层组件中有Component组件以及PureComponent组件，那么打印出生命周期的调用结果为：

这里使用了PureComponent，它会在shouldComponentUpdate中对 props 和 state 进行浅层比较，并减少了跳过必要更新的可能性。可以通过update过程来验证。

更新

当组件的 props 或 state 发生变化时会触发更新。组件更新的生命周期调用顺序如下：

• static getDerivedStateFromProps()

• shouldComponentUpdate()

• render()

• getSnapshotBeforeUpdate()

• componentDidUpdate()
  如果点击执行setState更新，打印结果如下：

  getDerivedStateFromProps
  shouldComponentUpdate
  render
  -sub getDerivedStateFromProps
  -sub render
  ------com getDerivedStateFromProps
  ------com render
  ---puresub getDerivedStateFromProps
  getSnapshotBeforeUpdate
  ------com componentDidUpdate
  -sub componentDidUpdate
  componentDidUpdate

可以发现PureComponent并没有重新render,这是因为shouldcomponentupdate返回了false。我们可以多使用PureComponent来减少不必要的渲染过程，进而优化性能。

卸载

当组件从 DOM 中移除时会调用如下方法：

• componentWillUnmount()

错误处理

当渲染过程，生命周期，或子组件的构造函数中抛出错误时，会调用如下方法：

• static getDerivedStateFromError()
• componentDidCatch()

可以使用setState的生命周期

• componentWillMount
• componentDidMount
• componentDidUpdate
  这里必须要有前置条件，否则会陷入update的死循环。

static getDerivedStateFromProps(props, state)

这个生命周期适用于 state 的值在任何时候都取决于 props。让组件在 props 变化时更新 state。