• react的生命周期钩子函数


    首先我们先来掌握基本单词
    掌握单词后会更好理解和记住生命周期:
    constructor ------构造函数
    component ------组件
    will ------将要
    get ------得到
    default ------默认值
    initial ------最初的
    unsafe ------不安全的
    static ------静态的
    derived ------衍生的
    should ------应该
    update ------更新
    unmount ------取消挂载
    receive ------收到

    总体分为三个阶段:
    1.组件挂载

    (1)constructor

    可以理解为组件的第一个生命周期,一般会在这里初始化组件的内部状态(state),如果在这里面要使用this则必须在super()之后,如果在这里面需要使用props,那么需要把props作为参数传入。
    在使用React.createClass()这种方式创建组件的时期,会有俩个生命周期:
    getDefaultProps()
    设置默认的props,也可以用defaultProps设置组件的默认属性。
    //直接使用static defaultProps = {}这种方式来创建
    getInitialState()
    在使用es6的class语法时是没有这个钩子函数的,可以直接在constructor中定义this.state。此时可以访问this.props
    // 现在这个已经直接在constructor里使用this.state = {}这种方式来创建

    (2)componentWillMount ------------ 17版本即将废除

    组件将要挂载,这个生命周期基本上没有什么用,而且react*17版本之后废弃。
    如果还想继续使用,可以使用UNSAFE_componentWillMount来代替。
    这个生命周期,是除了初始化之外,唯一一个能够直接同步修改state的地方。

    (3)static getDerivedStateFromProps

    设置了这个生命周期就不能设置componentWillMount()
    这是react16.3之后新增的一个生命周期,这是一个静态方法,静态方法没有this所以不能使用setState,需要return一个对象,这个对象就相当于setState里面的参数。
    常用于强制性的根据props来设置state

    (4)render

    react最重要的步骤,创建虚拟dom,进行diff算法,更新dom树都在此进行。此时就不能更改state了。
    这里是合成虚拟DOM,可以理解为,在这里实际上都还没有真实的dom。

    (5)componentDidMount ajax请求生成DOM**********

    渲染真实的DOM浏览器,在这里才可以得到DOM。这个生命周期就是相当重要的一个生命周期,ajax请求一般都在这里进行。

    2.组建更新

    分为俩种情况,state改变和props改变
    如果state改变,会直接进行到组件更新的第二个shouldComponentUpdate,如果是props改变,会先走componentWillReceiveProps。

    (1)componentWillReceiveProps -----17版本即将废除

    16.4之前,由于在更新阶段,没有static getDeriveStateFromProps这个生命周期,如果有根据props来生成的state,就需要在这里重新设置一次。因为之前是在constructor里面根据props来初始化的state,constructor只会执行一次,所以要在componentWillReceiveProps来修正state。在新的版本里,static getDerivedStateFromProps这个生命周期不管是在装载还是更新的时候都会触发。因此,componentWillReceiveProps也只会工作到react17.

    (2)shouldComponentUpdate 性能优化*

    这个生命周期用于react的性能优化,接收俩个参数(nextProps,nextState)通常会根据这俩个参数和this.state,this.props来进行diff算法对比,根据比较的结果来return true或者false,如果return的是false,将不会再执行后面的生命周期。

    (3)componentWillUpdate -----17版本即将废除

    没什么卵用

    (4)render

    和mount阶段一样,生成虚拟DOM

    (5)componentDidUpdate

    同componentDidMount。

    3.组件销毁

    (1)componentWillUnmount

    组件将要销毁,这里一般可以用来清理定时器,解绑某些事件。

  • 相关阅读:
    关于共享安全的几个命令
    从句语法
    WampServer 在 httpd.conf 中配置多站点 (IP 配置法:不用每次修改 hosts 文件 + 域名配置法 )
    Java实现蓝桥杯 算法训练 大等于n的最小完全平方数
    Java实现蓝桥杯 算法训练 大等于n的最小完全平方数
    Java实现蓝桥杯 算法训练 大等于n的最小完全平方数
    Java实现 蓝桥杯 算法训练 1的个数
    Java实现 蓝桥杯 算法训练 1的个数
    Java实现 蓝桥杯 算法训练 1的个数
    谷歌面试题之扔鸡蛋的问题(蓝桥杯摔手机的问题)
  • 原文地址:https://www.cnblogs.com/du-jun/p/12470207.html
Copyright © 2020-2023  润新知