React的核心機(jī)制之一就是可以在內(nèi)存中創(chuàng)建虛擬的DOM元素活逆。React利用虛擬DOM來減少對實(shí)際DOM的操作從而提升性能拯钻。

JSX簡介

JSX就是Javascript和XML結(jié)合的一種格式。React發(fā)明了JSX炒嘲，利用HTML語法來創(chuàng)建虛擬DOM蹬铺。

當(dāng)遇到<尝哆，JSX就當(dāng)HTML解析，遇到{就當(dāng)JavaScript解析甜攀。

如下(JS寫法)

varchild1 = React.createElement('li',null, 'First Text Content');varchild2 = React.createElement('li',null, 'Second Text Content');varroot = React.createElement('ul', { className: 'my-list' }, child1, child2);

等價于(JSX寫法)

varroot =(

? ?
• First Text Content
? ?
• Second Text Content
?

后者將XML語法直接加入JS中,通過代碼而非模板來高效的定義界面秋泄。之后JSX通過翻譯器轉(zhuǎn)換為純JS再由瀏覽器執(zhí)行。在實(shí)際開發(fā)中规阀，JSX在產(chǎn)品打包階段都已經(jīng)編譯成純JavaScript恒序，JSX的語法不會帶來任何性能影響。另外谁撼，由于JSX只是一種語法歧胁，因此JavaScript的關(guān)鍵字class, for等也不能出現(xiàn)在XML中，而要如例子中所示厉碟，使用className, htmlFor代替喊巍，這和原生DOM在JavaScript中的創(chuàng)建也是一致的。JSX只是創(chuàng)建虛擬DOM的一種語法格式而已,除了用JSX,我們也可以用JS代碼來創(chuàng)建虛擬DOM.

JSX語法介紹

大括號里是JavaScript箍鼓，不要加引號崭参，加引號就會被當(dāng)成字符串。

三元表達(dá)式

JSX本身就和XML語法類似袄秩，可以定義屬性以及子元素阵翎。唯一特殊的是可以用大括號來加入JavaScript表達(dá)式.例如:

varperson = ;

上述代碼經(jīng)過JSX編譯后會得到：

varperson =React.createElement(

Person,

{name: window.isLoggedIn? window.name : ''}

);

數(shù)組遞歸

數(shù)組循環(huán),數(shù)組的每個元素都返回一個React組件逢并。

varlis =this.todoList.todos.map(function(todo) {return(

});varul =(

{lis}

JSX中綁定事件

JSX讓事件直接綁定在元素上之剧。

Submit

和原生HTML定義事件的唯一區(qū)別就是JSX采用駝峰寫法來描述事件名稱，大括號中仍然是標(biāo)準(zhǔn)的JavaScript表達(dá)式砍聊，返回一個事件處理函數(shù)背稼。

React并不會真正的綁定事件到每一個具體的元素上，而是采用事件代理的模式：在根節(jié)點(diǎn)document上為每種事件添加唯一的Listener玻蝌，然后通過事件的target找到真實(shí)的觸發(fā)元素蟹肘。這樣從觸發(fā)元素到頂層節(jié)點(diǎn)之間的所有節(jié)點(diǎn)如果有綁定這個事件词疼，React都會觸發(fā)對應(yīng)的事件處理函數(shù)。這就是所謂的React模擬事件系統(tǒng)帘腹。盡管整個事件系統(tǒng)由React管理贰盗，但是其API和使用方法與原生事件一致。

JSX中使用樣式

在JSX中使用樣式和真實(shí)的樣式也很類似阳欲，通過style屬性來定義舵盈，但和真實(shí)DOM不同的是，屬性值不能是字符串而必須為對象球化。

例如:

或者

varstyle ={

color:'#ff0000',

fontSize:'14px'};varnode =

要明確記住,{}里面是JS代碼,這里傳進(jìn)去的是標(biāo)準(zhǔn)的JS對象秽晚。在JSX中可以使用所有的的樣式，基本上屬性名的轉(zhuǎn)換規(guī)范就是將其寫成駝峰寫法筒愚，例如“background-color”變?yōu)椤癰ackgroundColor”, “font-size”變?yōu)椤癴ontSize”赴蝇，這和標(biāo)準(zhǔn)的JavaScript操作DOM樣式的API是一致的。

HTML轉(zhuǎn)義

在組件內(nèi)部添加html代碼,并將html代碼渲染到頁面上巢掺。React默認(rèn)會進(jìn)行HTML的轉(zhuǎn)義句伶，避免XSS攻擊，如果要不轉(zhuǎn)義陆淀，可以這么寫：

varcontent='content';

React.render(

);

自定義組件

組件定義之后熄阻，可以利用XML語法去聲明，而能夠使用的XML Tag就是在當(dāng)前JavaScript上下文的變量名,該變量名就是組件名稱倔约。