位置: IT常识 - 正文

React生命周期详解(react生命周期分为两类)

编辑:rootadmin
React生命周期详解 前言

推荐整理分享React生命周期详解(react生命周期分为两类),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:react生命周期执行顺序,react生命周期分为两类,react的生命周期函数,react生命周期shouldcomponentupdate,react生命周期shouldcomponentupdate,react生命周期setstate,react生命周期分为两类,react生命周期执行顺序,内容如对您有帮助,希望把文章链接给更多的朋友!

        react生命周期在各个阶段的执行顺序是有所差异的,接下来我们将详细解析react在各个阶段生命周期的执行顺序,以及各个生命周期在组件中充当的作用(以下生命周期指的是react16之后的版本)

组件挂载时

当组件实例被创建并插入DOM时,其生命周期调用顺序如下:

constructor()static getDerivedStateFromProps()render()componentDidMount()组件更新时

当组件的props或state发生变化时会触发更新。组件更新的生命周期调用顺序如下:

static getDerivedStateFromProps()shouldComponentUpdate()render()getSnapshotBeforeUpdate()componentDidUpdate()组件卸载时

当组件从DOM中移除时会调用如下方法

componentWillUnmount()错误处理

当渲染过程,生命周期或子组件的构造函数中抛出错误时,会调用如下方法:

static getDerivedStateFromProps()componentDidCatch()常用生命周期1.render()

render()方法时class组件中唯一必须要实现的方法,当render被调用时,它会检查this.props和this.state的变化并返回下类型:

React元素:通常通过jsx创建。比如,<div />会被渲染为DOM节点,<MyComponent />会被React渲染成为自定义组件,武林是<div/>还是<MyComponent/>均为React元素。数组或fragments:使得render方法可以返回多个元素,想了解更加详细,参见fragments文档:Fragments – ReactPortals:可以渲染子节点到不同的DOM子树中,字符串或者数值类型:他们在DOM中会被渲染为文本节点布尔类型或null:什么都不渲染(主要用于支持返回test &&<Child />默认,其中test为布尔类型)

render()函数应该为纯函数,这意味着不在修改组件state情况下,每次调用时都返回相同的结果,并且它不会直接与浏览器交互。

如需与浏览器进行交互,请在componentDidMount()或者其他生命周期方法中执行你的操作,保持render()为纯函数,可以使组件更容易思考

注意:shouldComponentUpdate()返回false,则不会调用render()

 2.constructor()构造函数constructor(props)

如果不初始化state或不进行方法绑定,则不需要为React组件实现构造函数

在React组件挂在之前,会调用它的构造函数。在为React.Component子类实现构造函数时,应在其他语句之前调用super(props)。斗则,this.props在构造函数中可能会出现未定义的bug

通常,在React中,构造函数仅用于以下两种情况:

通过给this.state赋值对象来初始化内部state为事件处理函数绑定实例React生命周期详解(react生命周期分为两类)

在constructor()函数中不要调用setState()方法,如果你的组件需要使用内部state,请直接在构造函数中为this.state赋值初始化state:

