2017年9月26日React 16发布,通过官网和示例了解一下新特性。
React 16更新
新js环境要求
react16依靠Map和Set集合和requestAnimationFrame(一个针对动画效果的API)
新功能
- Fragments:render函数可以返回数组和字符串
- error boundaries:错误处理
- portals :支持声明性地将子树渲染到另一个DOM节点
- custom DOM attributes :ReactDom允许传递非标准属性
- improved server-side rendering:提升服务端渲染性能
Fragments
render() { return [ <li key="A"/>First item</li>, <li key="B"/>Second item</li>, <li key="C"/>Third item</li>, ]; }
详见API
error boundaries
之前,一旦某个组件发生错误,整个组件树将会从根节点被unmount下来。React 16修复了这一点,引入了Error Boundary的概念,中文译为“错误边界”,当某个组件发生错误时,我们可以通过Error Boundary捕获到错误并对错误做优雅处理,如使用Error Boundary提供的内容替代错误组件。Error Boundary可以看作是一种特殊的React组件,新增了componentDidCatch这个生命周期函数,它可以捕获自身及子树上的错误并对错误做优雅处理,包括上报错误日志、展示出错提示,而不是卸载整个组件树。(注:它并不能捕获runtime所有的错误,比如组件回调事件里的错误,可以把它想象成传统的try-catch语句)
实践:
抽象出检查错误边界公共组件:
class ErrorBoundary extends React.Component{ constructor(props){ super(props); this.state=({ ifError:false }); } componentDidCatch(err, info) { this.se