该注释的作者（我们将发布今天的翻译）说，使用React开发用户界面与了解React实际工作方式之间存在差距。 在实践中使用React的许多人都不知道该库的内容。 在这里，我们将以动画形式考虑一些在用户界面形成期间在React中发生的关键过程。
启动一个React应用
应该注意的是，为了创建React应用程序，您可能不知道React的内部机制。 但是我决定为所有出于任何原因想要更好地了解React工作的人们准备这份材料。 所描述的过程以动画形式呈现。 我希望这有助于使他们的分析更加清晰。
当您首次启动应用程序时，React会自动将
App类安装到
App的根容器中。
首次挂载<App />虚拟DOM和比较算法
在实现Diffing算法的React子系统的工作期间，将搜索两个虚拟DOM（虚拟文档对象模型，虚拟文档模型）之间的差异。 放慢一会儿。 两个虚拟DOM？ 在React中似乎只有一个虚拟DOM ...让我们弄清楚。 React将先前的虚拟DOM与新的虚拟DOM进行比较。 仅在比较虚拟DOM时发现它们之间的差异时，才更新基于浏览器的DOM。
React比较算法的抽象动画。 如果发现两个虚拟DOM树不同，则将浏览器中的实际DOM与最新的虚拟DOM树匹配考虑上面的动画发生了什么。
- 在
click事件上，使用包含message的POST请求数据进行API.tweet()调用。 - 响应请求，返回
payload ，此数据发送到回调(event) => { … } 。 - 如果返回给
payload的数据应引起prop的更改，则将对虚拟DOM树进行比较。 - 如果结果不同，则将最新的树发送到浏览器。
- 然后新的虚拟DOM变旧了，我们期待着新的事件。
反应组件
React组件只是一个JavaScript对象。 React创建了自己的虚拟DOM，它是整个用户界面结构的树形视图。 React将虚拟DOM树存储在内存中。 在将虚拟DOM中的内容实际显示在浏览器窗口中之前，React可以执行许多操作来添加，更新和删除虚拟DOM中的项目。
不要将
render()组件方法用于与渲染用户界面元素无关的任何事情。 如果您需要更改组件的状态或属性，请使用React组件生命周期的标准方法。
render（）方法应始终保持纯函数。
render()方法更新虚拟组件DOM。 如果新的虚拟DOM树与先前显示的树不同，那么React除了更新虚拟DOM外，还将更新实际的浏览器DOM。 开发人员不必直接直接更新浏览器DOM。 该规则适用于React应用程序代码中的任何位置。 当应用于
render()函数时，这一点尤其重要。
不要使用以某种方式直接更新DOM的函数调用来污染render（）方法在
render()方法中，您不应更改组件的状态（即使使用
setState ），也不应该执行HTTP请求。 不要从此方法访问jQuery，不要执行请求以加载某些数据。 事实是
render()方法需要保持在一个纯函数的状态。 始终在组成机制的最后阶段调用此方法。 在其实施过程中，您只需要更新用户界面。 假定对虚拟DOM的所有更新均已完成。
组件生命周期事件
当组件首次安装在DOM中时，React引发其
componentWillMount生命周期事件。 首次显示虚拟组件后（即，它首次安装在浏览器的真实DOM中），另一个事件称为
componentDidMount 。
期望在应用程序所有阶段调用的大多数组件逻辑都将在其生命周期方法中进行精确描述。
总结
如今，许多React开发人员使用功能组件和挂钩代替基于类及其生命周期方法的组件。 生命周期方法甚至被认为是不安全的。 如果您相信React文档，那么将来可能不推荐使用这些方法。 这就是为什么作者认为本文就像对技术的描述一样，其中一些可能很快就会被遗忘的原因。 但是，尽管如此，他还是希望该材料对刚开始熟悉React的人以及对Web开发技术的发展历史感兴趣的人有用。
亲爱的读者们！ 您是否使用React钩子？