React簡介
專注視圖層
沒有用過react也應(yīng)該有所耳聞react僅僅專注于view層交洗，提供簡潔的視圖層解決方案。與模板引擎有一點(diǎn)不同的地方就是橡淑，react不僅專注解決view層的問題构拳，它又是一個(gè)包括view和controller的庫。虛擬DOM（virtual Dom）
在JS中梁棠，DOM將HTML解析為一個(gè)具有層次性的DOM樹置森，在傳統(tǒng)的開發(fā)模式中，操作DOM符糊，更新視圖凫海，這些操作都是很耗費(fèi)瀏覽器性能，因?yàn)樾阅芎馁M(fèi)最大的就是操作DOM了男娄。在React中行贪，是把真實(shí)的DOM轉(zhuǎn)換成JavaScript對象樹，也就是所謂的虛擬DOM模闲。
在每次數(shù)據(jù)改變后建瘫，react有一個(gè)diff算法，可以重寫計(jì)算virtual dom（也就是JavaScript對象樹）尸折，和上一次的virtual dom進(jìn)行對比啰脚，然后對發(fā)生變化的部分進(jìn)行批量更改。注意：對比DOM也是需要花費(fèi)性能的翁授。
- 函數(shù)式編程
先說下什么叫做命令式編程拣播，命令式編程是解決做什么的問題，就好像是下命令式的收擦。函數(shù)式編程則對應(yīng)的是聲明式編程贮配。react則是將不斷聲明，不斷重復(fù)構(gòu)建的ui抽象成組件塞赂，在特定的參數(shù)下渲染ui界面泪勒。
JSX語法
React為了方便view層組件化，承載了構(gòu)建HTML結(jié)構(gòu)化頁面的職責(zé)宴猾。react主要是通過創(chuàng)建和更新虛擬元素來管理整個(gè)virtual DOM的圆存。
虛擬元素，可以理解為真實(shí)元素的對應(yīng)仇哆。其構(gòu)建和更新都是在內(nèi)存中完成沦辙。在react中創(chuàng)建的虛擬元素可以分為兩類：
- DOM元素 --- 對應(yīng)元素DOM元素
- 組件元素 --- 對應(yīng)自定義元素
- DOM元素
我們使用JavaScript來描述頁面中的DOM元素，這些元素可以簡單的被描述為純粹的JSON對象讹剔，如下：
<button type="button" class="btn btn-default">
<em>Confirm</em>
</button>
其中包括了元素的類型和屬性油讯，如果轉(zhuǎn)為JSON對象：
{
type: 'button',
props: {
className: 'btn btn-default',
children: {
type: 'em',
props: {
children: 'Confirm'
}
}
}
}
這樣我們就可以在JavaScript中創(chuàng)建virtual DOM元素了详民。
-
組件元素
我們可以將上面的button元素進(jìn)行封裝，得到一種構(gòu)建按鈕的公共方法：
const Button = ({color, text}) => {
return {
type: button,
props: {
className: `btn btn-${color}`,
children: {
type: 'em',
props:{
children: text
}
}
}
}
}
我們可以換一種思維考慮陌兑，以上的Button方法其實(shí)也可以作為元素存在沈跨，方法名對應(yīng)了元素類型，參數(shù)對應(yīng)了DOM元素屬性兔综，所以這樣構(gòu)建的元素就是自定義類型元素或者是組件元素饿凛。
這也是react的核心思想之一，因?yàn)橛泄驳谋磉_(dá)方法软驰，我們可以讓層層嵌套的元素封裝成組件涧窒，然后用遞歸渲染的方式進(jìn)行構(gòu)建DOM樹。
如下看更深層次的嵌套:
const DangerButton = (text) => ({
type: Button,
props: {
color: 'red',
children: text
}
})
const DeletAccount = () => ({
type: 'div',
props: {
children: [
{
type: 'p',
props: {children: 'are you sure?'}
},
{
type: DangerButton,
props: {children: 'Confirm'}
},
{
type: Button,
props: {
color: 'red',
children: text
}
}
]
}
})
以上我們可以看到實(shí)現(xiàn)的一個(gè)提示語和兩個(gè)按鈕的功能模塊碌宴，可以見得這樣的寫法是很難以接受的杀狡，那么我們需要HTML的寫法來提供支持，所以產(chǎn)生了JSX語法贰镣。
const DeletAccount = () => (
<div>
<p>are you sure?</p>
<DangerButton>Confirm</DangerButton>
<Button color='blue'>Cancle</Button>
</div>
)
