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);//獲取propsvar props = this.props;for (key in props) {var propValue = props[key];d.setAttribute(key,propValue);}//獲取childrenvar 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算法。

轉載于:https://www.cnblogs.com/sminocence/p/8284115.html

總結

以上是生活随笔為你收集整理的React的思想的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。