javascript工作流_js如何工作

javascript工作流

Remember when you started learning React? You did get how the components work but did you try to ask what made it so fast? Did you come across some term like DOM API? If so, this is the article you have been looking for.

还记得您开始学习React的时候吗？ 您确实了解了组件的工作原理，但是您是否想知道是什么使它如此快速地完成的呢？ 您是否遇到过像DOM API这样的术语？ 如果是这样，这就是您一直在寻找的文章。

Let’s understand it with an example:

让我们通过一个例子来理解它：

Imagine you were provided with an official document of your organisation. Your boss hopes to make some efficient changes in it without altering the initial piece of information. How would you make the required changes?Probably, you can generate a copy of the document and implement the required changes on the newly generated file. Now, let’s assume the boss liked the new file but also wants to keep the initial file intact. Now , in this condition it is advised to view all the changes done and generate a new file with the initial piece as well as the changes made.

想象一下，您已获得组织的正式文件。 您的老板希望在其中进行一些有效的更改，而不会更改原始信息。 您将如何进行所需的更改？您可能会生成文档的副本，并在新生成的文件上实施所需的更改。 现在，假设老板喜欢新文件，但也希望保持原始文件不变。 现在，在这种情况下，建议查看所有所做的更改，并生成包含初始内容和所做更改的新文件。

That is what React does in the background. After you start the development server, it executes the following algorithm:

这就是React在后台执行的操作。 启动开发服务器后，它将执行以下算法：

1. It generates a virtual representation of the DOM tree and stores it in the memory for later use.
   它生成DOM树的虚拟表示并将其存储在内存中供以后使用。

Initial view of the DOM

DOM的初始视图

2. Then it will perform the DOM operations which makes the tree render in the browser.

2.然后它将执行DOM操作，使该树在浏览器中呈现。

3. Now, if we update some element in the source code, it generates a virtual DOM with updated tree (with the changes done).

3.现在，如果我们更新源代码中的某些元素，它将生成具有更新的树(已完成更改)的虚拟DOM。

4. The memory now has 2 virtual DOMs : one, the initial tree without the updated data and second with the updated element.

4.内存现在具有2个虚拟DOM：一个是没有更新数据的初始树，另一个是有更新元素的树。

Suppose the background color of element 2 has been changed to “RED”.

假设元素2的背景色已更改为“红色”。

First Virtual DOM

第一个虚拟DOM

Second virtual DOM (With changes)

第二虚拟DOM(有更改)

5. React now compares both these DOMs and compute the differences between them. It figures out which sub-elements need to be updated and only updates those elements. ALL OTHER SUB-ELEMENTS (WITH NO CHANGES DONE ) REMAIN THE SAME.

5.现在，React比较这两个DOM并计算它们之间的差异。 它指出需要更新哪些子元素，并且仅更新那些元素。 所有其他子元素(未做任何更改)保持不变。

Now it renders the page with updated element. This is what we call as TREE RECONCILIATION ALGORITHM.

现在，它使用更新后的元素呈现页面。 这就是我们所说的树协调算法。

Final Output (With the required changes)

最终输出(进行必要的更改)

为什么我们需要这种算法？ (Why do we need this algorithm?)

Before React, when we needed to work with browser’s API also known as DOM API, any traversal in the tree was avoided. The reason being : any operation on the DOM is single-threaded. Therefore, any expensive operation on the tree means slow and janky experience for the user. It is extremely important that your applications do minimum operations as required. React came up with the solution.

在使用React之前，当我们需要使用浏览器的API(也称为DOM API)时，可以避免在树中进行任何遍历。 原因是：对DOM的任何操作都是单线程的。 因此，树上任何昂贵的操作都意味着用户的速度缓慢且过时。 您的应用程序根据需要执行最少的操作非常重要。 React提出了解决方案。

For further information kindly visit https://reactjs.org/docs/reconciliation.html

欲了解更多信息，请访问https://reactjs.org/docs/reconciliation.html

Happy Hacking !!!

快乐黑客！

翻译自: https://medium.com/@ayushimanoj1201/how-does-react-js-work-a2d13329e99b

javascript工作流