React 生命周期阶段分析--武汉加油

借用知乎大神的图

第一阶段Initialization(初始化阶段)

import React, { Component } from 'react';

class Test extends Component {
  constructor(props) {
    super(props);
  }
}

第二阶段Mounting(挂载阶段)

四个钩子函数的执行顺序,以及参数

a.constructor(props,context)

b.getDerivedStateFromProps(props,state)

c.render

d.componentDidMount

第三阶段Updation(更新阶段)

a.shouldComponentUpdate(nextProps,nextState)

返回 true 就会执行render

返回 false 就会执行render

可以加条件减少不必要渲染,增加性能

PureComponent 进行浅比对,进行性能的优化(纯组件)

对无状态组件用 React.memo(组件)

我们把参数是组件返回值也是组件这类组件叫做HOC 即高阶组件其本质是高阶函数(map filter forEach ...)

b. getSnapshotBeforeUpdate(prevProps,prevState)

必须和componentDidUpdate一起用

必须返回一个值

不能喝旧版的钩子函数一起使用

目的是为了返回数据更新前的dom状态

任何返回值都将作为参数传递给componentDidUpdate()

c.componentDidUpdate(prevProps,prevState,snapshot)

第四阶段UnMounting(卸载阶段)

这个阶段的钩子函数只有一个

componentWillUnmount

ps:错误处理
1）static getDerivedStateFromError(): 在后代组件抛出错误后被调用，它将抛出的错误作为参数，并返回一个值以更新state
2）componentDidCatch() : react组件树出现错误时执行

来源：https://www.cnblogs.com/fahong/p/12359181.html

标签

React 生命周期 阶段分析--武汉加油