React16版本的新特性
React16版本更新的新特性
1、render方法的返回值类型:New render return types
之前的方式:
class App extends Component{
render(){
return (
<div>hello</div>
)
}
}
在react16版本中:返回值支持fragments and strings
//返回字符串的方式
class App extends Component{
render(){
return 'hello react!'
}
}
//返回数组的方式
class App1 extends Component{
render(){
return [
<li key='A'>item1</li>,
<li key='B'>item2</li>,
<li key='C'>item3</li>,
]
}
}
2、更好的错误处理:Better error handling
核心是componentDidCatch周期函数。
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
componentDidCatch(error, info) {
// Display fallback UI
this.setState({ hasError: true });
// You can also log the error to an error reporting service
logErrorToMyService(error, info);
}
render() {
if (this.state.hasError) {
// You can render any custom fallback UI
return <h1>Something went wrong.</h1>;
}
return this.props.children;
}
}
使用的时候,这样处理:
render(){
return (
<ErrorBoundary><User /></ErrorBoundary>
)
}
这是一种错误处理的方式。
3、Portals,把一个组件挂载到界面的任意DOM上。
使用场景:给一个界面添加Modal层。
render() {
return ReactDOM.createPortal(
this.props.children,
domNode,
);
}
4、setState传入null时不会再触发更新
selectCity(e){
const newValue = e.target.value;
this.setState((state)=>{
if(state.city===newValue){
return null;
}
return {city:newValue}
})
)
5、支持自定义DOM属性
在之前的版本中,React会忽略无法识别的HTML和SVG属性,自定义属性只能通过data-*形式添加,现在它会把这些属性直接传递给DOM(这个改动让React可以去掉属性白名单,从而减少了文件大小),不过有些写法仍然是无效的。如DOM传递的自定义属性是函数类型或event handler时,依然会被React忽略。
6、基于流模式的服务端渲染
React 16的SSR被完全重写,新的实现非常快,接近3倍性能于React 15,现在提供一种流模式streaming,可以更快地把渲染的字节发送到客户端。另外,React 16在hydrating(注:指在客户端基于服务器返回的HTML再次重新渲染)方面也表现的更好,React 16不再要求客户端的初始渲染完全和服务器返回的渲染结果一致,而是尽量重用已经存在的DOM元素。不会再有checksum(标记验证)!并对不一致发出警告。一般来说,在服务器和客户端渲染不同的内容是不建议的,但这样做在某些情况下也是有用的(比如,生成timestamp)。
7、新的打包策略
新的打包策略中去掉了process.env检查。
React 16的体积比上个版本减小了32%(30% post-gzip),文件尺寸的减小一部分要归功于打包方法的改变。
React 16采用了新的核心架构React Fiber。官方解释是“React Fiber是对核心算法的一次重新实现”,后续再深入学习。
React16版本的新特性的更多相关文章
- JDK各个版本的新特性jdk1.5-jdk8
JDK各个版本的新特性 对于很多刚接触java语言的初学者来说,要了解一门语言,最好的方式就是要能从基础的版本进行了解,升级的过程,以及升级的新特性,这样才能循序渐进的学好一门语言.今天先为大家介绍一 ...
- atitit.js 各版本 and 新特性跟浏览器支持报告
atitit.js 各版本 and 新特性跟浏览器支持报告 一个完整的JavaScript实现是由以下3个不同部分组成的 •核心(ECMAScript)--JavaScript的核心ECMAScrip ...
- JDK几个高版本的新特性
JDK 高版本的新特性 1.JDK5的新特性: 自动拆装箱 见Integer部分笔记 泛型 增强for循环 静态导入 可变参数 见集合部分笔记 枚举 是指将变量的值一一列出来,变量的值只限于列举出来的 ...
- JDK各个版本的新特性jdk1.5-jdk8[转]
JDK各个版本的新特性 对于很多刚接触java语言的初学者来说,要了解一门语言,最好的方式就是要能从基础的版本进行了解,升级的过程,以及升级的新特性,这样才能循序渐进的学好一门语言.今天先为大家介绍一 ...
- JDK各个版本的新特性jdk1.5-jdk8(转)
原文:http://www.cnblogs.com/langtianya/p/3757993.html JDK各个版本的新特性 对于很多刚接触java语言的初学者来说,要了解一门语言,最好的方式就是要 ...
- (数据科学学习手札129)geopandas 0.10版本重要新特性一览
本文示例代码及文件已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 就在前不久,我们非常熟悉的Python地理 ...
- (数据科学学习手札139)geopandas 0.11版本重要新特性一览
本文示例代码已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 大家好我是费老师,就在几天前,geopandas ...
- jdk各个版本的新特性(jdk1.7,1.8,1.9)
用了这么久的jdk,应该会有很多人和我一样,不知道各个版本的jdk的一些新特性,这里简单总结一下.. jdk1.7新特性: 1.在Switch中可以用String字符串 2.对Java集合(Colle ...
- Java1.0-1.12各个版本的新特性
JDK Version 1.0 1996-01-23 Oak(橡树) 初代版本,伟大的一个里程碑,但是是纯解释运行,使用外挂JIT,性能比较差,运行速度慢. JDK Version 1.1 1997- ...
随机推荐
- codeforces 597C - Subsequences
枚举子序列的末尾,递推. 方案数:f[i = 以i结尾][k =子序列长度] = sum(f[j][k-1]),j < i. 转移就建立k个BIT. #include<bits/stdc+ ...
- 2018.11.30 zsh: command not found: mysql 的解决办法mac环境下
系统环境变量的问题.解决办法: 1.打开终端.输入open .zshrc 会出现一个可编辑文档, 2.找到# User configuration部分,在下一行添加source ~/.bash_pro ...
- logback.xml常用配置
一.logback的介绍 Logback是由log4j创始人设计的又一个开源日志组件.logback当前分成三个模块:logback-core,logback- classic和logback-acc ...
- Java之生成条形码、PDF、HTML
关于Java生成HTML,可参考我的这篇文章:FreeMarker之根据模型生成HTML代码 当然了,该篇文章也会给你很多启发,比如,根据html生成html,大家不要小看这个,著名的WordPres ...
- html下载文件和上传文件(图片)(java后台(HttpServlet))打开保存路径和选择文件录取+(乱码UTF-8)+包
下载文件: //通过路径得到一个输入流 String path = "获取需要下载的文件路径"; //path.lastIndexOf(".")+1可以获取文件 ...
- qbxt Day3 其余题
例题1 noiopenjudge9277 给出在最底层的木头的个数,问有多少种堆放木头的方式,当然你的堆放方式不能让木头掉下来. 在堆放的时候木头必须互相挨着在一起. 设dp[i]表示多少个log(原 ...
- Android学习笔记_75_Andorid控件样式汇总
<!-- 设置activity为透明 --> <style name="translucent"> <item name="android: ...
- 【题解】洛谷P2926 [USACO08DEC]拍头Patting Heads
洛谷P2926:https://www.luogu.org/problemnew/show/P2926 思路 对于每一个出现的数 从1到Max 凡是这个数的倍数 那么ans就加上他的个数 PS:最后要 ...
- HDU 1180 诡异的楼梯(超级经典的bfs之一,需多回顾)
传送门: http://acm.hdu.edu.cn/showproblem.php?pid=1180 诡异的楼梯 Time Limit: 2000/1000 MS (Java/Others) ...
- 02_Linux 终端命令格式
01. 终端命令格式 command [-options] [parameter] 说明: command:命令名,相应功能的英文单词或单词的缩写 [-options]:选项,可用来对命令进行控制,也 ...