位置: 编程技术 - 正文

十分钟带你快速了解React16新特性(怎么快速)

编辑:rootadmin

推荐整理分享十分钟带你快速了解React16新特性(怎么快速),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:十分钟带你快速学英语,怎么快速,怎样简单快速,怎么快速,快速一下,怎样简单快速,教你如何快速,如何才能快速的,内容如对您有帮助,希望把文章链接给更多的朋友!

前段时间React的版本发布了,采用了MIT开源许可证,新增了一些新的特性。

Error Boundary render方法新增返回类型 Portals 支持自定义DOM属性 setState传入null时不会再触发更新 更好的服务器端渲染 新的打包策略 ...

1. 使用Error Boundary处理错误组件

之前,一旦某个组件发生错误,整个组件树将会从根节点被unmount下来。React 修复了这一点,引入了Error Boundary的概念,中文译为“错误边界”,当某个组件发生错误时,我们可以通过Error Boundary捕获到错误并对错误做优雅处理,如使用Error Boundary提供的内容替代错误组件。Error Boundary可以看作是一种特殊的React组件,新增了componentDidCatch这个生命周期函数,它可以捕获自身及子树上的错误并对错误做优雅处理,包括上报错误日志、展示出错提示,而不是卸载整个组件树。(注:它并不能捕获runtime所有的错误,比如组件回调事件里的错误,可以把它想象成传统的try-catch语句)

我们可以在容易出错的组件外使用ErrorBoundary将它包裹起来,如下

如果Profile组件发生错误,将会使用ErrorBoundary提供的<div>Something went wrong</div>代替它,而不会引起整个组件树的卸载。

2. render方法新增返回类型

在React 中,render方法支持直接返回string,number,boolean,null,portal,以及fragments(带有key属性的数组),这可以在一定程度上减少页面的DOM层级。

以上各种类型现在均可以直接在render中返回,不需要再在外层包裹一层容器元素,不过在返回的数组类型中,需要在每个元素上加一个唯一且不变的key值,否则控制台会报一个warning。

3.使用createPortal将组件渲染到当前组件树之外

Portals机制提供了一种最直接的方式可以把一个子组件渲染到父组件渲染的DOM树之外。默认情况下,React组件树和DOM树是完全对应的,因此对于一些Modal,Overlay之类的组件,通常是将它们放在顶层,但逻辑上它们可能只是属于某个子组件,不利于组件的代码组织。通过使用createPortal,我们可以将组件渲染到我们想要的任意DOM节点中,但该组件依然处在React的父组件之内。带来的一个特性就是,在子组件产生的event依然可以被React父组件捕获,但在DOM结构中,它却不是你的父组件。对于组件组织,代码切割来说,这是一个很好的属性。

使用方式如下:

十分钟带你快速了解React16新特性(怎么快速)

效果如图:

4.支持自定义DOM属性

在之前的版本中,React会忽略无法识别的HTML和SVG属性,自定义属性只能通过data-*形式添加,现在它会把这些属性直接传递给DOM(这个改动让React可以去掉属性白名单,从而减少了文件大小),不过有些写法仍然是无效的。如DOM传递的自定义属性是函数类型或event handler时,依然会被React忽略。

现在class和tabindex等属性可以被传递给DOM,但依然会报一个Warning,建议使用标准的驼峰式className,tabIndex等。

5.setState传入null时不会再触发更新

比如在一个选择城市的函数中,当点击某个城市时,newValue的值可能发生改变,也可能是点击了原来的城市,值没有变化,返回null则可以直接避免触发更新,不会引起重复渲染,不需要在shouldComponentUpdate函数里面去判断。

注意:现在setState回调(第二个参数)会在componentDidMount/componentDidUpdate后立即触发,而不是等到所有组件渲染完成之后。

6.更好的服务器端渲染

