[译文]React v16.0
|
查看原文内容 我们很高兴的宣布React v16.0发布了! 这个版本有很多长期被使用者期待的功能，包括：
（下面逐一说明） render函数可返回新的类型：数组和字符串新的版本支持组件的render方法返回包含元素的数组类型，代码如下： render() {
//不需要再把所有的元素绑定到一个单独的元素中了
return [
// 别忘记加上key值
<li key="A"/>First item</li>,<li key="B"/>Second item</li>,<li key="C"/>Third item</li>,];
}
新的版本也支持render方法返回的类型为strings。 关于render()方法的详细说明，请查看API文档。 更好的处理错误之前的React,渲染过程中如果遇到运行时的错误，可能会导致整个React组件的崩溃，并产生一些隐藏的错误信息，需要重新刷新才能恢复。为了解决这个问题，React16 使用了一个更有弹性的错误处理策略。默认情况下，如果一个错误是在组件的渲染或者生命周期方法中被抛出，整个组件结构就会从根节点中卸载。这种方式阻碍了被坏数据的展示，然而，却不是很好的用户体验。 新的策略，对于这种一出现错误就卸载整个组件app的方式进行了改善，你可以使用error boundaries（错误边缘）来进行处理，它是专门用来抓取其下子组件错误并向视图展示错误信息的组件。将error boundaries（错误边缘）想象成try{}catch(){}语句，只是它是React专用而已。 想要查看更多关于这个特性的说明，请查看这篇文章。 挂载方式Portals（挂载方式）提供了一个非常好的方式，可以将渲染的children插入到一个DOM节点，而这个节点可以是存在于当前组件dom结构外的其他节点。 render() {
// 可以不必创建一个新的div标签，divNode是一个存在于dom结构的节点，不需要考虑这个节点的位置
return React.createPortal(
this.props.children,divNode,);
}
查看完整的例子 更好的服务端渲染React16更好的支持服务端html的渲染，不再需要服务端进行初始化渲染以匹配结果了，它会尝试重新利用尽可能多的已经存在的DOM节点。 服务端渲染器被完全重写用以支持流。React的核心成员Sasha Aicken，它是这个功能的贡献者，写了一篇非常好的文章来描述React16 SSR的提升。“渲染流的方式能够减少获取响应首字节前所花费的毫秒数(TTFB),将页面文档的开头沿着电缆发送到浏览器端时，下一部分的页面文档已经形成了。用这种流的方式，所有的主流浏览器都会更早的开始解析和渲染页面文档”。 支持自定义的DOM属性取代之前忽略不识别的HTML和SVG属性的方式，新的版本将会把它们传递给DOM元素。这个新特性会让我们摆脱可用的React属性白名单，从而减少文件的大小。 减少文件体积除了上面提交到的这些特性，React16要比v15.6.1更小！
文件大小的变化部分归功于打包工具的改变。React现在使用Rollup针对不同的目标格式创建打包，进而使文件大小和运行时性能都表现优秀。 新的核心架构React16是React第一个建立在一个称为"Fiber"全新架构的版本。你可以通过阅读Facebook的工程博客了解Fiber全部的内容。 这个版本中的大部分功能，比如error boundaries和fragments，这都是通过重写和核心架构来实现这些可能的。而事后的几个版本中，你能够回去更多的新特性，因为我们会开始全力释放React的全部潜能。 也许最让人兴奋的地方是我们正致力于async rendering（异步渲染）的工作 —— 这个策略能通过周期性的向浏览器发布执行任务从而协同调度渲染工作。结果就是使用异步渲染，应用将会更加响应式，因为React避免了主线程的阻塞。 我们认为异步渲染是一个充满意义的功能，它代表了React的未来。为了能够保证现有项目平滑的融合v16.0版本，这个版本我们并没有启动任何异步的特性，但是在接下来的几个月里我们会非常高兴的请它隆重登场。请大家拭目以待！ 升级就长期的升级来说，尽管React16只是包括了一些有意义的内部改变，这个版本和其他主要的React版本仍可平分秋色。在今年早期的时候，新版版已服务于React和Messenger.com，然后我们通过发布一些beta版本和候选版本来解决增加的问题。除少数例外，如果你的项目使用v15.6版本没有任何警示，那么可以升级到v16来服务项目了。 弃用Hydrating一个服务端渲染的容器现在有了一个明确的API，如果你要进行服务端渲染，请使用ReactDOM.hydrate方法替换ReactDOM.render，客户端的渲染请保持使用ReactDOM.render方法。 突破变化
打包
( Over... ) （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |