React16 新特性
一、使用Error Boundary处理错误组件
React16之后:引入新的错误处理机制——Error Boundary【错误边界】,当某个组件发生错误时,可以通过Error Biundary提供的内容代替组件的错误。
class ErrorBoundary extends Component {
constructor(props) {
super(props)
this.state = {
hasError: false
}
}
componentDidCatch(err, info) {
this.setState({ hasError: true })
}
render() {
if (this.state.hasError) {
return <div>Something went wrong!</div>
}
return this.props.children
}
} export { ErrorBoundary }
Error Boundary可以看作是一种特殊的React组件,新增了componentDidCatch这个生命周期函数,它可以捕获自身及子树上错误并对错误做优雅处理【⚠️:它并不能捕获runtime所有的错误,比如组件回调事件里的错误】
二、render方法返回新增数据类型
React16之前:必须返回单个元素
React16之后:支持2种新的返回类型【数组、字符串】
render(){
return [
<div>hello</div>,
<div>world</div>
]
}
render(){
return 'hello,world'
}
三、使用createProtal 将组件渲染到当前组件树之外
【典型应用场景】渲染应用的全局弹窗,任意组件都可以将弹框组件渲染到跟节点上。
通过使用createProtal可以将组件渲染到我们想要的任意DOM节点中,但该组件依然处在React的父组件之内。
render(){
//child——可以被渲染的react节点
//container——一个Dom元素,child将被挂载到这个DOM上
return ReactDOM.createPortal(child,container)
}
四、自定义DOM属性
React16之前:忽略无法识别的HTML和SVG属性,属性只能通过data-*形式添加
React16之后:把不会识别的属性传递给DOM
五、setState传入null时不会再触发更新
更新state时,如果值没有变化,返回null可以直接避免触发更新,不会引起重复渲染
setName(name){
this.setState((state)=>{
if(state.name ===name){
return null
}
return {name}
})
}
React16 新特性的更多相关文章
- React16新特性
React的16版本采用了MIT开源许可证,新增了一些特性. Error Boundary render方法新增返回类型 Portals 支持自定义DOM属性 setState传入null时不会再触发 ...
- 🍓 react16.2新特性 🍓
react16.2新特性:组件中可以一次性return 多个子元素(子组件)了,也就是说,想return多个子元素,不用在外面包一个父盒子了. 方法一:把要return的元素放在一个空的jsx里面 方 ...
- React16版本的新特性
React16版本更新的新特性 2018年05月03日 21:27:56 阅读数:188 1.render方法的返回值类型:New render return types 之前的方式: class A ...
- [译文]React v16(新特性)
[译文]React v16(新特性) 查看原文内容 我们很高兴的宣布React v16.0发布了! 这个版本有很多长期被使用者期待的功能,包括: fragments (返回片段类型) error bo ...
- react 16.8版本新特性以及对react开发的影响
Facebook团队对社区上的MVC框架都不太满意的情况下,开发了一套开源的前端框架react,于2013年发布第一个版本. react最开始倡导函数式编程,使用function以及内部方法React ...
- SQL Server 2014 新特性——内存数据库
SQL Server 2014 新特性——内存数据库 目录 SQL Server 2014 新特性——内存数据库 简介: 设计目的和原因: 专业名词 In-Memory OLTP不同之处 内存优化表 ...
- ElasticSearch 5学习(10)——结构化查询(包括新特性)
之前我们所有的查询都属于命令行查询,但是不利于复杂的查询,而且一般在项目开发中不使用命令行查询方式,只有在调试测试时使用简单命令行查询,但是,如果想要善用搜索,我们必须使用请求体查询(request ...
- [干货来袭]C#6.0新特性
微软昨天发布了新的VS 2015 ..随之而来的还有很多很多东西... .NET新版本 ASP.NET新版本...等等..太多..实在没消化.. 分享一下也是昨天发布的新的C#6.0的部分新特性吧.. ...
- CSS3新特性应用之结构与布局
一.自适应内部元素 利用width的新特性min-content实现 width新特性值介绍: fill-available,自动填充盒子模型中剩余的宽度,包含margin.padding.borde ...
随机推荐
- Linux 内核 编译模块
背景: 由于调试内核或者由于分区大小限制,有时候内核组件不一定完全需要编进内核中. 所以,在开发中经常将内核组件编译成为模块,等到在恰当的时机加载. 概览: Linux内核模块的编译方法有两种: 1. ...
- zabbix监控memcached服务
zabbix监控memcached服务 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.安装并配置memcached服务 1>.使用yum方式安装memcached [ro ...
- P1066 图像过滤
P1066 图像过滤 转跳点:
- HiBench成长笔记——(10) 分析源码execute_with_log.py
#!/usr/bin/env python2 # Licensed to the Apache Software Foundation (ASF) under one or more # contri ...
- 彻底理解JavaScript中的this
this 是 JavaScript 语言的一个关键字. 它是函数运行时,在函数体内自动生成的一个对象,只能在函数体内使用. 函数的不同使用场合,this 有不同的值.总的来说,this 就是函数运行时 ...
- 洛谷P1000 超级玛丽游戏(洛谷新手村1-1-1)
题目背景 本题是洛谷的试机题目,可以帮助了解洛谷的使用. 建议完成本题目后继续尝试P1001.P1008. 题目描述 超级玛丽是一个非常经典的游戏.请你用字符画的形式输出超级玛丽中的一个场景. *** ...
- POJ 3090 欧拉函数
求一个平面内可见的点,其实就是坐标互质即可,很容易看出来或者证明 所以求对应的欧拉函数即可 #include <iostream> #include <cstdio> #inc ...
- Google的搜索API的Delphi封装
这个东西实现了已经有一段时间了,那个时候谷歌还没有退出中国内地呢!而现在呢,谷歌都退了有一些日子了!紧以此纪念一番! 话说谷歌API,我相信很多人应该都知道!不晓得在实际应用中,用的人多不多(我说的不 ...
- 《YouTube 网站的架构演进》阅读笔记
概述 YouTube 在国内是个404网站,需要翻墙得见,这是有用的废话,先铺垫一下. 从全球网站来看,它仅次于母公司 Google,全球排名位列第2.每天超过5亿以上视频播放量,平均每个用户点击10 ...
- C++ AVFrame转BMP 或者其他形式转化也可
void CffmpegUIDlg::SaveAsBMP(AVFrame *pFrameRGB, int width, int height, int index, int bpp) { BITMAP ...