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

React是由fackbook開放的一個構建用戶接口的javascript類庫,其主要目的是為了開發隨時間數據不斷變化的大型應用程序,許多開發者將React視作為MVC模式中的V.2011年React開始被fackbook工程師著手開發,并作為內部使用,2013年正式開源,學習react需要掌握一定的JavaScript基礎。

交互式開發 ：當有數據發生變化時，界面會發生相應的變化.

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

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

開發React程序需要引入必要的文件,下面是一個React程序的基本構架:

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

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

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

這里面還有兩個比較特殊的值this.props和this.state.這兩個的區別在于this.props在載入后不會發生改變,而this.state可以通過被設置從而導致相應的變化.

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

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

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

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

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

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

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

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

getDefaultProps：返回值作為this.props的值,其優先級低于直接通過調用該組件時設置的值.

propTypes:對this.props中的值做數據類型驗證，一般作為開發調試使用,具體的類型請點擊查看

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

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

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

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

displayName:當開發調試時在控制臺中使用到的組件名.

componentWillMount:組件將要被加載時觸發此方法

componentDidMount:組件加載成功后觸發此方法

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

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

componentWillUpdate：組件即將更新時觸發此方法.

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

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

創建一個新的React元素

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

第一個參數是創建的元素,可以是html標簽,也可以是自定義的React組件;第二參數是一個對象,其作為this.props的初始值;第三個及后面的參數為此元素的子元素.

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

復制一個React元素,同時合并其props和子元素.

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

返回一個生成指定類型 ReactElements 的函數

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

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

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

此對象是為組件的this.props的驗證做準備的.

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

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

此對象可對this.props.children進行數據處理.

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是將已經渲染的React組件從DOM元素中移除.

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

當組件加載成功返回渲染的DOM元素.

DOMElement findDOMNode(ReactComponent component)