React簡(jiǎn)介

• 專(zhuān)注視圖層
  沒(méi)有用過(guò)react也應(yīng)該有所耳聞react僅僅專(zhuān)注于view層，提供簡(jiǎn)潔的視圖層解決方案。與模板引擎有一點(diǎn)不同的地方就是，react不僅專(zhuān)注解決view層的問(wèn)題，它又是一個(gè)包括view和controller的庫(kù)。

• 虛擬DOM（virtual Dom）
  在JS中，DOM將HTML解析為一個(gè)具有層次性的DOM樹(shù)，在傳統(tǒng)的開(kāi)發(fā)模式中，操作DOM，更新視圖，這些操作都是很耗費(fèi)瀏覽器性能，因?yàn)樾阅芎馁M(fèi)最大的就是操作DOM了。在React中，是把真實(shí)的DOM轉(zhuǎn)換成JavaScript對(duì)象樹(shù)，也就是所謂的虛擬DOM。

在每次數(shù)據(jù)改變后，react有一個(gè)diff算法，可以重寫(xiě)計(jì)算virtual dom（也就是JavaScript對(duì)象樹(shù)），和上一次的virtual dom進(jìn)行對(duì)比，然后對(duì)發(fā)生變化的部分進(jìn)行批量更改。注意：對(duì)比DOM也是需要花費(fèi)性能的。

• 函數(shù)式編程
  先說(shuō)下什么叫做命令式編程，命令式編程是解決做什么的問(wèn)題，就好像是下命令式的。函數(shù)式編程則對(duì)應(yīng)的是聲明式編程。react則是將不斷聲明，不斷重復(fù)構(gòu)建的ui抽象成組件，在特定的參數(shù)下渲染ui界面。

JSX語(yǔ)法

React為了方便view層組件化，承載了構(gòu)建HTML結(jié)構(gòu)化頁(yè)面的職責(zé)。react主要是通過(guò)創(chuàng)建和更新虛擬元素來(lái)管理整個(gè)virtual DOM的。

虛擬元素，可以理解為真實(shí)元素的對(duì)應(yīng)。其構(gòu)建和更新都是在內(nèi)存中完成。在react中創(chuàng)建的虛擬元素可以分為兩類(lèi)：

1. DOM元素 --- 對(duì)應(yīng)元素DOM元素
2. 組件元素 --- 對(duì)應(yīng)自定義元素

• DOM元素

我們使用JavaScript來(lái)描述頁(yè)面中的DOM元素，這些元素可以簡(jiǎn)單的被描述為純粹的JSON對(duì)象，如下：

   <button type="button" class="btn btn-default">
       <em>Confirm</em>
   </button>

其中包括了元素的類(lèi)型和屬性，如果轉(zhuǎn)為JSON對(duì)象：

{
        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í)也可以作為元素存在，方法名對(duì)應(yīng)了元素類(lèi)型，參數(shù)對(duì)應(yīng)了DOM元素屬性，所以這樣構(gòu)建的元素就是自定義類(lèi)型元素或者是組件元素。
這也是react的核心思想之一，因?yàn)橛泄驳谋磉_(dá)方法，我們可以讓層層嵌套的元素封裝成組件，然后用遞歸渲染的方式進(jìn)行構(gòu)建DOM樹(shù)。

如下看更深層次的嵌套:

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è)提示語(yǔ)和兩個(gè)按鈕的功能模塊，可以見(jiàn)得這樣的寫(xiě)法是很難以接受的，那么我們需要HTML的寫(xiě)法來(lái)提供支持，所以產(chǎn)生了JSX語(yǔ)法。

const DeletAccount = () => (
        <div>
            <p>are you sure?</p>
            <DangerButton>Confirm</DangerButton>
            <Button color='blue'>Cancle</Button>
        </div>
    )