摘要：組件關(guān)注的只應(yīng)該是狀態(tài)，不同的狀態(tài)呈現(xiàn)不同的表現(xiàn)形式。組件一切都是組件倡導(dǎo)開發(fā)者將切分成一個(gè)個(gè)組件從而達(dá)到松耦合及重用的目的。只不過的命名是進(jìn)入狀態(tài)之前跟進(jìn)入狀態(tài)之后。

原文寫于 2015-04-15 https://github.com/kuitos/kuitos.github.io/issues/21

要說2015年前端屆最備受矚目的技術(shù)是啥，當(dāng)然非ReactJs莫屬。作為一個(gè)只關(guān)注最前沿前端技術(shù)的系列，自然少不了關(guān)于它的介紹。

React最初來自Facebook內(nèi)部的廣告系統(tǒng)項(xiàng)目，項(xiàng)目實(shí)施過程中前端開發(fā)遇到了巨大挑戰(zhàn)，代碼變得越來越臃腫且混亂不堪，難以維護(hù)。于是痛定思痛，他們決定拋開很多所謂的“最佳實(shí)踐”，重新思考前端界面的構(gòu)建方式，于是就有了React。

React的設(shè)計(jì)依托于Facebook另一個(gè)叫做FLUX的項(xiàng)目，F(xiàn)LUX是一個(gè)為了解決Facebook在MVC應(yīng)用中碰到的工程性問題而生的設(shè)計(jì)模式，主要思路是單向數(shù)據(jù)流。解析 Facebook 的 Flux 應(yīng)用架構(gòu)

React是MVC中薄薄的一層V，它只關(guān)注表現(xiàn)層，對(duì)組件化開發(fā)有很大的裨益。

virtual dom react中的組件跟頁面真實(shí)dom之間會(huì)有一層virtual dom(虛擬dom)，virtual dom是內(nèi)存中的javascript對(duì)象，它具有與真實(shí)dom一致的樹狀結(jié)構(gòu)。開發(fā)者每次試圖更新view，react都會(huì)重新構(gòu)建virtual dom樹，然后將其與上一次virtual dom樹作對(duì)比，依靠react強(qiáng)勁的核心算法dom diff找出真正發(fā)生變更的節(jié)點(diǎn)，最后映射到真實(shí)dom上，這也是react號(hào)稱性能高效的秘密所在。依賴于virtual dom，對(duì)React而言，每一次界面的更新都是整體更新，而不是層疊式更新(即一個(gè)復(fù)雜的，各個(gè)UI之間可能存在互相依賴的時(shí)候，每一次獨(dú)立的更新可能會(huì)引發(fā)其他UI的變化，假如我們的目的是更新C的數(shù)據(jù)，邏輯流很可能是這樣的 A -->B-->C-->A-->B–>C，這種情況下中間狀態(tài)的DOM操作就是極大的浪費(fèi))。

單向數(shù)據(jù)流 flux架構(gòu)下的數(shù)據(jù)流呈現(xiàn)出一種單向、閉環(huán)的流動(dòng)路線，使得一切行為變的可預(yù)測(cè)，也能更好的定位錯(cuò)誤發(fā)生點(diǎn)。react官方的賣點(diǎn)之一就是 友好的錯(cuò)誤提示(這是在針對(duì)angular么哈哈)

每個(gè)組件都是狀態(tài)機(jī) react認(rèn)為組件的數(shù)據(jù)模型是不可變的，組件的屬性不應(yīng)該被修改。組件關(guān)注的只應(yīng)該是狀態(tài)，不同的狀態(tài)呈現(xiàn)不同的表現(xiàn)形式。每個(gè)狀態(tài)下的組件都是一個(gè)virtual dom對(duì)象，這樣react就能直接通過等號(hào)對(duì)比對(duì)象地址判斷組件是否被修改從而是否需要更新dom，這也是其能提高性能的原因之一(空間換時(shí)間)。

組件 一切都是組件 react倡導(dǎo)開發(fā)者將view切分成一個(gè)個(gè)組件從而達(dá)到松耦合及重用的目的。開發(fā)者構(gòu)建頁面只需要排列組合就行了。

immutable object React提倡使用只讀數(shù)據(jù)來建立數(shù)據(jù)模型，每次更新都是new object，這也是dom diff 性能強(qiáng)勁的密碼所在(===即可判斷兩個(gè)對(duì)象是否相等，而不需要深度遍歷)。參考資料 immutable.js

JSX 不是在js里面寫html，jsx是xml的javascript表示法。

說了這么多理論性的東西，還是直接來上代碼吧

首先你需要reactjs的開發(fā)環(huán)境。

bower install react

腳本中引入react，由于我們需要使用jsx語法提高開發(fā)效率，所以還需要引入能講jsx轉(zhuǎn)化為javascript的庫
不過這樣JSXTransformer每次都會(huì)在app打開的時(shí)候做轉(zhuǎn)換工作，并不適合生產(chǎn)環(huán)境，轉(zhuǎn)換工作應(yīng)該放在服務(wù)端進(jìn)行，借助jsx工具

npm install -g react-tools
jsx --watch src/ build/

然后頁面依賴改成這樣
node插件會(huì)在你開發(fā)的時(shí)候自動(dòng)將源碼轉(zhuǎn)成javascript文件到指定目錄

