React16版本更新的新特性

2018年05月03日 21:27:56

阅读数:188

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是对核心算法的一次重新实现”,后续再深入学习。

最新文章

  1. Confluence Wiki -- 页面限制
  2. SQL Server数据库级别触发器
  3. WinRAR命令行
  4. git reset soft,hard,mixed之区别深解
  5. mongodb与sql语句对照表
  6. pip 错误Requested **, but installing version **
  7. 1688: [Usaco2005 Open]Disease Manangement 疾病管理
  8. deeplearning.ai 人工智能行业大师访谈 Andrej Karpathy 听课笔记
  9. LongAdder基础
  10. 在Synology群晖上运行Frp客户端
  11. ubuntu16.04+cuda9+cudnn7+tensorflow+pycharm环境搭建
  12. Telsa显卡比较
  13. CentOS6.5 上crontab每天自动备份mysql数据库
  14. Caffe 分类问题 Check failed: error == cudaSuccess (2 vs. 0) out of memory
  15. redis主从简单配置
  16. Java_myBatis_XML代理_动态SQL
  17. [daily][archlinux] 本地字符乱码, 无法显示中文
  18. spring boot 启动类一定要放置到包的根目录下,也就是和所有包含java文件的包在同一级目录。如果不放置在根目录下,将会提示 no mybatis mapper was found
  19. zoj 月赛B题(快速判断一个大数是否为素数)
  20. 一定要 先删除 sc表 中的 某元组 行,,, 再删除 course表中的 元组行

热门文章

  1. Wannafly模拟赛
  2. 【[USACO15FEB]审查(黄金)Censoring (Gold)】
  3. Ajax去除缓存
  4. File,FileInfo,Directory,DirectoryInfo
  5. 【洛谷P1169】[ZJOI2007]棋盘制作
  6. 判断js中数据类型 的最短代码
  7. 20181009noip HZ EZ 两校联考trade(优先队列,贪心)
  8. Linux外在设备的使用
  9. Redis高可用复制集群实现
  10. linux系统下病毒排除思路