React學習 元素渲染

react ：元素構成元件，元件又構成應用。

react 元素就是普通的js物件(俗稱:虛擬dom)。

react 元素不是真實的 dom 元素，所以也沒辦法直接呼叫 dom 上原生的 api。

渲染過程：react元素 描述 虛擬dom，再根據 虛擬dom 渲染出 真實dom。1、虛擬 dom ：就是用 js 物件結構模擬出 html 中 dom 結構，批量的增刪改查先直接操作 js 物件，最後更新到真正的 dom 樹上。因為直接操作 js 物件的速度要比操作 dom 的那些 api 要快。

2、react 元素就是js物件，它用來告訴 react，你希望哪些東西顯示在頁面中。

元素就是用來描述 dom 節點或者 react 元件的純物件。元素可以在自己的屬性中包含其它元素。建立乙個元素的成本很低，一旦元素被建立之後，就不再發生變化。

例如：我們可以使用 jsx 語法，建立乙個 react 元素 element:

const element = classname='greeting'>hello, worldh1>;

上面的例子編譯後的結果為：

const element = react.createelement(

'h1',
,  'hello, world!'
);

const element = ，

_context: object,
_owner: null,
key: null,  
ref: null, 
}

const element = hello, worldh1>;

react

.createelement(
type,
[props],
[...children]
)

jsx 語法就是用react.createelement()來構建 react 元素的。

新新增的屬性會併入原有屬性，同屬性名新的會替換舊的，傳入到返回的新元素中。

react

.cloneelement(
element,
[props],
[...children]
)

let element = ;

let element2 = react.cloneelement(
element,
,'哈哈哈哈'
);reactdom.render(element2,document.getelementbyid('root'));

我們檢視下此時被編譯後的html,我們發現id，class屬性合併，且子節點被替換。

id="myid2"

class="myclass">哈哈哈哈h1>

例1、

id="root">

div>

const element = ;

reactdom.render(
element,
document.getelementbyid('root')
);

例2、

id="root">

div>
type="text/babel">
var child1 = react.createelement('li', null, 'first text content');
var child2 = react.createelement('li', null, 'second text content');
var child3 = react.createelement('li', null, 'third text content');
var root = react.createelement('ul', , child1, child2, child3);
//可以認為第三個引數是乙個陣列，陣列中的元素就是該節點的所有子節點。
//所以還可以為 var root = react.createelement('ul', , [child1, child2, child3]);
reactdom.render(
root,
document.getelementbyid('root')
);script>

react 元素是不可變的. 一旦你建立了乙個元素, 就不能再修改其子元素或任何屬性。

更新 ui 的唯一方法是建立乙個新的元素, 並將其傳入 reactdom.render() 方法.

id="root">

div>
type="text/babel">
function
tick
() .h2>
div>
);reactdom.render(
element,
document.getelementbyid('root'));}
setinterval(tick, 1000);
script>

react 只更新必需要更新的部分。

react dom 會將元素及其子元素與之前版本逐一對比, 並只對有必要更新的 dom 進行更新, 以達到 dom 所需的狀態。

(react判斷dom是否變化的方式很暴力：遍歷所有dom節點，一邊遍歷一邊判斷dom前後是否相等) 這裡涉及到diff演算法，我們暫時不做解釋。

我們可以拿上面例子說事:

即使我們我們每隔 1 秒都重建了整個元素, 但實際上 react dom 只更新了修改過的文字節點.

React元素渲染

元素渲染 元素是構成react應用的最小單位。元素用來描述你在螢幕上看到的內容 const element 與瀏覽器的dom元素不同，react當中的元素事實上是普通的物件，reactdom可以確保瀏覽器的資料內容與react元素保持一致。頁面中新增乙個id root 的div 在此div中的所有內...

React之元素渲染

元素渲染 元素是構成 react 應用的最小單位，它用於描述螢幕上輸出的內容。const element 與瀏覽器的 dom 元素不同，react 當中的元素事實上是普通的物件，react dom 可以確保 瀏覽器 dom 的資料內容與 react 元素保持一致。將元素渲染到 dom 中 首先我們在...

react學習經驗總結（元素渲染）

const element 與瀏覽器的 dom 元素不同，react 當中的元素事實上是普通的物件，react dom 可以確保 瀏覽器 dom 的資料內容與 react 元素保持一致。首先我們在乙個 html 頁面中新增乙個 id example 的 在此 div 中的所有內容都將由 react ...