React 生命周期-16.4版本

最新推荐文章于 2025-03-22 17:15:14 发布

知否灬知否

最新推荐文章于 2025-03-22 17:15:14 发布

阅读量200

点赞数 3

CC 4.0 BY-SA版权

分类专栏： React 文章标签： react

本文链接：https://blog.youkuaiyun.com/weixin_51958206/article/details/111407877

React 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了React组件的生命周期，包括挂载、更新和销毁阶段。阐述了各个阶段涉及的钩子函数，如constructor、render、componentDidMount等的作用、执行时机和使用场景，还提及了一些优化性能的方法，如使用PureComponent和React.memo。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

挂载阶段：

constructor()
static getDerivedStateFromProps（）
render（）
componentDidMount（）

更新阶段：

static getDerivedStateFromPropscompo（）
shouidComponentUpdate(提升react性能。减少render的渲染次数)
根据外部传入的属性变化，或者根据内部状态的变化，最终如果返回true就会执行render,否则不会执行更新
getSnapshotBeforeUpdate（）
componentDidUpdate（）

销毁：

componentWillUnmount（）

生命周期

1 constructor(props)

做些初始化的动作
通过给 this.state 赋值对象来初始化内部 state。

  constructor(props) {
  super(props);
  this.state = {
     number:1
  };
}

为事件处理函数绑定实例

//如果不用箭头函数
hand(){
        console.log(this)
    }   
    //需添加要在
    constructor(){
          this.hand=this.hand.bind(this)
    }

constructor构造函数的做用？
  通过给 this.state 赋值对象来初始化内部 state。
  为事件处理函数绑定实例
  注意：内部不能调用setState方法，原因是以为真实dom结构都没有生成好！

2.static getDerivedStateFromProps(nextProps, prevState)

**
代替了
**~~UNSAFE_componentWillReceiveProps~~ ** 废弃了

1.这个钩子函数属于类的，需要定义的话，前面加static,内部的this是undfined
2.必须要定义组件的初始化状态
3.内部需要返回一个对象，指明要更改哪个状态。

该函数会在调用 render 方法之前调用，在组件实例化后，和接受新的props后被调用，并且在初始挂载及后续更新时都会被调用。它应返回一个对象来更新 state，如果返回 null 则不更新任何内容。

如果你的组件内部的某个状态想要由外部传入的属性进行关联控制的话，就用到它了。

3 render（）

render是react类组件生命周期中必不可少的钩子。
挂载阶段需要执行，目的就是将jsx代码编译好的虚拟dom渲染成真实dom结构

render钩子函数执行时机？
当调用forceUpdate/setState()/外部传入新的属性的时候

4 shouldComponentUpdate(nextProps, nextState)

当 props 或 state 发生变化时，shouldComponentUpdate() 会在渲染执行之前被调用。返回值默认为 true。首次渲染或使用 forceUpdate() 时不会调用该方法。
此方法仅作为性能优化的方式而存在
特点：

这个钩子函数内部可以根据返回true or false 。
ture 进入 render。
false 不进render。
可以过滤一些 for 循环减少执行次数，提高性能。

但是如果每个组件都写这个函数，太繁琐，所以推出 PureComponent 纯组件 ,纯组件有拥shouldComponentUpdate（）函数一样的功能

1.在类组件中可以使用纯组件来代替shouldComponentUpdate（）方法
export default class one extends PureComponent {}

2.在函数组件中使用 React.memo替代shouldComponentUpdate（）方法

export default React.memo(function(){})

5 getSnapshotBeforeUpdate（）

在react render()后的输出被渲染到DOM之前被调用。它使您的组件能够在它们被潜在更改之前捕获当前值（如滚动位置）。这个生命周期返回的任何值都将作为参数传递给componentDidUpdate（）
滚动条钩子 10滚动条钩子.note
此用法并不常见，但它可能出现在 UI 处理中，如需要以特殊方式处理滚动位置的聊天线程等。

6.componentDidUpdate(prevProps, prevState, snapshot)

在更新发生后立即调用componentDidUpdate()。此方法不用于初始渲染。
当组件更新时，将此作为一个机会来操作DOM。只要您将当前的props与以前的props进行比较（例如，如果props没有改变，则可能不需要网络请求），这也是做网络请求的好地方。
如果组件实现getSnapshotBeforeUpdate()生命周期，则它返回的值将作为第三个“快照”参数传递给componentDidUpdate()。否则，这个参数是undefined。

会在更新后会被立即调用。首次渲染不会执行此方法。比如用在轮播图
当组件更新后，可以在此处对 DOM 进行操作