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

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

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

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

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

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

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

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

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

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

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

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

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

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

bower install react

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

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

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

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

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

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

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

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

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)建一個關(guān)聯(lián)了虛擬dom的組件對象，每次組件數(shù)據(jù)更新便會調(diào)用組件的 render 方法重新渲染dom。

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

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

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

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

獲取真實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的方式實現(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)
組件生命周期分為三個狀態(tài)：

Mouting: 已插入真實 DOM

Updating: 正在被重新渲染

Unmounting: 已移出真實 DOM

React為每個狀態(tài)都提供相應(yīng)的pre跟post處理函數(shù)。只不過React的命名是will(pre 進入狀態(tài)之前)跟did(post 進入狀態(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輸入時 dom will be update , dom had be update

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