React组件生命周期 面试整理

  • Z时代
  • 2024-01-10
  • 分类：综合

react

React 组件生命周期

从事前端工作已经有一段时间，最近在面试求职者的时候发现，React最基础的实例生命周期都说不清楚，也不能说清楚每个生命周期方法具体作用，所以我通过代码+官网文档的形式总结下文。React生命周期可以说是react最基础的知识点，熟练掌握也可以更好的使用和优化react项目。

React 生命周期图谱（react16版本）

React 生命周期函数详细介绍

1.组件挂载过程

  1. constructor

  2. componentWillMount

  3. render

  4. componentDidMount

2.组件更新过程

  1. componentWillReceiveProps

  2. shouldComponentUpdate

  3. componentWillUpdate

  4. render

  5. componentDidUpdate

3.组件卸载

  1. componentWillUnmount

上面列举的都是react16之前的生命周期，在react16版本之后，新增了几个新的生命周期来替换之前可能会出问题的生命周期

  1. getDerivedStateFromProps

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

getDerivedStateFromProps 方法用来替换 componentWillMount 和 componentWillUpdate，而且新周期函数跟旧周期函数不能同时使用。

  1. getSnapshotBeforeUpdate

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

getSnapshotBeforeUpdate 方法用来替换 componentWillMount 、 componentWillReceiveProps、componentWillUpdate，而且新周期函数跟旧周期函数不能同时使用。

以上是 React组件生命周期 面试整理 的全部内容， 来源链接： utcz.com/z/381634.html

回到顶部