Shulou(Shulou.com)06/01 Report--

This article introduces the knowledge of "how to use js objects to generate dom structures". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

First of all, let's start with the origin. When we do web development, when the data changes, we update the dom to present the latest data to the front-end users. The flow chart is as follows:

Directly manipulate dom after the data is changed. Let's take a look at the requirements for example. For example, a list has a button under the list that clicks load more:

Click load more, an ajax request will be sent to request more data, and then render the data to the page. What do we usually do? the code snippet is as follows:

We see that after each data update, we generate html fragments with the help of templates to get the stitching of the old and new contents of the list. Here we think about it and find that the existing list information should not be re-rendered.

Putting the above case aside, let's first understand what a virtual dom is. To put it simply, use a js object to describe the dom structure. The example is as follows:

It has the following dom structure:

Item1 item2

Represented by a js object as follows:

{

Tag: 'ul', attrs: {id:'list'}, children: [{tag:' li', attrs: {className: 'item'}, children: [' item1']} {tag: 'li', attrs: {className:' item'}, children: ['item2']}]}

Since the dom structure can be represented as a js object, the dom structure can also be generated from the js object.

Let's take a look at another picture, in which we generate a js object from the data and ui to represent the dom structure, that is, Virtual Dom, and then generate the real Dom based on this js object (Virtual Dom).

Virtual dom is the js object mentioned above, and we add an intermediate layer between the data and the real dom, similar to sandwich biscuits.

What's the advantage of doing this? When we observe the above process, it seems that it is more complicated than directly operating dom. Don't worry. Here we also introduce another concept, diff algorithm. Why introduce this diff algorithm?

This is because of the rendering mechanism of virtual dom, so what is the rendering mechanism of virtual dom?

When we change the data, it's not what we thought: it immediately becomes a new virtual dom, and then renders it into a real Dom based on the new virtual dom. But after the data is changed, after the new virtual dom is generated, the new virtual dom is compared with the old virtual dom through the diff algorithm, the part that needs to be re-rendered is obtained, and then the real dom is updated to a minimum.

The process is shown in the following figure:

Then, let's take a look at the click above to load more cases, and with the help of virtual dom, then the pseudo-code can be done like this:

The virtual dom rendering process is represented in code as follows:

/ / 1. Build virtual DOMvar tree = el ('div', {' id': 'container'}, [el (' H2, {style: 'color: blue'}, [' simple virtal dom']), el ('paired, [' Hello, virtual-dom']), el ('ul', [el (' li')]))

/ / 2. Build a real DOMvar root = tree.render () document.body.appendChild (root) through virtual DOM

/ / 3. Change the data and generate a new virtual DOMvar newTree = el ('div', {' id': 'container'}, [el (' H2, {style: 'color: red'}, [' simple virtal dom']), el ('paired, [' Hello, virtual-dom']), el ('ul', [el (' li'), el ('li')]))

/ / 4. Compare the different var patches = diff (tree, newTree) of two virtual DOM trees

/ / 5. Apply the change patch (root, patches) on the real DOM element

After talking about virtual dom, I once again mentioned the two most popular front-end frameworks, Vue and react, both of which use virtual dom. What is the difference between the virtual dom used by the two frameworks?

The main reason is that the strategy for updating virtual dom is different:

In vue, the data is maintained into observable data, each item of the data is collected by getter, and then the dependency is converted into watcher and saved in the closure. After the data is modified, the setter method of the data is triggered, and then all the watcher is called to modify the old virtual dom to generate a new virtual dom. Then the diff algorithm is used to get the difference between the new and old dom, and update the real dom according to different changes.

The update strategy of react is relatively rough, which can be expressed by a formula: virtualDom = h (data). When the data changes, a new virtual dom is generated by calling setState (instead of setter, getter, watcher for each data society like vue), and then compare the new and old dom to get the difference between the new and old dom and update the real dom. However, react exposes developers to a lifecycle function: shouldcomponentupdate, which can decide whether or not to re-render the data according to the developer's needs.

React is a functional component idea, when you setstate will traverse, diff the current component of all the sub-node sub-components, this way is very expensive, to make reasonable use of shouldcomponentupdate.

Vue sets setter, getter, and watcher for each data, and when there is enough data, it is not as efficient as react.

So when choosing a framework, to measure, if the page has a large amount of data and changes, choose react, and if the project is medium-sized and want to develop quickly, choose vue.

That's all for "how to use js objects to generate dom structures". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.