摘要:Facebook 正式发布了 React 16,新增了一些倍受关注的特性,提升了性能。Facebook 对这一版本进行了彻底的重写。Facebook 前端工程师 Andrew Clark 在博客上正式发布了 React 16,并展示了一些新特性。
Facebook 正式发布了 React 16,新增了一些倍受关注的特性,提升了性能。Facebook 对这一版本进行了彻底的重写。
Facebook 前端工程师 Andrew Clark 在博客上正式发布了 React 16,并展示了一些新特性,这些特性包括:
render 函数可返回数组和字符串。不必增加嵌套了,数组需带有 key 属性。
更好的错误处理。现在你可以在组件内部出错时使用一个替代的 UI。
Portal 函数。可以在 DOM 任意位置插入内容。现在想弹个对话框或 tooltip 更方便了。
超快的 SSR。React 16 改进了服务端渲染,据测试,相比 React 15.6.1,在不同版本的 Node 环境下可达到 5-10 倍的性能提升。
支持自定义的 DOM 属性。现在不用使用属性 whitelist 了,React 会将未知属性直接传到 DOM 中。
减小了库文件大小。现在的 React 核心库大小仅 5.3kb(gzip 后 2.2kb),相比原来缩减了 30%。
更改为 MIT 开源协议。上周 Facebook 发表博客表示怂了,从 React 16 开始更改为更宽松的 MIT 协议。对于某些不方便升级的 React 用户,还发布了 15.6.2 版本,也改用了 MIT 协议。
除了上面这些之外,React 16 变化最大的是因为使用了新引擎 React Fiber。
新引擎 React Fiber
React Fiber 是对 React 核心架构的彻底重写,Fiber 是一种轻量的执行线程,依靠更高级的任务调度,实现协作式的多任务处理。
上面的大多数特性都是由 React Fiber 带来,并且它还让 异步渲染 成为了可能,采用了异步渲染以后 React 应用响应会更加灵活,主线程将不会被阻塞。
Facebook 的工程经理 Sophie Alpert 在一篇讲述架构变更的文章中写道,“这好比给一辆行进中的汽车更换引擎”:
我们在保持外部 API 不变的同时彻底重写了 React……数百个公司(包括 Facebook 在内)每天都在使用 React,我们希望在重写 React 时不会影响到他们。
Facebook 使用了功能开关(feature flag),这样 Fiber 和 Non-Fiber 版本就可以放在一起。他们运行单元测试,在 facebook.com 和 messenger.com 上运行新代码,以此来发现和减少软件缺陷,并驱动新渲染器的功能演进。
当然,重写是不完美的,可能会带来一些重大的变更。Clarks 说,这些变更”只会影响到一些不太常见的情况,我们不希望它们给大多数应用造成影响“。
React 16 可以通过 npm、yarn 和 UMD 安装。官方介绍说,如果你的应用在 React 15.6 下可以完美运行,那么理论上可以无缝迁移到 React 16. 如果开发者不需要立即升级到 React 16,可以考虑 15.6.2 版本,这一版本也使用了 MIT 许可。