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：

1 getInitialState:function(){2     return {3         cnt:04     }5 }

 

2. 設定State
3. 擷取state的值

1 count:function(){2     this.setState({3         cnt: this.state.cnt+14     })5 },6 7 <label>{this.state.cnt}</label>

 

react 中的input輸入框不能修改

1 defaultValue = {this.state.cnt}    //預設value2     onChange={}                     //只要改變輸入框中的值，就會觸發事件

 

擷取真實DOM節點

1. 通過屬性擷取

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

2. 函數方法

   對要擷取的input框添加

    1 ref= {function(ele){   //父組件 2      this._pwd = ele;    3  }.bind(this)} 4  5  ref= {function(ele){    //子組件 6      this._input = ele; 7  }.bind(this)} 8   9  //使用的時候10  11  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 //組件渲染後

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

React資料傳遞