React數據傳遞

React基礎概念

1. React是基於組件化的開發，通過組件的組合，讓web應用能夠實現桌面應用的效果。
2. React更有利於單頁應用的開發。
3. 並非MVC框架，只能算是V
4. 具有單項數據流的特點
5. 優勢：代碼復用率比較高。虛擬DOM，減少真實DOM操作，能夠能夠提高渲染的效率，

State 屬性

this.props只能獲取數據，不能修改，不能進行設置操作。

this.props和this.state的區別: this.state：每個組件都有state屬性（獨立的屬性），state有讀取和修改的功能。 能夠做到虛擬DOM到真實DOM的修改，不能進行父組件向子組件的船值。 this.props：可以由父組件傳值給子組件。

1. 初始化State：

getInitialState:function(){
    return {
        cnt:0
    }
}

 

2. 設置State
3. 獲取state的值

count:function(){
    this.setState({
        cnt: this.state.cnt+1
    })
},

<label>{this.state.cnt}</label>

 

react 中的input輸入框不能修改

defaultValue = {this.state.cnt}    //默認value
    onChange={}                     //只要改變輸入框中的值，就會觸發事件

 

獲取真實DOM節點

1. 通過屬性獲取

   對要獲取的input框添加 ref=""屬性 (this.refs.pwdInput.refs.input.value)

2. 函數方法

   對要獲取的input框添加

   ref= {function(ele){   //父組件
        this._pwd = ele;   
    }.bind(this)}
   
    ref= {function(ele){    //子組件
        this._input = ele;
    }.bind(this)}
    
    //使用的時候
    
    this._pwd._input

    

   也可用箭頭函數 ref = {(ele)=>this._input = ele} //子組件 ref = {(ele)=>this._pwd = ele} //父組件

Ajax

另一種Ajax提交方式：
    
    利用promise 異步模型。nodejs內部也是使用promise模型實現的單線程異步原理。 fetch()方法，采用promise實現異步提交，沒有用到XHR對象。、

組件的生命周期

三個方法

1. componentWillMount //組件渲染之前
2. render //組件渲染
3. componentDidMount //組件渲染后

第一個和第三個在組件的生命周期中只執行一次。