虚拟dom_React虚拟DOM原理追踪(动画教程)

作者：JavaScript Teacher@2019-07-31  

翻译&校验：freedom

首次启动一个React

使用React来构建UI的你需要知道它实际上是如何工作的。React会自动将App类挂载到根目录的应用程序容器：

第一次挂载

现在，你的应用程序已挂载到DOM，让我们进一步来研究它的原理。

虚拟DOM & Diffing (“Reconciliation”) 算法

要构建React应用程序，你可能不需要知道内部花里胡哨的东西。但是...我还是决定创建一个可视化的教程，让你更好掌握和理解React是如何工作的。

DIFFing算法是寻找两个虚拟DOM之间的差异。稍等，有两个虚拟DOM吗？我认为只有一个，React将之前的虚拟DOM和新生成的虚拟DOM进行比较。只有在检测有更改时，它才会最终更新到浏览器的DOM:

React虚拟DOM原理追踪

React的Diffing算法通过抽象动画表示。如果发现这两棵虚拟DOM树是不同的，那么将最新的一个与浏览器中的实际DOM进行协调。

简单说明一下这里发生了什么

使用POST数据调用API.tweet()，其中包含单击事件上的消息。有效数据将在(Event)=>{…}中发送和接收回调。如果返回的有效数据导致props发生变化，DOM树将被DIFF算法更新。如果这两个虚拟DOM树是不同的，那么最近的一个会被发送到浏览器。

然后这个新的虚拟DOM就变成了旧的，我们在等待新的DOM到来。

React组件

React组件不过是一个JavaScript对象。React以二叉树的形式表示整个UI结构的方式创建自己的虚拟DOM。它将虚拟DOM树保存到内存中，多次添加、更新和删除各种组件，最终在实际浏览器中被渲染出来，浏览器也就更新了DOM和UI。

不要将render()用于呈现用户界面以外的任何内容。如果需要更新状态或者属性，那必须使用React内置的生命周期函数。

render()应该始终是一个纯函数

render()函数的作用是：更新虚拟DOM组件。如果这个新的虚拟DOM树和之前渲染的虚拟DOM树不同，那react也会更新浏览器中实际的DOM。你不需要直接在任何地方更新浏览器的DOM - 特别是不能从render()函数中更新。

不要使用以某种方式直接更新DOM，会污染render()函数。

你最好不要在render()函数中进行http请求、jQuery、Ajax或fetch调用来改变state(即使使用setstate)，因为它应该是纯的。渲染函数始终作为最后一步执行，只是为了所有虚拟DOM更新后更新UI的。

生命周期事件

当组件首次挂载到DOM时，React会创建componentWillMount事件。在浏览器的DOM中实际挂载(第一次被渲染)虚拟组件之后，将执行另一个名为componentDidMount的生命周期事件。

在整个应用程序的生命周期中，你需要在这些生命周期事件方法中编写组件的大部分逻辑。

下一个动画教程：Hooks？

我认为这是一个虚拟DOM和生命周期函数的原理分析课程。

许多开发者已经开始学习Hooks。昨天发布了《为什么需要React Hooks?》，有兴趣可以去看看。根据React的文档，组件生命周期事件甚至被认为是不安全的，并且将来可能会过时。制作这些动画仍然很有趣，我敢肯定，对于那些刚接触React的人或者对其发展历史感兴趣的人，至少会踩几次坑。

Hooks我也正在学习。希望有一天我会制作Hooks的动画教程！在此之前，保持联系！可以通过一下渠道关注我：

• @Twitter https://twitter.com/js_tut

• @Instagram https://www.instagram.com/javascriptteacher/

• @Facebook https://www.facebook.com/javascriptteacher/