React 的SSR被完全重写,新的实现非常快,接近3倍性能于React ,现在提供一种流模式streaming,可以更快地把渲染的字节发送到客户端。另外,React 在hydrating(注:指在客户端基于服务器返回的HTML再次重新渲染)方面也表现的更好,React 不再要求客户端的初始渲染完全和服务器返回的渲染结果一致,而是尽量重用已经存在的DOM元素。不会再有checksum(标记验证)!并对不一致发出警告。一般来说,在服务器和客户端渲染不同的内容是不建议的,但这样做在某些情况下也是有用的(比如,生成timestamp)。

7.新的打包策略

新的打包策略中去掉了process.env检查。

React 的体积比上个版本减小了%(% post-gzip),文件尺寸的减小一部分要归功于打包方法的改变。

写在最后,React 采用了新的核心架构React Fiber。官方解释是“React Fiber是对核心算法的一次重新实现”,后续再深入学习。

标签: 怎么快速

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

上一篇:JS实现移动端整屏滑动的实例代码(js移动端布局)

下一篇:微信小程序实现多宫格抽奖活动(微信小程序实现轮播图)

  • 购进货物支付的运输费用如何计算增值税
  • 买一赠一的税务处理
  • 支付的各项税费现金流量表怎么填
  • 物流辅助服务属于什么费用
  • 税金及附加和应交税费的关系
  • 个人股权转让需要注意什么
  • 发生销售退回如何开票
  • 税金及附加怎么计提
  • 收到某公司发票会计分录
  • 建安企业销售收入如何确认
  • 收到发票多开税额进项转出是怎样的?
  • 退税勾选后如何开红字
  • 公司有出账没有进账怎么办
  • 自然人出租房屋房产税
  • 广告公司认定一般多少钱
  • 收入与应收款
  • 异地缴纳附加税怎么申报
  • 土地交易服务费分录
  • 苹果助手hi
  • 主营业务成本是借方增加还是贷方增加
  • 住房公积金扣除标准为每月
  • 企业减免税款的会计分录
  • 政府补助收入的开支怎么做账
  • 借款成坏账了怎么处理
  • 开启资源管理器自动刷新功能
  • 不确认收入的是
  • 戈佐西餐厅
  • 损益类账户的期末余额一般在借方还是贷方
  • Uni-app + Vue3 + TS +Vite 创建项目
  • 购置固定资产用什么凭证
  • 金税盘锁死会电子发票也开不了吗
  • 企业的研发支出
  • 公司未实缴能破产吗
  • 员工多了怎么管理办法
  • 员工出差的费用计入什么科目
  • 应交税费月末要结平
  • 单位制造费用是什么科目
  • 发票说明格式
  • access 运行sql
  • 什么是认缴出资金额
  • 销售返利可以税前扣除吗
  • 企业哪些行为是违法的
  • 发票抵扣联可以作为凭证吗
  • 跨年度冲收入,冲成本分录如何做?
  • 0税率出口退税
  • 预收冲应收怎么做账
  • 财务报表分析的主体是
  • 折旧和摊销的概念
  • a公司刚刚执行了一个采购项目
  • 明细账建账的步骤
  • 中小企业会计建议和意见
  • 明细账设置是什么意思
  • mysql必知必会和sql基础教程
  • Linux下mysql5.6.33安装配置教程
  • windows自带软件有哪些
  • win10屏幕显示
  • ubuntu20.04怎么安装
  • freebsd软件安装
  • Win10虚拟内存怎么转移
  • 永恒之塔客户端是32位
  • ubuntu和windows文件互传
  • win7系统加内存条怎么设置
  • win8怎么设置用户头像
  • win7系统怎么打日语
  • backtracker
  • react native community
  • js闭包的应用
  • 修改cmdline
  • Python装饰器基础详解
  • bootstrapping怎么做
  • express后端
  • 中国一年的税收是多少万亿
  • 什么是跨地区经营汇总纳税企业
  • 上海国家税务局官网发票查验平台
  • 献完青春献终身 献完终身献子孙 关系户
  • 地税是地方税吗
  • 船舶吨税多少天缴纳一次
  • 微观经济学的十大原理
  • 众筹在中国的发展潜力
  • 车船使用税减免法律规定
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设