說(shuō)說(shuō)React

一個(gè)組件，有自己的結(jié)構(gòu)，有自己的邏輯，有自己的樣式，會(huì)依賴一些資源，會(huì)依賴某些其他組件。比如日常寫一個(gè)組件，比較常規(guī)的方式：

－ 通過(guò)前端模板引擎定義結(jié)構(gòu)

－ JS文件中寫自己的邏輯

－ CSS中寫組件的樣式

－ 通過(guò)RequireJS、SeaJS這樣的庫(kù)來(lái)解決模塊之間的相互依賴，

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

結(jié)構(gòu)和邏輯

在React的世界里，結(jié)構(gòu)和邏輯交由JSX文件組織，React將模板內(nèi)嵌到邏輯內(nèi)部，實(shí)現(xiàn)了一個(gè)JS代碼和HTML混合的JSX。

結(jié)構(gòu)

在JSX文件中，可以直接通過(guò) React.createClass 來(lái)定義組件：

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

通過(guò)這種方式可以很方便的定義一個(gè)組件，組件的結(jié)構(gòu)定義在render函數(shù)中，但這并不是簡(jiǎn)單的模板引擎，我們可以通過(guò)js方便、直觀的操控組件結(jié)構(gòu)，比如我想給組件增加幾個(gè)節(jié)點(diǎn)：

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>);
}
});

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

邏輯

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

事件響應(yīng)

比如我有個(gè)按鈕組件，點(diǎn)擊之后需要做一些處理邏輯，那么React組件大致上長(zhǎng)這樣：

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

const bordercolors=["red", "blue", "yellow"]
{bordercolors.map((value, index)=>
<option key={index}>{index}:{value}</option>
)}

eact refs 可以接受一個(gè)字符串對(duì)象嗎 處理 React 組件之間的交流方式，主要取決于組件之間的關(guān)系，然而這些關(guān)系的約定人就是你。我不會(huì)講太多關(guān)于 data-stores、data-adapters 或者 data-helpers 之類的話題。我下面只專注于 React 組件本身的