摘要：事件機(jī)制實(shí)現(xiàn)了自己的一套事件代理和處理機(jī)制，這套機(jī)制是符合標(biāo)準(zhǔn)的。事件代理并沒(méi)有將事件處理添加到相應(yīng)的每個(gè)節(jié)點(diǎn)上。當(dāng)啟動(dòng)時(shí)，在根節(jié)點(diǎn)上監(jiān)聽(tīng)所有的事件，并管理事件到相應(yīng)節(jié)點(diǎn)的映射。

先看個(gè)簡(jiǎn)單的例子：

var HelloWorld = React.createClass({
    render: function () {
        return (
            
{this.props.content}
        )
    }
});

React.render(
    ,
    document.body
);

看代碼就很容易理解：通過(guò)this.props我們可以拿到組件使用時(shí)的屬性。稍微改變下代碼，我們打印出this.props瞅瞅：

var HelloWorld = React.createClass({
    render: function () {
        return (
            
{JSON.stringify(this.props)}
        )
    }
});

React.render(
    ,
    document.body
);

瀏覽器頁(yè)面效果：

可以看出this.props就是組件的屬性集合，稍微改下代碼，再來(lái)看看：

var HelloWorld = React.createClass({
    render: function () {
        return (
            
{JSON.stringify(this.props)}
        )
    }
});

React.render(
    
        1
        2
    ,
    document.body
);

瀏覽器頁(yè)面效果：

這個(gè)時(shí)候多了一個(gè)children的屬性，React將組件的子節(jié)點(diǎn)封裝到了children屬性中，如果想獲取到子節(jié)點(diǎn)的內(nèi)容，可以這么寫：

var HelloWorld = React.createClass({
    render: function () {
        return (
            

            {
                this.props.children.map(function (child) {
                        return child;
                })}
            
        )
    }
});

React.render(
    
        1
        2
    ,
    document.body
);

  
當(dāng)子節(jié)點(diǎn)只有一個(gè)的時(shí)候直接通過(guò)this.props.children獲取子節(jié)點(diǎn)。當(dāng)子節(jié)點(diǎn)的個(gè)數(shù)大于1，this.props.children是一個(gè)數(shù)組。

綜上我們可以看出，React將節(jié)點(diǎn)屬性和子節(jié)點(diǎn)都封裝到props當(dāng)中，我們可以通過(guò)this.props獲取到。在React的設(shè)定中，props是不可變的，當(dāng)props屬性確定后，我們不應(yīng)該再去手動(dòng)修改它。

看下這個(gè)代碼：

var Hello = React.createClass({
    render: function () {
        return (
            

        )
    }
});

React.render(
    
        
content
    ,
    document.body
);

咋一看是不是覺(jué)得頁(yè)面渲染出來(lái)應(yīng)該是這個(gè)效果：

    
content

實(shí)際上渲染出來(lái)是這樣的：

看頁(yè)面的渲染效果:我們要找到根節(jié)點(diǎn)，關(guān)注它的render方法的返回值。至于使用時(shí)的嵌套結(jié)構(gòu)，看完props應(yīng)該明白，這些都是組件屬性，想要使用的話，請(qǐng)通過(guò)this.props.children.

state是同UI交互最重要的屬性，看個(gè)簡(jiǎn)單的例子，點(diǎn)擊按鈕，切換按鈕的顏色：

var ColorButton = React.createClass({
    getInitialState: function () {
        return {bColor: "green"};
    },
    render: function () {
        return (
            click
        )
    },
    handleClick: function (event) {
        this.setState({bColor: this.state.bColor === "green" ? "red" : "green"});
    }
});

React.render(
    ,
    document.body
);

getInitialState是用來(lái)初始化state，handleClick是用來(lái)處理我們點(diǎn)擊事件的。

React實(shí)現(xiàn)了自己的一套事件代理和處理機(jī)制，這套機(jī)制是符合W3C標(biāo)準(zhǔn)的。通過(guò)這套機(jī)制，React有兩個(gè)很重要的特點(diǎn)：

所有的事件處理函數(shù)當(dāng)中的this指向組件的實(shí)例。如果想要拿到當(dāng)前操作的DOM，通過(guò)參數(shù)event獲取。

var ColorButton = React.createClass({
    getInitialState: function () {
        return {name: "button"};
    },
    render: function () {
        return (
            click
        )
    },
    handleClick: function (event) {
        console.log(this.state);
        console.log(event.target);
    }
});

React.render(
    ,
    document.body
);

React并沒(méi)有將事件處理添加到相應(yīng)的每個(gè)節(jié)點(diǎn)上。當(dāng)React啟動(dòng)時(shí)，在根節(jié)點(diǎn)上監(jiān)聽(tīng)所有的事件，并管理事件到相應(yīng)節(jié)點(diǎn)的映射。當(dāng)組件mounted或者unmounted時(shí)，事件將會(huì)被添加到映射關(guān)系或者被刪除。我感覺(jué)，有點(diǎn)jQuery的事件代理的意思：

#糟糕的寫法
$("li").on("click", function () {
    //todo
});

//好點(diǎn)的寫法
$("ul").on("click", "li", function () {
    //todo
});

React將UI簡(jiǎn)單的看作狀態(tài)機(jī)。看UI看作各種各樣的狀態(tài)，并在各種狀態(tài)間切換，很容易保持UI的一致性。在React中，你只要改變組件的狀態(tài)，就會(huì)重新渲染UI，React會(huì)在最有效的方式下更新DOM。

通過(guò)調(diào)用setState(data, callback)方法，改變狀態(tài)，就會(huì)觸發(fā)React更新UI。大部分情況下，我們不需要提供callback函數(shù)。React會(huì)自動(dòng)的幫我們更新UI。

  
后面在好好看看這個(gè)callback的功能和調(diào)用時(shí)機(jī)。

大部分的組件應(yīng)該從props屬性中獲取數(shù)據(jù)并渲染。但有的時(shí)候組件得相應(yīng)用戶輸入，同服務(wù)器交互，這些情況下會(huì)用到state。React的官方說(shuō)法是：盡可能的保持你的組件無(wú)狀態(tài)化。為了實(shí)現(xiàn)這個(gè)目標(biāo)，得保持你的狀態(tài)同業(yè)務(wù)邏輯分離，并減少冗余信息，盡可能保持組件的單一職責(zé)。

React官方推薦的一種模式就是：構(gòu)建幾個(gè)無(wú)狀態(tài)的組件用來(lái)渲染數(shù)據(jù)，在這些之上構(gòu)建一個(gè)有狀態(tài)的組件同用戶和服務(wù)交互，數(shù)據(jù)通過(guò)props傳遞給無(wú)狀態(tài)的組件。我的理解大概就是這樣：

var RenderComponent = React.createClass({
    render: function () {
        return (
            

                {
                    this.props["data-list"].map(function (item) {
                        return (
{item}
)
                    })
                }
            
        )
    }
});


var StateComponent = React.createClass({
    getInitialState: function () {
        return {list: ["xxx", "yyy"]};
    },
    render: function () {
        return (
            

                click
                
            

        )
    },
    handleClick: function () {
        this.setState({list: [1, 2, 3]});
    }
});

React.render(
    ,
    document.body
);

UI交互會(huì)導(dǎo)致改變的數(shù)據(jù)。

計(jì)算過(guò)的數(shù)據(jù)

組件

從props復(fù)制的數(shù)據(jù)

state應(yīng)保含最原始的數(shù)據(jù)，比如說(shuō)時(shí)間，格式化應(yīng)該交給展現(xiàn)層去做。

組件應(yīng)在render方法里控制。