我们很高兴的宣布React v16.0发布了,这次版本的新增了一些呼声很高的特性,包括支持render返回数组和字符串、错误处理、portals、自定义DOM属性、优化服务器端渲染以及减少文件大小。
你现在可以通过 render
方法返回一个包含元素的数组:
render() {
// 不再需要在外边包裹一个额外的元素!
return [
// 不要忘记加key哦 :)
<li key="A"/>First item</li>,
<li key="B"/>Second item</li>,
<li key="C"/>Third item</li>,
];
}
同时也支持返回字符串。
API 文档
在此之前,React在渲染时运行错误会导致渲染中断,接着抛出一个令人匪夷所思的错误以及要求刷新页面来恢复。为了解决这个问题,React16 使用了更有弹性的错误处理策略。如果在组件的 render
方法或者生命周期方法中抛出错误,整个组件会被卸载。这样可以阻止显示错误的页面。然而这可能不是理想的用户体验。
每当错误发生时,你可以使用错误边界而不是卸载整个应用。错误边界是一个特殊的组件,捕捉组件树的错误然后显示降级的UI来提升体验。其实错误边界就像try-catch语句,只不过是用于React。
想获得更详细的信息, 查看我们之前的文章.
Portals提供一个方法来渲染DOM层级之外的DOM节点。
render() {
// React不需要创建一个新的div。将被渲染到`divNode`中。
// `divNode` 是一个在DOM中任何地方都有效的节点。
return React.createPortal(
this.props.children,
divNode,
);
}
查看完整portals示例
不再要求初始渲染和服务器的结果完全匹配,取而代之的是尝试重用更多已存在的节点。减少校验!
服务器端渲染的特性被完全重写以支持数据流。React核心团队成员Sasha Aicken(主要负责这个特性),他写了一篇很牛逼的文章来描述React16服务器端渲染的提升:“对流的渲染可以节省时间,在document后面部分生成之前就可以把document前面部分发送给浏览器。所有主流的浏览器,都会在当服务器传输流时,开始解析和渲染document。”
React将不再忽略未被识别的HTML和SVG属性,React会将它们传递给DOM。这样还带来一个好处就是允许我们把它们从React属性的白名单剔除出去,从而减小了文件大小。
尽管内容有所增加,但React 16的实际大小比起15.6.1小得多!
react
文件大小从20.7kb(压缩文件6.9kb)缩小到5.3kb(压缩文件2.2kb)。
react-dom
文件大小从141kb(压缩文件42.9kb)缩小到103.7kb(压缩文件32.6kb)。
react
+ react-dom
文件大小从161.7kb(压缩文件49.8kb)缩小到109kb(压缩文件34.8kb)。
与前一个版本相比,大小减少了32%(压缩后大小减少了30%)。
体积的缩小主要是因为打包方式的改变。React使用Rollup 来为不同的目标格式创建bundles,带来的结果不仅仅是体积减小也使得运行时性能得到提升。
React16是在新架构之上第一个版本,代号“Fiber”。
这次发布的大部分特性,比如错误边界和fragments,都是重写核心代码实现的。在接下来的几个版本中,你可以期待更多的特性,因为React的无限潜能已经被激发出来了。
我们正在开发异步渲染———一种浏览器定期协同渲染策略,异步渲染会使应用响应更稳定,因为React不会阻塞主线程。
我们认为异步渲染是一个很好的解决方案,它也代表了React未来的方向。这个特性会尽可能平顺的迁移到v16.0,目前我们还没有启用任何异步特性,但是我们很高兴会在接下来几个月推出这一解决方案,请持续关注!
尽管React16包含了很重大内部改变,但在升级方面,和之前发布React版本一样。在一般情况下,如果你的应用运行在15.6上没有任何警告提示,那就可以运行在16上。
如果你在服务器端渲染HTML,请使用ReactDOM.hydrate替换ReactDOM.render。如果你只是在客户端渲染,那么请继续使用ReactDOM.render。
unstable_handleError
方法改名为 componentDidCatch
,你可以用 codemod
自动迁移到新的API。
ReactDOM.render
和 ReactDOM.unstable_renderIntoContainer
这两个方法会返回null,如果真有这种需求,可以使用portals或者refs。
setState
:
setState
会导致更新。不管怎样,你也不应该在render方法中调用 setState
。setState
的回调函数(第二个参数),在 componentDidMount
或 componentDidUpdate
方法执行后立即调用。<B/>
替换 <A/>
,B组件的 componentWillMount
会在A组件的 componentWillUnmount
之前执行。
ReactDOM.unmountComponentAtNode
来清除你的组件树。查看示例
componentDidUpdate
生命周期不会再返回 prevContext
参数。(查看 #8631)
componentDidUpdate()
,因为DOM的refs是不可用的。这也使得它和 componentDidMount()
保持一致( componentDidMount()
在之前的版本也是不会调用的)。
unstable_batchedUpdates()
react/lib/*
和 react-dom/lib/*
两个路径。即使是在CommonJS环境中,React和ReactDOM预编译成一个单独的文件。如果你之前依赖React内部文件,并且不再工作了,那么请告诉我们你的具体情况,我们会尝试为你制定迁移策略。
react-with-addons.js
编译版本,所有兼容的插件都会在npm上单独发布,如果你需要的话有单个文件应用于浏览器的版本。
React.createClass
现在等同于 create-react-class
, React.PropTypes
等同于 prop-types
, React.DOM
等同于 react-dom-factories
, react-addons-test-utils
等同于 react-dom/test-utils
, 以及浅渲染等同于 react-test-renderer/shallow
,请参阅 15.5.0 和 15.6.0 的文章 来迁移代码。
react/dist/react.js
→ react/umd/react.development.js
react/dist/react.min.js
→ react/umd/react.production.min.js
react-dom/dist/react-dom.js
→ react-dom/umd/react-dom.development.js
react-dom/dist/react-dom.min
.js → react-dom/umd/react-dom.production.min.js
往期精选文章 |
---|
使用虚拟dom和JavaScript构建完全响应式的UI框架 |
扩展 Vue 组件 |
使用Three.js制作酷炫无比的无穷隧道特效 |
一个治愈JavaScript疲劳的学习计划 |
全栈工程师技能大全 |
WEB前端性能优化常见方法 |
一小时内搭建一个全栈Web应用框架 |
干货:CSS 专业技巧 |
四步实现React页面过渡动画效果 |
让你分分钟理解 JavaScript 闭包 |
小手一抖,资料全有。长按二维码关注京程一灯,阅读更多技术文章和业界动态。