使用React来构建UI的你需要知道它实际上是如何工作的。
作者：JavaScript Teacher @2019-07-31 原文地址
首次启动一个React
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的文档，组件生命周期事件甚至被认为是不安全的，并且将来可能会过时。制作这些动画仍然很有趣，我敢肯定，对于那些刚接触React的人或者对其发展历史感兴趣的人，至少会踩几次坑。
Hooks我也正在学习。 希望有一天我会制作Hooks的动画教程！在此之前，保持联系！可以通过以下渠道关注我：
若有收获，就点个赞吧
0 人点赞
