摘要：組件關注的只應該是狀態，不同的狀態呈現不同的表現形式。組件一切都是組件倡導開發者將切分成一個個組件從而達到松耦合及重用的目的。只不過的命名是進入狀態之前跟進入狀態之后。

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

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

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

React的設計依托于Facebook另一個叫做FLUX的項目，FLUX是一個為了解決Facebook在MVC應用中碰到的工程性問題而生的設計模式，主要思路是單向數據流。解析 Facebook 的 Flux 應用架構

React是MVC中薄薄的一層V，它只關注表現層，對組件化開發有很大的裨益。

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

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

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

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

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

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

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

首先你需要reactjs的開發環境。

bower install react

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

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

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

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

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

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

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

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

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

如何創建組件

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

通過React.createClass可以創建一個關聯了虛擬dom的組件對象，每次組件數據更新便會調用組件的 render 方法重新渲染dom。

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

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

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

頁面渲染的結果就是一個 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")
);

組件狀態 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的方式實現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狀態變更回調
組件生命周期分為三個狀態：

Mouting: 已插入真實 DOM

Updating: 正在被重新渲染

Unmounting: 已移出真實 DOM

React為每個狀態都提供相應的pre跟post處理函數。只不過React的命名是will(pre 進入狀態之前)跟did(post 進入狀態之后)。

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
當input輸入時 dom will be update , dom had be update

react的基本知識就介紹到這里，后續我們會繼續介紹react在實戰項目中的應用及react native在移動端的表現力。