技术

每日一问---React生命周期

React生命周期

React版本 16.13.1

生命周期

constructor(props)
componentWillMount()  ===> UNSAFE_componentWillMount()
render()
componentDidMount()

componentWillReceiveProps(nextProps) ===> UNSAFE_componentWillReceiveProps
shouldComponentUpdate(nextProps, nextState)
componentWillUpdate(nextProps, nextState) ===> UNSAFE_componentWillUpdate
componentDidUpdate(prevProps, prevState, snapshot)
componentWillUnmount()

componentDidCatch

新的生命周期函数

static getDerivedStateFromProps(nextProps, prevState)

static getDerivedStateFromError()

getSnapshotBeforeUpdate()

constructor(props)

在 React 组件挂载之前，会调用它的构造函数。在这里可以进行state的初
始化操作和为事件处理函数绑定实例

componentWillMount()

在挂载之前被调用。它在 render() 之前调用，因此在此方法中同步调用 setState() 不会触发额外渲染

此方法是服务端渲染唯一会调用的生命周期函数

React 16.3版本中引入UNSAFE_componentWillMount别名
React 16.X版本中采用componentWillMount()会产生警告警告
React 17.0版本删除 componentWillMount()

render()

render() 方法是 class 组件中唯一必须实现的方法。
通过createElement方法返回对应类型的react渲染数据对象

render() 函数应该为纯函数,不能够有副作用

componentDidMount()

在组件挂载后（插入 DOM 树中）立即调用，在此处可以进行一些AJXA、DOM获取、订阅等副作用的操作

componentWillReceiveProps(nextProps)

在已挂载的组件接收新的 props 之前被调用

在挂载过程中不会调用，在组件props改变时候才会触发，内部this.state的改变不会触发componentWillReceiveProps()

React 16.3版本中引入UNSAFE_componentWillReceiveProps别名
React 16.X版本中采用componentWillReceiveProps()会产生警告警告
React 17.0版本删除 componentWillReceiveProps()

shouldComponentUpdate(nextProps, nextState)

当 props 或 state 发生变化时，shouldComponentUpdate 会在渲染执行之前被调用。返回值默认为 true。首次渲染或使用 forceUpdate() 时不会调用该方法。

  • 根据 shouldComponentUpdate 的返回值，判断 React 组件的输出是否受当前 state 或 props 更改的影响。返回false则当下更改不会影响组件

  • 返回 false 并不会阻止子组件在 state 更改时重新渲染

  • 目前版本 如果 shouldComponentUpdate 返回 false，则不会调用UNSAFE_componentWillUpdate，render 和 componentDidUpdate

  • 在此中可以做是否渲染的优化操作

componentWillUpdate(nextProps, nextState)

当组件收到新的 props 或 state 时，会在渲染之前调用 componentWillUpdate。使用此作为在更新发生之前执行准备更新的机会。初始渲染不会调用此方法。

React 16.3版本中引入UNSAFE_componentWillUpdate别名
React 16.X版本中采用 componentWillUpdate() 会产生警告警告
React 17.0版本删除 componentWillUpdate()

componentDidUpdate(prevProps, prevState, snapshot)

在更新后会被立即调用。首次渲染不会执行此方法。

componentWillUnmount()

在组件卸载及销毁之前直接调用。在此方法中执行必要的清理操作，例如，清除 timer，取消网络请求或清除在 componentDidMount() 中创建的订阅等。

componentDidCatch(error, info)

此生命周期在后代组件抛出错误后被调用。

其接受两个参数

1.error 抛出的错误
2.info 带有 componentStack key 的对象，其中包含有关组件引发错误的栈信息。

getDerivedStateFromProps(props,state)

getDerivedStateFromProps 会在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。它应返回一个对象来更新 state，如果返回 null 则不更新任何内容。

static getDerivedStateFromProps(props, state)

此方法可看做componentWillMount和componentWillReceiveProps的结合，但是有一些区别

1.在此静态方法中无权访问组件实例

2.需要返回一个对象更新state

3.每次渲染前触发此方法，componentWillReceiveProps仅在父组件重新渲染触发

getSnapshotBeforeUpdate(prevProps,PrevState)

getSnapshotBeforeUpdate() 在最近一次渲染输出（提交到 DOM 节点）之前调用。它使得组件能在发生更改之前从 DOM中捕获一些信息（例如，滚动位置）。此生命周期的任何返回值将作为参数传递给 componentDidUpdate()。

getDerivedStateFromError(error)

此生命周期会在后代组件抛出错误后被调用。它将抛出的错误作为参数，并返回一个值以更新 state 

static getDerivedStateFromError(error) {
    // 更新 state 使下一次渲染可以显降级 UI
    return { hasError: true };
  }

生命周期执行流程

image

参考资料

生命周期执行流程
React-Component

Recommended Posts