React的思想

Posted 2020-10-20 sminocence

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算法。