說說React

一個組件，有自己的結構，有自己的邏輯，有自己的樣式，會依賴一些資源，會依賴某些其他組件。比如日常寫一個組件，比較常規的方式：

－ 通過前端模板引擎定義結構

－ JS文件中寫自己的邏輯

－ CSS中寫組件的樣式

－ 通過RequireJS、SeaJS這樣的庫來解決模塊之間的相互依賴，

那么在React中是什么樣子呢？

結構和邏輯

在React的世界里，結構和邏輯交由JSX文件組織，React將模板內嵌到邏輯內部，實現了一個JS代碼和HTML混合的JSX。

結構

在JSX文件中，可以直接通過 React.createClass 來定義組件：

var CustomComponent = React.creatClass({
render: function(){
return (<div className="custom-component"></div>);
}
});

通過這種方式可以很方便的定義一個組件，組件的結構定義在render函數中，但這并不是簡單的模板引擎，我們可以通過js方便、直觀的操控組件結構，比如我想給組件增加幾個節點：

var CustomComponent = React.creatClass({
render: function(){
var $nodes = ['h','e','l','l','o'].map(function(str){
return (<span>{str}</span>);
});
return (<div className="custom-component">{$nodes}</div>);
}
});

通過這種方式，React使得組件擁有靈活的結構。那么React又是如何處理邏輯的呢？

邏輯

寫過前端組件的人都知道，組件通常首先需要相應自身DOM事件，做一些處理。必要時候還需要暴露一些外部接口，那么React組件要怎么做到這兩點呢？

事件響應

比如我有個按鈕組件，點擊之后需要做一些處理邏輯，那么React組件大致上長這樣：

var ButtonComponent = React.createClass({
render: function(){
return (<button>屠龍寶刀，點擊就送</button>);
}
});

點擊按鈕應當觸發相應地邏輯，一種比較直觀的方式就是給button綁定一個 onclick 事件，里面就是需要執行的邏輯了：

function getDragonKillingSword() {
//送寶刀
}
var ButtonComponent = React.createClass({
render: function(){
return (<button onclick="getDragonKillingSword()">屠龍寶刀，點擊就送</button>);
}
});

但事實上 getDragonKillingSword() 的邏輯屬于組件內部行為，顯然應當包裝在組件內部，于是在React中就可以這么寫：

var ButtonComponent = React.createClass({
getDragonKillingSword: function(){
//送寶刀
},
render: function(){
return (<button onClick={this.getDragonKillingSword}>屠龍寶刀，點擊就送</button>);
}
});

這樣就實現內部事件的響應了，那如果需要暴露接口怎么辦呢？

暴露接口

事實上現在 getDragonKillingSword 已經是一個接口了，如果有一個父組件，想要調用這個接口怎么辦呢？

父組件大概長這樣：

var ImDaddyComponent = React.createClass({
render: function(){
return (
<div>
//其他組件
<ButtonComponent />
//其他組件
</div>
);
}
});

那么如果想手動調用組件的方法，首先在ButtonComponent上設置一個 ref="" 屬性來標記一下，比如這里把子組件設置成 <ButtonComponent ref="getSwordButton"/> ，那么在父組件的邏輯里，就可以在父組件自己的方法中通過這種方式來調用接口方法：

this.refs.getSwordButton.getDragonKillingSword();

看起來屌屌噠~那么問題又來了，父組件希望自己能夠按鈕點擊時調用的方法，那該怎么辦呢？

配置參數

父組件可以直接將需要執行的函數傳遞給子組件：

<ButtonComponent clickCallback={this.getSwordButtonClickCallback}/>

然后在子組件中調用父組件方法：

var ButtonComponent = React.createClass({
render: function(){
return (<button onClick={this.props.clickCallback}>屠龍寶刀，點擊就送</button>);
}
});

內聯 內嵌 外鏈 導入。
區別 ：同時加載。
前者無兼容性，后者CSS2.1以下瀏覽器不支持。
Link 支持使用javascript改變樣式，后者不支持。