一、使用Error Boundary处理错误组件

        React16之前:组件在运行期出错,会阻塞整个应用的渲染。

  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 新特性的更多相关文章

  1. React16新特性

    React的16版本采用了MIT开源许可证,新增了一些特性. Error Boundary render方法新增返回类型 Portals 支持自定义DOM属性 setState传入null时不会再触发 ...

  2. 🍓 react16.2新特性 🍓

    react16.2新特性:组件中可以一次性return 多个子元素(子组件)了,也就是说,想return多个子元素,不用在外面包一个父盒子了. 方法一:把要return的元素放在一个空的jsx里面 方 ...

  3. React16版本的新特性

    React16版本更新的新特性 2018年05月03日 21:27:56 阅读数:188 1.render方法的返回值类型:New render return types 之前的方式: class A ...

  4. [译文]React v16(新特性)

    [译文]React v16(新特性) 查看原文内容 我们很高兴的宣布React v16.0发布了! 这个版本有很多长期被使用者期待的功能,包括: fragments (返回片段类型) error bo ...

  5. react 16.8版本新特性以及对react开发的影响

    Facebook团队对社区上的MVC框架都不太满意的情况下,开发了一套开源的前端框架react,于2013年发布第一个版本. react最开始倡导函数式编程,使用function以及内部方法React ...

  6. SQL Server 2014 新特性——内存数据库

    SQL Server 2014 新特性——内存数据库 目录 SQL Server 2014 新特性——内存数据库 简介: 设计目的和原因: 专业名词 In-Memory OLTP不同之处 内存优化表 ...

  7. ElasticSearch 5学习(10)——结构化查询(包括新特性)

    之前我们所有的查询都属于命令行查询,但是不利于复杂的查询,而且一般在项目开发中不使用命令行查询方式,只有在调试测试时使用简单命令行查询,但是,如果想要善用搜索,我们必须使用请求体查询(request ...

  8. [干货来袭]C#6.0新特性

    微软昨天发布了新的VS 2015 ..随之而来的还有很多很多东西... .NET新版本 ASP.NET新版本...等等..太多..实在没消化.. 分享一下也是昨天发布的新的C#6.0的部分新特性吧.. ...

  9. CSS3新特性应用之结构与布局

    一.自适应内部元素 利用width的新特性min-content实现 width新特性值介绍: fill-available,自动填充盒子模型中剩余的宽度,包含margin.padding.borde ...

随机推荐

  1. Linux 内核 编译模块

    背景: 由于调试内核或者由于分区大小限制,有时候内核组件不一定完全需要编进内核中. 所以,在开发中经常将内核组件编译成为模块,等到在恰当的时机加载. 概览: Linux内核模块的编译方法有两种: 1. ...

  2. zabbix监控memcached服务

    zabbix监控memcached服务 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.安装并配置memcached服务 1>.使用yum方式安装memcached [ro ...

  3. P1066 图像过滤

    P1066 图像过滤 转跳点:

  4. HiBench成长笔记——(10) 分析源码execute_with_log.py

    #!/usr/bin/env python2 # Licensed to the Apache Software Foundation (ASF) under one or more # contri ...

  5. 彻底理解JavaScript中的this

    this 是 JavaScript 语言的一个关键字. 它是函数运行时,在函数体内自动生成的一个对象,只能在函数体内使用. 函数的不同使用场合,this 有不同的值.总的来说,this 就是函数运行时 ...

  6. 洛谷P1000 超级玛丽游戏(洛谷新手村1-1-1)

    题目背景 本题是洛谷的试机题目,可以帮助了解洛谷的使用. 建议完成本题目后继续尝试P1001.P1008. 题目描述 超级玛丽是一个非常经典的游戏.请你用字符画的形式输出超级玛丽中的一个场景. *** ...

  7. POJ 3090 欧拉函数

    求一个平面内可见的点,其实就是坐标互质即可,很容易看出来或者证明 所以求对应的欧拉函数即可 #include <iostream> #include <cstdio> #inc ...

  8. Google的搜索API的Delphi封装

    这个东西实现了已经有一段时间了,那个时候谷歌还没有退出中国内地呢!而现在呢,谷歌都退了有一些日子了!紧以此纪念一番! 话说谷歌API,我相信很多人应该都知道!不晓得在实际应用中,用的人多不多(我说的不 ...

  9. 《YouTube 网站的架构演进》阅读笔记

    概述 YouTube 在国内是个404网站,需要翻墙得见,这是有用的废话,先铺垫一下. 从全球网站来看,它仅次于母公司 Google,全球排名位列第2.每天超过5亿以上视频播放量,平均每个用户点击10 ...

  10. C++ AVFrame转BMP 或者其他形式转化也可

    void CffmpegUIDlg::SaveAsBMP(AVFrame *pFrameRGB, int width, int height, int index, int bpp) { BITMAP ...