摘要：當(dāng)或的值發(fā)生變化時(shí)觸發(fā)，并通過(guò)返回值確定是否觸發(fā)更新事件但初始化組件時(shí)不會(huì)觸發(fā)。該方式僅在未使用的時(shí)候適用。

React是由fackbook開(kāi)放的一個(gè)構(gòu)建用戶(hù)接口的javascript類(lèi)庫(kù),其主要目的是為了開(kāi)發(fā)隨時(shí)間數(shù)據(jù)不斷變化的大型應(yīng)用程序,許多開(kāi)發(fā)者將React視作為MVC模式中的V.2011年React開(kāi)始被fackbook工程師著手開(kāi)發(fā),并作為內(nèi)部使用,2013年正式開(kāi)源,學(xué)習(xí)react需要掌握一定的JavaScript基礎(chǔ)。

交互式開(kāi)發(fā) ：當(dāng)有數(shù)據(jù)發(fā)生變化時(shí)，界面會(huì)發(fā)生相應(yīng)的變化.

組件為開(kāi)發(fā)單元：React是由組件作為開(kāi)發(fā)單元的,一個(gè)組件可以包含一個(gè)或多個(gè)其他組件.

可以在多個(gè)平臺(tái)中使用: React除了可以在webapp中使用,還可以借助React Native將其應(yīng)用到IOS和Android應(yīng)用程序.

開(kāi)發(fā)React程序需要引入必要的文件,下面是一個(gè)React程序的基本構(gòu)架:

這里我們引入了三個(gè)文件,這幾個(gè)文件我都是通過(guò)bower進(jìn)行安裝的,首先是react.js,這個(gè)主要包含了React的相關(guān)方法的定義.react-dom.js是將我們定義的組件插入到html文檔中.browser.min.js這個(gè)文件的作用是將具有JSX語(yǔ)法的代碼轉(zhuǎn)換為JavaScript代碼,假如我們使用的是JavaScript編寫(xiě)代碼則這個(gè)文件可以不引用.當(dāng)然你可以先使用JSX編寫(xiě)，然后通過(guò)react-tools進(jìn)行離線(xiàn)轉(zhuǎn)換.

這里先給大家列出一個(gè)小的例子,讓大家先嘗嘗鮮.

這是一個(gè)簡(jiǎn)單的搜索功能的實(shí)現(xiàn),以上代碼可以直接放在html文件中運(yùn)行.這里我們一共定義了三個(gè)組件,分別是SearchInput List SearchBox,這里有一點(diǎn)需要提示大家:組件名的首字母必須大寫(xiě).SearchInput和 List作為SearchBox的子組件,我們創(chuàng)建組件是使用的React.createClass方法,并通過(guò)ReactDOM.render將組件添加到html文檔中.

這里面還有兩個(gè)比較特殊的值this.props和this.state.這兩個(gè)的區(qū)別在于this.props在載入后不會(huì)發(fā)生改變,而this.state可以通過(guò)被設(shè)置從而導(dǎo)致相應(yīng)的變化.

React API定義了兩個(gè)對(duì)象React和ReactDOM.

React.Component是在ES6語(yǔ)法下定義組件使用到的，如下:

class HelloMessage extends React.Component {
  render() {
    return 
Hello {this.props.name}
;
  }
}

React.createClass方法也是用于定義一個(gè)組件,其參數(shù)為一個(gè)對(duì)象，這個(gè)對(duì)象必須包含render方法,render方法返回一個(gè)元素,例如div.這個(gè)元素下可以包含任意個(gè)html標(biāo)簽或者React組件.

