第一章（基本介紹、JSX、React組件）
- react是Facebook開源在github上的JavaScript庫。把用戶界面抽象成一個個組件。引用了JSX語法
虛擬DOM
- react把真實DOM樹轉(zhuǎn)成JavaScript對象樹（虛擬DOM）。
- 虛擬DOM提升了react的性能。還方便和其他平臺集成。
- react承載了構(gòu)建HTML結(jié)構(gòu)化頁面的職責(zé)。是通過創(chuàng)建與更新虛擬元素來管理整個虛擬DOM。
JSX
- 用意在于通過加入增強(qiáng)語法，使JavaScript更快、安全、簡單。
- 虛擬元素的構(gòu)建和更新都是在內(nèi)存中完成的，并不會真正的渲染到DOM中去。
- react創(chuàng)建的虛擬元素分為DOM元素和組件元素兩種。分別對應(yīng)著原生DOM元素與自定義元素。
- 因為元素有公共的表達(dá)方法，我們就可以讓元素們彼此嵌套或混合。這種層層封裝的組件元素就是所謂的react組件，最終可以用遞歸渲染的方式構(gòu)建出完全的DOM元素樹。
- JXS是將HTML語法直接加入到JavaScript代碼中，再通過翻譯器轉(zhuǎn)換到純JavaScript后由瀏覽器執(zhí)行。
JSX基本語法
- JSX是類XML語法的ECMAScript擴(kuò)展，可以說，JSX基本語法被XML囊括，但也有些許不同
XML基本語法
+標(biāo)簽可以任意嵌套。可以清晰地看到DOM樹狀結(jié)構(gòu)及其屬性。
const List = () =>(
<div>
<Title>title</Title>
<ul>
<li>list</li>
<li>list</li>
</ul>
</div>
);
- 注意
- 定義標(biāo)簽時，只允許被一個標(biāo)簽包裹。
- 標(biāo)簽一定要閉合。
元素類型
- HTML標(biāo)簽首字母為小寫，對應(yīng)DOM元素；反之，則對應(yīng)組件元素。
- 依賴的組件中元素不再出現(xiàn)組件元素，就可以將完整的DOM樹構(gòu)建出來。
- JSX還可以通過命名空間的方法使用組件元素，可以解決組件命名沖突和對一組組件進(jìn)行歸類。
- 注釋
- JSX中未定義注釋的轉(zhuǎn)換。不過在一個組件的子元素位置使用注釋要用{}包起來。
const App={
<Nav>
{/* 節(jié)點(diǎn)注釋*/}
<Person
/* 多行
注釋 */
name={window.name}
</Nav>
}
元素屬性
在JSX中，DOM和組件元素都有屬性。
- DOM元素的屬性是標(biāo)準(zhǔn)規(guī)范化屬性，除了class和for。
- class——className
- for——HTMLFor
- 組件元素的屬性是完全自定義的屬性。
- Boolean屬性
- 省略Boolean屬性值會導(dǎo)致JSX任務(wù)bool值設(shè)為了true。
- 展開屬性
- 如果事先不知道設(shè)置那些pros，最好不要設(shè)置。可以用ES6 rest/spread特性來提高效率
可以將
const data = {name:'foo',value:'bar'};
const component = <Component name={data.name} value={data.value} />;
寫為
const data = {name:'foo',value:'bar'};
const component = <Component {...data}/>;
- 自定義HTML屬性
+ 如果在JSX中往DOM元素中傳入自定義屬性，react不會渲染。若要使用，要使用data-前綴。
+ 在自定義標(biāo)簽中任意屬性都是被支持的。
+ 以aria-開頭的網(wǎng)絡(luò)無障礙屬性同樣可正常使用。
JavaScript屬性表達(dá)式
- 屬性值要使用表達(dá)式，只要用{}替換""即可。
HTML轉(zhuǎn)義
React組件
- 組件封裝的基本思路是面向?qū)ο笏枷?。交互基本上以操作DOM為主，邏輯上是結(jié)構(gòu)上需要改變哪里，我們就操作哪里。
- 規(guī)范化標(biāo)準(zhǔn)組件
- 基本的封裝性。
- 簡單的生命周期呈現(xiàn)。
- 明確的數(shù)據(jù)流動。數(shù)據(jù)指的是調(diào)用組件的參數(shù)。
React組件的構(gòu)建
- react組件由屬性（pros）、狀態(tài)（state）以及生命周期方法三個部分組成。
- react自定義元素是庫自己建成的
- react渲染過程包含模板的概率，及JSX
- react組件的實現(xiàn)均在方法與類中。所有可以相互隔離，但不包括樣式
- react引用方式遵循ES6 module標(biāo)準(zhǔn)
React組件的構(gòu)建方法
- React基本上由組件的構(gòu)建方式、組件內(nèi)的屬性狀態(tài)與生命周期方法組成。
- React組件的構(gòu)造方法：React.createClass、ES6 classes和無狀態(tài)函數(shù)。
- React.createClass
- 是Reactz=最傳統(tǒng)、兼容性最好的方法。
const Button = React.createClass({
getDefaultProps(){
return{
color:'blue',
text:'Confirm',
};
},
render(){
const {color,text} = this.props;
return(
<button className={`btn btn-${color}`}>
<em>{text}</em>
</button>
);
}
});
- ES6 classes
- 寫法是通過ES6標(biāo)準(zhǔn)的類語法的方式來構(gòu)建方法
import React,{Component} form 'react';
class Button extends Component{
constructor(props){
super(props);
}
static defaultProps = {
color:'blue',
text:'Confirm',
};
render(){
const {color,text} = this.props;
return(
<button className={`btn btn-${color}`}>
<em>{text}</em>
</button>
);
}
}
- 無狀態(tài)函數(shù)
function Button({color='blue',text='Confirm'}){
return(
<button className={`btn btn-${color}`}>
<em>{text}</em>
</button>
);
}
- 無狀態(tài)組件只傳入props個context兩個參數(shù)。不存在state，也沒有生命周期方法。組件本身即上面兩種React組件構(gòu)建方法中的render方法。不過，像propsTypes和defaultProps還是可以通過向方法設(shè)置靜態(tài)屬性來實現(xiàn)。
