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 ）关注我们，并与我们的编辑和其他读者朋友交流。