一 初識React

二 前置知識

三 基本方法

（1） ReactDOM.render是React的最基本方法，用於將模板轉為HTML，並插入指定的DOM節點。

           ReactDOM.render{

              <h1>hello.world!<br>

              document.getElementById("example");

};

（2） JSX語法

遇到 HTML 標籤（以 < 開頭），就用 HTML 規則解析；遇到程式碼塊（以{ 開頭），就用 JavaScript 規則解析

varnames= ['Alice','Emily','Kate']; ReactDOM.render( <div> { names.map(function(name,index){ return<divkey= {index}>Hello,{name}!</div> }) } </div>, document.getElementById("example") );

以陣列方式

vararr= [ <h1> Hello world!</h1>, <h2> React is awesome</h2>, ]; ReactDOM.render( <div>{arr}</div>, document.getElementById("example") ): （3）元件

React.createClass 方法就用於生成一個元件類

varHelloMessage=React.createClass({ render:function() { return<h1>Hello {this.props.name}</h1>; } });
ReactDOM.render( <HelloMessagename="John"/>, document.getElementById('example') );

•     元件類的第一個字母必須大寫，否則就會報錯，比如HelloMessage不能寫成helloMessage。
  

（4）this.props.children

this.props 物件的屬性與元件的屬性一一對應，但是有一個例外，就是

this.props.children 屬性。它表示元件的所有子節點

varNotesList=React.createClass({ render:function(){ return ( <ol> { React.Children.map(this.props.children,function(child){ return<li>{child}</li>; }) } </ol> ); } });
ReactDOM.render( <NotesList> <span>hello</span> <span>world</span> </NotesList>, document.getElementById("example") ); this.props.chlidren 的值有三種可能：

    如果當前元件沒有子節點，它就是undefined；

    如果有一個子節點，資料型別是object；

    如果有多個子節點，資料型別就是array。

React 提供一個工具方法 React.Children 來處理 this.props.children 。我們可以用 React.Children.map 來遍歷子節點，而不用擔心 this.props.children 的資料型別是 undefined 還是 object。

（5）Proptype

元件類的PropTypes屬性，就是用來驗證元件例項的屬性是否符合要求

getDefaultProps 方法可以用來設定元件屬性的預設值

（6）獲取真實的DOM節點

        元件並不是真實的DOM節點，而是存在於記憶體之中的一種資料結構，叫做虛擬DOM（virtual DOM）。只有當它插入文件以後

才會變成真實DOM。根據React的設計，所有的DOM變動，都先在虛擬DOM上發生，然後再將實際發生的變動部分，反應在真實的DOM上，這種演算法叫做DOM diff。

varMyComponent=React.createClass({ handleClick:function(){ this.refs.myTextInput.focus(); }, render:function(){ return ( <div> <inputtype="text"ref="myTextInput"/> <inputtype="button"value="Focus the text input"onClick={this.handleClick}/> </div> ); } }); ReactDOM.render( <MyComponent/>, document.getElementById('example') );        元件 MyComponent 的子節點有一個文字輸入框，用於獲取使用者的輸入。這時就必須獲取真實的 DOM 節點，虛擬 DOM 是拿不到使用者輸入的。為了做到這一點，文字輸入框必須有一個ref 屬性，然後 this.refs.[refName] 就會返回這個真實的 DOM 節點。

（7）this.state

       元件免不了要與使用者互動，React 的一大創新，就是將元件看成是一個狀態機，一開始有一個初始狀態，然後使用者互動，導致狀態變化，從而觸發重新渲染 UI

varLikeButton=React.createClass({ getInitialState:function(){ return {liked:false}; }, handleClick:function(event){ this.setState({liked:!this.state.liked}); }, render:function(){ vartext=this.state.liked?'like':'haven\'t liked'; return ( <ponClick={this.handleClick}> You {text} this.Click to toggle. </p> ); } });
ReactDOM.render( <LikeButton/>, document.getElementById("example") );    LikeButton 元件，它的 getInitialState 方法用於定義初始狀態，也就是一個物件，這個物件可以通過this.state 屬性讀取。當用戶點選元件，導致狀態變化，this.setState 方法就修改狀態值，每次修改以後，自動呼叫this.render 方法，再次渲染元件。

        由於 this.props 和this.state 都用於描述元件的特性，可能會產生混淆。一個簡單的區分方法是，this.props 表示那些一旦定義，就不再改變的特性，而this.state 是會隨著使用者互動而產生變化的特性。

（8）表單

        使用者在表單填入的內容，屬於使用者跟元件的互動，所以不能用 this.props 讀取

varInput=React.createClass({ getInitialState:function(){ return {value:'Hello!'}; }, handleChange:function(event){ this.setState({value:event.target.value}); }, render:function(){ varvalue=this.state.value; return ( <div> <inputtype="text"value={value}onChange={this.handleChange}/> <p>{value}</p> </div> ); } });
ReactDOM.render(<Input/>,document.body);         文字輸入框的值，不能用 this.props.value 讀取，而要定義一個 onChange 事件的回撥函式，通過event.target.value 讀取使用者輸入的值。textarea 元素、select元素、radio元素都屬於這種情況，

（9）元件的生命週期

     元件的生命週期分成三個狀態：

• Mounting：已插入真實 DOM
• Updating：正在被重新渲染
• Unmounting：已移出真實 DOM

React 為每個狀態都提供了兩種處理函式，will 函式在進入狀態之前呼叫，did 函式在進入狀態之後呼叫，三種狀態共計五種處理函式。

• componentWillMount()
• componentDidMount()
• componentWillUpdate(object nextProps, object nextState)
• componentDidUpdate(object prevProps, object prevState)
• componentWillUnmount()

此外，React 還提供兩種特殊狀態的處理函式。

• componentWillReceiveProps(object nextProps)：已載入元件收到新的引數時呼叫
• shouldComponentUpdate(object nextProps, object nextState)：元件判斷是否重新渲染時呼叫

varHello=React.createClass({ getInitialState:function () { return { opacity:1.0 }; },
componentDidMount:function () { this.timer=setInterval(function () { varopacity=this.state.opacity; opacity-=.05; if (opacity<0.1) { opacity=1.0; } this.setState({ opacity:opacity }); }.bind(this),100); },
render:function () { return ( <divstyle={{opacity:this.state.opacity}}> Hello {this.props.name} </div> ); } });
ReactDOM.render( <Helloname="world"/>, document.getElementById('example') );