react 生命周期

react 生命周期

概述

挂载:

  • constructor()
  • static getDerivedStateFromProps()
  • render()
  • componentDidMount()

更新:

  • static getDerivedStateFromProps()
  • shouldComponentUpdate()
  • render()
  • getSnapshotBeforeUpdate()
  • componentDidUpdate()

卸载:

  • componentWillUnmout()

错误处理:

  • static getDerivedStateFromError()
  • componentDidCatch()

删除

  • componentWillMount
  • componentWillReceiveProps
  • componentWillUpdate

增加

  • static getDerivedStateFromProps
  • getSnapshotBeforeUpdate

render()

  • 是class组件中唯一必须实现的方法
  • 应该为纯函数
  • 如果shouldComponentUpdate()返回false,则不会调用render()

返回值

  • React元素,通常通过 JSX 创建
  • 数组或者fragments,但数组不能包含对象(不过一般也不会单纯返回数组和对象,基本很少用到)
  • Portals
  • 字符串或数值类型,会被渲染成文本节点
  • 布尔值或null,什么都不渲染

constructor()

  • 会在首次挂载前执行
  • 组件的构造函数,在其内部需要调用super(props)
  • 不要在里面调用setState()方法
  • 避免在构造函数中引入任何副作用或订阅

componentDidMount()

  • 会在组件挂载后(插入 DOM 树中)立即调用
  • 在这里调用setState()会触发额外渲染,但这渲染会发生在浏览器更新屏幕之前,所以即使调用了两次render(),但是只会发生一次屏幕更新

componentDidUpdate(prevProps, prevState, snapshot)

  • 在屏幕更新后调用

componentWillUnmount()

  • 会在组件卸载及销毁之前直接调用

shouldComponentUpdate(nextProps, nextState)

  • 在render()之前调用
  • 首次渲染或使用 forceUpdate() 时不会调用该方法。
  • 返回 false 并不会阻止子组件的正常行为,比如说渲染

static getDerivedStateFromProps(nextProps, prevState)

getDerivedStateFromProps 存在只为了一个目的。它让组件在 props 发生改变时更新它自身的内部 state

用法

static getDerivedStateFromProps(nextProps, prevState) {
  const {type} = nextProps;
  // 当传入的type发生变化的时候,更新state
  if (type !== prevState.type) {
      return {
        type,
      };
  }
  // 否则,对于state不进行任何操作
  return null;
}

getSnapshotBeforeUpdate(prevProps, prevState)

  • 在最近一次渲染输出(提交到 DOM 节点)之前调用,界面还没有更新,一般用作UI处理
  • 此生命周期的任何返回值将作为参数传递给 componentDidUpdate()。
class Child extends Component {
  constructor(props) {
    super(props)
    this.state = {
      type: props.type,
      height: 250
    }
    this.listRef = createRef();
  }
  getSnapshotBeforeUpdate() {
    console.log(this.listRef.current.scrollHeight, 666)
    return null
  }
  componentDidUpdate() {
    console.log(this.listRef.current.scrollHeight, 777)
  }
  change = () => {
    this.setState({
      height: 500
    })
  }
  render() {
    console.log(this.state)
    return 
{this.state.height}
} }

static getDerivedStateFromError(error)

  • 此生命周期会在后代组件抛出错误后被调用
  • 它将抛出的错误作为参数,并返回一个值以更新 state
  • 在渲染阶段调用,不允许出现副作用

componentDidCatch(error, info)

  • 此生命周期在后代组件抛出错误后被调用
  • 在“提交”阶段被调用,因此允许执行副作用。 它应该用于记录错误之类的情况

你可能感兴趣的