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

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

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

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

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

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

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

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

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

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

React API定義了兩個對象React和ReactDOM.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

第一個參數(shù)是創(chuàng)建的元素,可以是html標(biāo)簽,也可以是自定義的React組件;第二參數(shù)是一個對象,其作為this.props的初始值;第三個及后面的參數(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ù)制一個React元素,同時合并其props和子元素.

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

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

判斷一個對象是否為有效的React元素.

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

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

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

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

這里是期望this.props.name的值類型為String,this.props.age的值類型為Number.

此對象可對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)