译者｜Piumi Liyana Gunawardhana
翻译者 / 策画｜张卫滨
在当代 Web 应用领域合作开发中，操控性是获得更快的使用者新体验的关键性。选用 React 能够产生简单的界面，为为数众多应用领域提供更强悍的使用者新体验，而且无须耗费很多的心力来隐式地强化操控性。但，合作开发者在构筑小型应用领域时，常常受累于操控性难题，他们能选用各种方式来进一步强化 React 应用领域的操控性。
在责任编辑中，我将探讨提高 React 前端操控性的四个基本功。
1. 选用 React.PureComponent
防止展开协同
React 选用了交互式 DOM（VDOM）的基本概念，在此种基本概念中，像 ReactDOM 这样的库会在缓存中保护界面的“交互式”论述，并使其与“前述”的 DOM 保持并行。这个操作过程叫作协同（reconciliation）。
即使只预览已修正的 DOM 结点，再次图形也会须要时间。心灵指数表达式 shouldComponentUpdate() 会在再次图形操作过程开始以后被初始化，而此般来说都不是什么难题，但，假如延后很明显不然，他们能通过全面覆盖 shouldComponentUpdate() 来快速而此操作过程。该表达式的预设同时实现会返回 true，即让 React 来处置预览，如下表所示右图：
假如你知道自己的模块在这类情况下不须要预览不然，那么能从 shouldComponentUpdate() 中回到 false 来完全略去图形操作过程。
在 React“纯”模块的协助下，此种强化思路能显得更为难、更为智能化。PureComponent 选用表层（shallow）特性和状况对照来同时实现其 shouldComponentUpdate()。
这意味著它会对计算结果类别的值和第一类的提及展开对照。因此，在选用 React.PureComponent 时，他们须要满足如下表所示两个先决条件：
模块的 state/props 应该是不可变第一类，不应该有太多层级的嵌套第一类，并且应该包含原始类别的数据。
所有的子模块应该是“纯”模块或表达式式模块。
2. 选用不可变的数据结构
假设他们要思考一种有效的方式来自动探测复杂特性或状况变更，这里就是不可变数据结构的用武之地了。
选用不可变数据结构背后的理念很简单：与其直接对包含复杂数据的第一类展开修正，不如创建一个包含数据变更的副本。因此，识别第一类变化就能像比较两个第一类的提及一样难。
为了自动检查复杂的状况变更，能组合选用 React.PureComponent 和不可变数据结构。例如，借助像 Redux 这样的状况管理工具，假如应用领域中的状况是不可变的，他们能将所有的状况第一类保存到一个单独的存储中，这样就能很难地同时实现撤销和重做功能。
假如能够选用提供不可变数据结构的库会更快。在处置高度嵌套的第一类时，预览不可变的第一类可能是一项挑战。假如你遇到此种难题，能考虑选用 Immer 或 immutability-helper。这些库能够让他们创建更为易读的代码，同时保留了不可变性的优势。
选用不可变数据结构会带来一些收益：
没有副作用（side effect）。
创建、测试和选用不可变的数据第一类都很简单。
它们协助他们编写的代码能够快速检测状况变更，而不须要重复检查数据。
它们能够防止时序耦合（temporal coupling）。
3. 选用生产化的构筑
当创建 React 应用领域时，你会看到很多有用的警告和错误信息。在合作开发软件的操作过程中，它们能够让发现缺陷和难题显得更为难。但，它们在操控性方面是有代价的。
因此，假如你要做基准测试或者遇到操控性难题，请选用最小化的生产化构筑来测试你的 React 应用领域。终端使用者不须要 React 在合作开发环境中运行的这些代码片段。这些不相关的代码都能在生产环境中移除。
假如你选用 create-react-app 展开的项目初始化不然，那么能选用 npm run build 来生成没有这些额外代码的生产化构筑。假如你直接选用 Webpack 不然，那么能运行 webpack -p(相当于 webpack — optimize-minimize — define process.env.NODE ENV=”’production’”)。
在你项目的 /build 子目录下，现在将会包含应用领域的生产化构筑。请记住，这仅在生产化部署时才是必要的，在一般来说的合作开发中，依然能选用 npm start。
4. 多个分块文件
在项目初期，你的 React 应用领域可能只有几个模块。但，随着不断添加新的功能和依赖，应用领域也会随着时间的推移而不断增长。不知不觉中，你可能就会有一个非常庞大的生产化文件。
对于单页的 React 应用领域，他们一般来说会将所有的后端 JavaScript 代码打包到一个最小化的文件中。对于中小规模的应用领域来说，这是合理的。但，当应用领域的规模扩大时，将这些打包的 JavaScript 代码发送到浏览器会耗费大量的时间，从而影响应用领域的操控性。
假如你选用 Webpack 来构筑 React 项目不然，那么能选用它的代码拆分功能，也就是将要构筑的应用领域代码分割成多个“块（chunk）”。例如，他们能选用 CommonsChunkPlugin 将应用领域打包成两个独立的文件，也就是将供应商或第三方库的代码与他们的应用领域代码区分开，并按需传递给浏览器。这样不然，他们最后会得到名为 vendor.bundle.js 和 app.bundle.js 的两个文件。通过拆分文件，他们的浏览器能够减少缓存并且能够并行加载资源，以尽量减少加载时间的延后。
按需拆分代码是 Webpack 的一个优秀特性。它能将代码分割成较小的块，这些块能在须要时加载。这同时实现了最小的初始下载量，减少了应用领域的加载时间。然后，浏览器能根据应用领域的须要下载更多的代码块。
5. 交互式化长列表
假如你正在展示一个包含大量数据的长列表，那么在给定的时间，你应该仅在可见的视口（viewport）内图形一部分的数据。数据仅在视口中显示，当列表向下滚动时，更多的数据会被图形出来。此种技术被称为“窗口化（windowing）”。该技术能大大减少再次图形模块所消耗的时间以及所生成的 DOM 结点的数量，因为每次它仅图形很小的一部分数据行。
知名的窗口化库是 react-window 和 react-virtualized。它们提供了几个可重用的模块来展示数据表格、列表和表格化的数据。当然，假如你须要满足应用领域特定的需求，那么能像 Twitter 那样不断地合作开发自己的窗口模块。
最后的思考
React Web 应用领域的操控性是由其模块的简洁性决定的。因此，在解决操控性难题以后，了解 React 模块的工作方式、图形和 diffing 技术是至关重要的。在 React 心灵周期方式的协助下，他们能防止不必要的模块图形。假如消除了这些限制，应用领域能够像使用者期望的那样流畅运行。所以，在增强 React 应用领域的操控性时，你应该考虑所有的这些想法。
尽管还有其他各种方式来增强 React 应用领域的操控性，但我希望这篇文章能协助你获得强化 React 后端操控性的最佳基本功。
今日好文推荐