var Component  = React.createClass({
    render:function(){
        return (
        
Hello World!!!
        );
    }
);

傳入這個(gè)方法的對(duì)象中可以自定義屬性,當(dāng)然還有一些具有特殊意義的屬性,具體如下:

render：返回需要展示的組件元素

getInitialState：返回值作為this.state的初始值.

getDefaultProps：返回值作為this.props的值,其優(yōu)先級(jí)低于直接通過(guò)調(diào)用該組件時(shí)設(shè)置的值.

propTypes:對(duì)this.props中的值做數(shù)據(jù)類(lèi)型驗(yàn)證，一般作為開(kāi)發(fā)調(diào)試使用,具體的類(lèi)型請(qǐng)點(diǎn)擊查看

mixins:傳入此屬性的值為一個(gè)對(duì)象，這個(gè)對(duì)象中的屬性或方法將會(huì)被擴(kuò)展到此組件中,它存在的意義是為了復(fù)用.

statics:傳入此屬性的值為一個(gè)對(duì)象，這個(gè)對(duì)象中的屬性或方法將會(huì)被擴(kuò)展到此組件類(lèi)中

var MyComponent = React.createClass({
  statics: {
    customMethod: function(foo) {
      return foo === "bar";
    }
  },
  render: function() {
  }
});

MyComponent.customMethod("bar");  // true

displayName:當(dāng)開(kāi)發(fā)調(diào)試時(shí)在控制臺(tái)中使用到的組件名.

componentWillMount:組件將要被加載時(shí)觸發(fā)此方法

componentDidMount:組件加載成功后觸發(fā)此方法

componentWillReceiveProps:當(dāng)this.props值發(fā)生變化時(shí)觸發(fā)此方法,但初始化組件時(shí)不會(huì)觸發(fā)。

shouldComponentUpdate：當(dāng)this.props或this.state的值發(fā)生變化時(shí)觸發(fā)，并通過(guò)返回值確定是否觸發(fā)更新事件.但初始化組件時(shí)不會(huì)觸發(fā)。

componentWillUpdate：組件即將更新時(shí)觸發(fā)此方法.

componentDidUpdate：組件即將更新完成后觸發(fā)此方法.

componentWillUnmount：組件即將被卸載時(shí)觸發(fā)此方法.

創(chuàng)建一個(gè)新的React元素

React.createElement(string/ReactClass Type,[props],[childrens...]);

第一個(gè)參數(shù)是創(chuàng)建的元素,可以是html標(biāo)簽,也可以是自定義的React組件;第二參數(shù)是一個(gè)對(duì)象,其作為this.props的初始值;第三個(gè)及后面的參數(shù)為此元素的子元素.

ReactDOM.render(
    React.createElement("div", null, 
            React.createElement(SearchInput, {setName: this.setName}), 
            React.createElement(List, {filterWord: this.state.filterWord,                lists: this.props.lists})
        ),doucment.getElementById("container"));

復(fù)制一個(gè)React元素,同時(shí)合并其props和子元素.

React.cloneElement(ReactClass Type,[props],[childrens...]);

返回一個(gè)生成指定類(lèi)型 ReactElements 的函數(shù)

判斷一個(gè)對(duì)象是否為有效的React元素.

var ele = React.createElement("div");
React.isValidElement(ele);  // ture

React.DOM 運(yùn)用 React.createElement 為 DOM 組件提供了方便的包裝。該方式僅在未使用 JSX 的時(shí)候適用。例如，React.DOM.div(null, "Hello World!")，這里封裝了一個(gè)div DOM組件。

此對(duì)象是為組件的this.props的驗(yàn)證做準(zhǔn)備的.

React.createClass({
    propTypes:{
        name:React.PropTypes.string,
        age:React.PropTypes.number
    }
    ...
});

這里是期望this.props.name的值類(lèi)型為String,this.props.age的值類(lèi)型為Number.

此對(duì)象可對(duì)this.props.children進(jìn)行數(shù)據(jù)處理.

React.Children.map(object children, function fn [, object thisArg])

React.Children.forEach(object children, function fn [, object thisArg])

React.Children.count(object children)

React.Children.only(object children)

React.Children.toArray(object children)

ReactDOM.render是將定義的組件渲染到DOM元素中.

ReactDOM.render(,document.getElementById("container"));

ReactDOM.unmountComponentAtNode是將已經(jīng)渲染的React組件從DOM元素中移除.

ReactDOM.unmountComponentAtNode(document.geElementById("container"));

當(dāng)組件加載成功返回渲染的DOM元素.

DOMElement findDOMNode(ReactComponent component)