React的思想

时间：2022-08-31 06:02:12

react是什么

react是开发出来用来促进UI交互的，创建带有状态的、可复用的UI组件的IU库

react不仅可以在浏览器端使用，还可以在服务器端使用，还可以两端一起使用。

react的底层概念：运用的是virtual DOM（虚拟DOM）,然后根据UI组件的状态变化，有选择的渲染DOM的节点树，尽可能的操作最少的DOM来更新组件。

虚拟DOM是怎么工作的

1.在Web开发中，需要将数据的变化实时反映到UI上，就需要对DOM进行操作，但是复杂频繁的DOM操作会产生性能瓶颈。所以DOM就引入了虚拟DOM的机制。

实际上，在React中，render方法得到的实际上不是真实的DOM节点，而仅仅是轻量级的JavaScript对象，我们称之为虚拟DOM.

2.虚拟DOM是React的一大亮点，具有批处理（batching）和高效的Diff算法。无需担心性能问题而毫无顾忌的随时刷新整个页面，由虚拟DOM来确保只对界面上真正变化的部分进行实际的DOM操作。

了解React虚拟DOM的机制就可以更好的理解React组件的生命周期，而且对于进一步优化React组件的生命周期。

如果没有虚拟DOM，就相当于重置innerHTML,在数据变动比较大的情况下，比较合理，但是如果只有一小部分数据变化时，也要重置整个innerHTML,这就造成了很大的浪费。

两者的比较

innerHTML: render html string + 重新创建所有的DOM元素

virtual DOM: render Virtual DOM + diff + 必要的DOM更新。

3.和DOM操作比起来，js计算还是非常便宜的。Virtual DOM + diff 显然要比render string慢，但是后面的DOM操作就比较便宜了。

DOM完全不属于JavaScript，也不在JavaScript引擎中，JavaScript实际上是一个独立的引擎，而DOM其实是浏览器引出的一组让JavaScript操作HTML文档的API而已，在即时编译的时代下，调用DOM的开销是很大的，而Virtual DOM的执行完全都在JavaScript引擎中，不存在这个开销。

4.React.js相对于直接操作原生DOM有很大的性能优势，很大程度上归功于虚拟DOM的batching和diff，batching把所有的DOM操作搜集起来，一次性提交给真实的DOM,

什么是虚拟DOM

React中，将真实的DOM抽象成一个JavaScript对象，也就是虚拟DOM,比如构造一个虚拟的DOM.

var element = {

    element: 'ul',

    props: {

        id: 'list'

    },

    children: [

        {element:'li',props:'li1',children:['这是第一个li']},

        {element:'li',props:'li2',children:['这是第二个li']}

    ]

}

//element.js

function Element(tagName,props,children){

    this.tagName = tagName;

    this.props = props;

    this.children = children;

}

module.exports = function(tagName,props,children){

    return new Element(tagName,props,children)

}

var el = require('./element');

var ul = el('ul',{id:'ulist'},[

        el('li',{id:'list1'},['1list']),

        el('li',{id:'list2'},['list2'])

])

//ul只是一个JavaScript对象表示的DOM结构，页面上并没有这个结构，可以根据这个ul构建真正的<ul>

Element.prototype.render = function(){

    var d = document.createElement(tagName);

    //获取props

    var props = this.props;

    for (key in props) {

        var propValue = props[key];

        d.setAttribute(key,propValue);

    }

    //获取children

    var children = this.children || [];

    children.forEach(function(child){

      // if (child instanceof Element){

        //     tnode = child.render();

        // }

        // else{

        //     tnode = document.createTextNode(child);

        // }

        var childEl = (child instanceof Element) ? child.render():document.createTextNode(child)

        d.appendChild(childEl);

    })

    return d;

}

var ulRoot = ul.render();

document.body.appendChild(ulRoot);

//ulRoot是真正的DOM节点，把它塞入文档中，这样body里面就有了真正的<ul>的DOM结构。

在React中，也有一个render函数，当React中有state转移的过程，所以每次state有变化之后，就会触发render函数，重新构造一个虚拟DOM树，对比新旧DOM树的差别，记录下差别，然后只针对差异部分对应的真实DOM进行操作。先总结到这里，下一篇博客，详细讲解Diff算法。

相关文章