转载

Netflix为什么选择使用React来提升用户体验

为了提升用户体验，在线影片租赁提供商Netflix正使用由Facebook开源的 React库对其桌面和移动平台进行重大修改。近日，他们在官方博客上发表了一篇文章，阐述了选择React的三个关键因素。

首先是启动速度方面的考虑。为了使用户可以无缝地在浏览内容之间进行切换，他们希望降低初始加载时间。这个时间不仅包括下载和处理初始化标记、脚本和样式表的时间，还包括获取数据的时间。因此，他们希望能够找到一种混合解决方案。该方案允许他们在初次加载时通过服务器端渲染提供一屏显示的静态标记，从而降低上面提到的初始加载操作时间。同时，他们还可以通过客户端脚本启用UI动态元素。

其次是运行时性能方面的原因。为了在Web和iOS平台上创建视觉效果特别丰富的用户体验，高效的UI渲染是关键。即使是在硬件资源限制较小的台式电脑上，一些开销大的操作还是会影响UI的响应能力，尤其是DOM操作所导致的重排和重画会降低用户体验。

最后是模块化方面的需求。为了能够快速地构建出新的功能和设计，他们要求前端必须支持各种A/B测试。比如，有一个测试需要比较9种不同的UI设计。这意味着他们需要在测试期间维护10个视图的代码。那么在测试结束后，将体验最佳的视图产品化以及将其它9个视图的代码清除掉应该很容易就能实现。

React不仅能够满足上述要求，而且还相对比较容易掌握。于是，他们就利用React的下列特性来缩短应用程序的初始加载时间，提高运行时性能，并实现可伸缩性：

“同形的（Isomorphic）”JavaScript——使用React可以构建出既能在服务器端运行又能在客户端环境中运行的JavaScript UI代码。借助React，他们可以实现前文所述的混合解决方案。因为React可以在没有“活动DOM（live DOM）”的情况下实现UI渲染，比如，使用 React.renderToString或者React.renderToStaticMarkup 。
虚拟DOM——为了减少DOM操作开销，React将更新应用到虚拟DOM，然后通过 diff算法确定DOM操作的最小更新集。这比操作真实的DOM要快很多。而且，使用React就不需要进行传统的数据绑定了。
React组件和Mixin——React提供了功能强大的组件和 Mixin API。他们大量使用了这些API，创建可重用的视图，共享常见功能。当对不同设计进行A/B测试时，他们将视图实现为由父组件渲染的、单独的React子组件。类似地，行为逻辑的差异可以抽象到React Mixin中。

文章最后写道：

React已经超出了我们的需求，为我们创新Netflix体验奠定了坚实的基础。

感兴趣的读者还可以看一下 Facebook是如何使用React构建原生iOS应用的。

感谢郭蕾对本文的审校。

给InfoQ中文站投稿或者参与内容翻译工作，请邮件至editors@cn.infoq.com。也欢迎大家通过新浪微博（@InfoQ）或者腾讯微博（@InfoQ）关注我们，并与我们的编辑和其他读者朋友交流。

正文到此结束