React是如何工作的？

React自推出以来，改变了前端开发人员构建web应用程序的方式。使用虚拟DOM，React使UI更新更加高效，使web应用程序更加快速。但是，为什么中等规模的React web应用程序仍然表现不佳？

关键就在于你是如何使用React的。

像React这样的现代前端库并不能神奇地让你的应用程序更快。它要求开发人员了解React是如何工作的，以及组件在组件生命周期的各个阶段是如何生存的。

使用React，你可以通过测量和优化组件渲染的方式和时间，获得它必须提供的许多性能改进。而且，React只提供了简化此操作所需的工具和功能。

React是如何工作的？

React开发的核心是简单明了的JSX语法，以及React构建和比较虚拟DOM的能力。自发布以来，React影响了许多其他前端库，诸如Vue.js也依赖于虚拟DOM的思想。

以下是React的工作原理：

每个React应用程序都以根组件开始，并由树结构中的许多组件组成。React中的组件是“函数”，它们根据用户界面接收的数据（道具和状态）呈现用户界面。

我们可以用F来表示。

UI = F(data)

用户与UI交互并导致数据更改。无论交互涉及单击按钮、点击图像、拖动列表项、AJAX请求调用API等，所有这些交互都只会更改数据。它们不会直接导致用户界面的改变。

在这里，数据是定义web应用程序状态的一切，而不仅仅是存储在数据库中的内容。甚至前端状态的位（例如，当前选择了哪个选项卡或当前是否选中了复选框）也是该数据的一部分。

每当此数据发生更改时，React都会使用组件函数重新呈现UI，但实际上仅限于：

UI1=F(data1)

UI2=F(data2)

React通过在其虚拟DOM的两个版本上应用比较算法来计算当前UI和新UI之间的差异。

Changes = Diff(UI1, UI2)

React然后继续仅将UI更改应用于浏览器上的真实UI。

当与组件关联的数据发生更改时，React确定是否需要实际的DOM更新。这允许React避免在浏览器中进行可能非常昂贵的DOM操作，例如创建DOM节点和访问现有的DOM节点。

组件的重复扩散和渲染可能是任何React应用程序中React性能问题的主要来源之一。构建一个React应用程序，其中扩散算法无法有效协调，导致整个应用程序重复渲染，可能会导致令人沮丧的缓慢体验。

要充分利用React，你需要利用它的工具和技术。React web应用程序的性能在于其组件的简单性，在优化应用程序之前，你需要了解React组件的工作原理以及它们在浏览器中的呈现方式。React生命周期方法提供了防止组件不必要地重新渲染的方法。消除这些瓶颈，你将获得用户应得的应用程序性能。让你学到的技能贴合就业市场，不怕面对就业竞争对手。