constructor(props) { super(props); // 不要在这里调用 this.setState() this.state = { counter: 0 }; this.handleClick = this.handleClick.bind(this);}

只能在构造函数中直接为this.state赋值,如需要在其他方法中赋值,应该使用this.setState()替代

要避免在构造函数中引入任何副作用或订阅,如遇场景,请将对应的擦欧总放置在componentDidMount中

注意:避免将props的值复制给state!这是一个常见的错误:

constructor(props) { super(props); // 不要这样做 this.state = { color: props.color };}

如此做毫无必要(你可以直接使用this.props.color),同事还产生了bug(更新prop中的color时,并不影响state)

 3.componentDidMount()

componentDidMount()会在组件挂在(插入DOM树中)立即调用。依赖DOM节点的初始化应该放在这里。如需通过网络请求获取数据,此处实例化请求的好地方。

这个方法是比较适合添加订阅的方法,如果添加了订阅,请不要忘记在componentWillUnmount中进行取消

你可以在componentDidMount()里直接调用setState()。它将触发额外渲染,但此渲染会发生在浏览器更新屏幕之前。如此保证了即使在render()两次调用的情况下,用户也不会看到中间状态。

4.componentDidUpdate()componentDidUpdate(prevProps,prevState,snapshot)//prevProps表示之前的prop

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

当组件更新后,可以在此处对DOM进行操作。如果你对更新前后的prop进行了比较,也可以渲染在此处进行网络请求(例如,当props未发生变化时,则不会执行网络请求)

componentDidUpdate(prevProps){ //典型用法(不要忘记比较props) if(this.props.userId!==prevProps.userId){ this.fetchDate(this.props.userId) }}

如果组件实现了getSnapshotBeforeUpdate()生命周期(不常用),则它的返回值将作为componentDidUpdate()的第三个参数“snapshot”参数传递,否则此参数将为undefined。

注意:如果shouldComponentUpdate()返回值未false,则不会调用componentDidUpdate()

 5.componentWillUnmount()

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

componentWillUnmount() 中不应调用 setState(),因为该组件将永远不会重新渲染。组件实例卸载后,将永远不会再挂载它。

不常用的生命周期方法1.shouldComponentUpdate()shouldComponentUpdate(nextProps,nextState)

根据shouldComponentUpdate()的返回值,判断React组件的输出时否手当前state或props更改的影响,默认行为时state每次发生改变组件都会渲染,大部分情况下,你应该遵循默认行为。

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

此方法仅作为性能优化方式而存在,不要企图依靠此方法来阻止渲染,因为这可能会尝试bug。你应该考虑使用内置PrueComponent组件,而不是手动编写shouldComponentUpdate(),PureComponent会对props和state进行浅层比较,并减少跳过必要更新的可能性。

2.static getDerivedStateFromProps()3.getSnapshotBeforeUpdate()4.static getDerivedStateFromError()5.componentDidCatch()其他API

不同于上述

本文链接地址:https://www.jiuchutong.com/zhishi/299125.html 转载请保留说明!

上一篇:【前端修炼场】 — 这些标签你学会了么?快速拿下 “hr”(web前端修炼之道)

下一篇:浅析<router-view> v-slot事例(浅析中国式现代化的理论价值与现实意义)

  • 航信金税盘时间校准
  • 应纳税额减征额包括哪些内容
  • 建筑企业如何预交增值税
  • 如何查询企业税务状态
  • 收客户刷卡手续费时客户不愿意缴费,如何处理
  • 装修公司财务报销制度和流程
  • 临时工工资怎么申报个人所得税
  • 建筑设备租赁如何确定租赁期限
  • 新征用的耕地是什么意思
  • 发票领购簿遗失怎么办
  • 坏账已核销
  • 审计调整坏账后什么时候回冲分录?
  • 增值税发票可以抵税吗
  • 个人经济纠纷
  • 认证抵扣完的发票怎么处理
  • 公车保险费可以抵扣吗
  • 退回押金如果要退回吗
  • 固定资产折旧可以不留残值吗
  • 1697508991
  • 预存电费余额是什么意思
  • 非公党费返还
  • 发工资一定要交税吗
  • win 11操作系统
  • 收到现金支票如何进账
  • 银行收到退款怎么回复
  • 购买房屋用于出租算投资房吗
  • 收不回的应收账款分录
  • VS2022(Visual Studio)发布ASP.NET Core Web API应用到Web服务器(IIS)
  • 贷方跟借方哪个是收入哪个是支出
  • 核销固定资产时会计处理
  • 前端可以用jsp写吗
  • 2023华为OD机试题
  • jsp做登录界面
  • 外经证过期没核销罚多少钱
  • 汇算清缴补税的情况有哪些
  • 销售价格低于成本价,税务机关是否有权纳税调整?
  • 哪些人不要申报个税
  • 企业员工年终奖仲裁
  • 帝国cms到底好不好
  • 企业所得税成本费用一定要发票的吗
  • sql server 2005安装失败
  • 基建拨款在新政府会计制度对应什么科目
  • 流动资产损失计入营业外支出吗
  • 注册资本金收到之后可以转挂往来款吗
  • 购买银行理财产品安全吗
  • 免抵退不得抵扣税额什么意思
  • 劳务公司的成本有哪些
  • 商业购进商品运费怎么算
  • 专项存款可以放在什么科目
  • 仓库包材问题和造成的后果
  • 原材料 半成品
  • 两个公司之间怎么走账
  • 企业员工福利费可以做什么
  • 员工话费实报实销分录
  • 作废的现金支票可以直接碎掉吗
  • 跨年度费用如何计算
  • 收到赠送的东西,并给员工自用,怎么做账
  • 固定资产一次性扣除账务处理
  • 现金日记账的登记日期以什么日期为标准?
  • 长期应付款涉及哪些业务,应如何进行核算
  • 主营业务收入是什么意思
  • 加工企业三种商业模式
  • 最基本的长度单位是什么
  • sql查询方法有哪些
  • bios界面如何进入
  • windows临时文件在哪里
  • ubuntu切换登录用户
  • linux手动设置ip指令
  • windows视频截屏
  • 深入理解rcu
  • 简单谈谈对中国电信的认识
  • forfiles命令详解
  • css div模糊
  • socket pf_inet
  • 查看流量的命令
  • 用python定义一个函数
  • javascript面向对象 第三方类库
  • 人事科负责人是否必须是党员?
  • 江苏电子税务局网站官网下载
  • 青岛税务局局长是什么级别?
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设