• react生命周期钩子函数


    在react中,对于每一次由状态改变导致视图改变的操作,都会经历两个阶段:render和commit阶段。

    只有在类组件中才有生命周期,因为类组件会创建对应的实例;而函数组件不会。

    生命周期:组件实例从被闯进啊到被销毁的过程成为组件的生命周期。

    由class组件创建的实例是具有生命周期的,它的render函数就在render阶段执行,并且内部的diff算法会自动计算哪个DOM发生变化进而去操作。在commit阶段将对应的DOM节点提交到视图上完成显示。

    render()阶段

    render阶段会执行很多钩子函数,例如:在首次渲染时执行constructor,getDerivedStateFromProps,componentWillMount,render

    在执行更新时:componentWillReceiveProps,shouldComponentUpdate,componentWillUpdate,render

    在渲染阶段如果捕捉到了组件中的错误,则会执行getDerivedStateFromError

    接下来说说每个调用时期与作用。

    constructor

    该方法只会调用一次,所以可以实现this的一次性绑定。

    在初始化阶段,可以This.state为状态赋值,也可以设置一些静态的数据。

    componentWillReceiveProps(旧的)

    如果组件接收到了新的props,则会第一时间触发这个函数。

    在首次渲染组件的时候不会调用此生命周期钩子函数;使用this.setState()也不会触发此生命周期钩子函数。

    但,如果是父组件渲染导致自组件的重新渲染,即使传给子组件的props没变,该组件中的这个生命周期函数也会被调用。

    我们一般不使用该函数。

    getDerivedStateFromProps(新的)

    它是一个静态方法,会接受props和state两个参数。他会在调用render方法之前被调用。无论是初始render还是gengxinrender都会触发它。

    像他的名字一样,可以从props中获取衍生的state。它的调用时机和 componentWillMount、componentWillUpdate、componentWillReceiveProps 一样都是在 render 方法被调用之前,它可以作为 componentWillMo

  • 相关阅读:
    【PHP】Workerman开源应用容器的GatewayWorker 与 iOS-OC对接
    (王道考研计算机网络)第五章传输层-第三节1-2:TCP协议特点和TCP报文段
    微服务:Eureka原理实践:@EnableEurekaServer、@LoadBalanced
    C++ 构造函数
    Flink Data Transformation
    MySQL8-主从搭建
    ChatGPT数据集之谜
    RapidSSL证书便宜吗?如何申请?
    Cesium中自定义材质material
    计算机毕业设计之java+springboot基于vue的校园志愿者管理系统
  • 原文地址:https://blog.csdn.net/pfourfire/article/details/127406271