// Hello World
React.render(
    
Hello, world!
,
    document.getElementById("example")
);

React.render() 將模版轉(zhuǎn)換成html并插入到指定節(jié)點(diǎn) 參見上文的hello world示例

React解析引擎的規(guī)則就是遇到<符號(hào)就以jsx語法解析，遇到{就以javascript語法解析。比如這樣

var array = [
    
Example 2
,
    
Hello World
];
 
React.render(
    
{array}
,
    document.getElementById("example2")
);

通過查看轉(zhuǎn)換后的代碼，我們可以看到他摘下面具后長(zhǎng)這樣

var array = [
    React.createElement("h1", null, "Example 2"),
    React.createElement("h2", null, "Hello World")
];
 
React.render(
    React.createElement("div", null, array),
    document.getElementById("example2")
);

如何創(chuàng)建組件

var HelloWorldComponent = React.createClass({
    render: function () {
        return 
React Component {this.props.author}
;
    }
});
 
React.render(
    ,
    document.getElementById("hello")
);

通過React.createClass可以創(chuàng)建一個(gè)關(guān)聯(lián)了虛擬dom的組件對(duì)象，每次組件數(shù)據(jù)更新便會(huì)調(diào)用組件的 render 方法重新渲染dom。

組件對(duì)象的props屬性
上面一個(gè)例子我們看到在組件render方法中我們可以通過this.props.xx的方式拿到組件上關(guān)聯(lián)的屬性。另外需要額外提到的是，this.props有一個(gè)特殊屬性children，它指向組件的子節(jié)點(diǎn)集合，like this

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

                {
                    this.props.children.map(function (child) {
                        return 
{child}
                    })
                }
            
        );
    }
});
 
React.render(
    
        百度
        谷歌
    ,
    document.getElementById("example3")
);

頁面渲染的結(jié)果就是一個(gè) ol 列表中還有兩個(gè)li，每個(gè)li中包含一個(gè)超鏈接。通過這里我們也可以看出，在jsx中｛｝是會(huì)getValue的

獲取真實(shí)dom React.findDOMNode()

var counter = 0;
var Button = React.createClass({
 
    handleClick: function () {
        React.findDOMNode(this.refs.input).focus();
    },
 
    render: function () {
 
        return (
            

                
                
            
        );
 
    }
});
 
React.render(
    ,
    document.getElementById("button")
);

組件狀態(tài) this.state

var Toggle = React.createClass({
 
    getInitialState: function () {
        return {liked: false};
    },
 
    handleClick: function (event) {
        this.setState({liked: !this.state.liked});
    },
 
    render: function () {
 
        var text = this.state.liked ? "like" : "unlike";
 
        return (
            

                U {text} this.
            
        );
    }
});
 
React.render(
    ,
    document.getElementById("button1")
);

用React的方式實(shí)現(xiàn)angular中雙向綁定的效果

var Input = React.createClass({
 
    getInitialState: function () {
        return {value: "Kuitos"};
    },
 
    handleChange: function (event) {
        this.setState({value: event.target.value});
    },
 
    render: function () {
 
        var value = this.state.value;
 
        return (
            

                
{value}
                
            
        );
    }
});
 
React.render(
    ,
    document.getElementById("inputDataBind")
);

virtual dom狀態(tài)變更回調(diào)
組件生命周期分為三個(gè)狀態(tài)：

Mouting: 已插入真實(shí) DOM

Updating: 正在被重新渲染

Unmounting: 已移出真實(shí) DOM

React為每個(gè)狀態(tài)都提供相應(yīng)的pre跟post處理函數(shù)。只不過React的命名是will(pre 進(jìn)入狀態(tài)之前)跟did(post 進(jìn)入狀態(tài)之后)。

componentWillMount()

componentDidMount()

componentWillUpdate(Object nextProps, Object nextState)

componentDidUpdate(Object prevProps, Object prevState)

componentWillUnmount()
我們這樣寫

var Input = React.createClass({
 
    getInitialState: function () {
        return {firstName: "Kuitos", lastName: "Lau"};
    },
 
    handleChange: function (event) {
        this.setState({firstName: event.target.value});
    },
 
    componentWillMount: function () {
        console.log("dom will be insert", this.state.firstName);
    },
 
    componentDidMount: function () {
        console.log("dom had be insert", this.state.firstName);
    },
 
    componentWillUpdate: function (nextProps, nextState) {
        console.log("dom will be update", nextProps, nextState);
    },
 
    componentDidUpdate: function (prevProps, prevState) {
        console.log("dom had be update", prevProps, prevState);
    },
 
    render: function () {
 
        var state = this.state;
 
        return (
            

                
{state.firstName} {state.lastName}
                
            
        );
    }
});
 
React.render(
    ,
    document.getElementById("inputDataBind")
);

打印的順序依次是，dom will be update , dom had be update
當(dāng)input輸入時(shí) dom will be update , dom had be update

react的基本知識(shí)就介紹到這里，后續(xù)我們會(huì)繼續(xù)介紹react在實(shí)戰(zhàn)項(xiàng)目中的應(yīng)用及react native在移動(dòng)端的表現(xiàn)力。