React 基礎(chǔ)之props和state

1. 在class 關(guān)鍵字創(chuàng)建的組件中，如果想使用外界傳來的props參數(shù)，不許接收，直接通過this.props.***來訪問即可
2. 注意無論是class 還是普通的function創(chuàng)建的組件，它們的props都是只讀的
3. 另外注意 ：class創(chuàng)建的組件，是有自己的私有屬性和生命周期函數(shù)，
   而function創(chuàng)建的組件，只有props，沒有自己的私有數(shù)據(jù)和生命周期函數(shù)。
4. class組件繼承了Component組件后，必須在構(gòu)造器里調(diào)用super(),只有調(diào)用了super()后，才能使用this關(guān)鍵字

constructor(){
   super()
   this.state={}
}

* 在class創(chuàng)建的組件中，this.state都是可讀可寫的
  而props都是只讀的，不能被重新賦值
* 如果一個組件需要有自己的私有數(shù)據(jù)，則推薦用class創(chuàng)建的有狀態(tài)組件
* 如果一個組件不需要有自己的私有數(shù)據(jù)，則推薦使用無狀態(tài)組件

5. 組件中props和state之間的區(qū)別
   • props中的數(shù)據(jù)都是外界傳遞過來的
   • state中的數(shù)據(jù)，都是組件私有的（一般通過ajax獲取來的，一般都是私有數(shù)據(jù)）
   • props中的數(shù)據(jù)是只讀的
   • state中的數(shù)據(jù)都是可讀可寫的

事件綁定：
onClick只能接受一個function
最好寫成如下形式
onClick={()=>this.onClickhandler()}

onClickhandler=()=>{
}

state：
注意，React中，如果想為state中的數(shù)據(jù)重新賦值，不要使用this.state.***=值，應(yīng)該調(diào)用React提供的this.setState({msg:'123'})
setState執(zhí)行方法是異步的
如果在調(diào)用完this.setState之后，又想立即拿到最新的state值，需要使用
this.setState({},callback) 因為react是單向數(shù)據(jù)綁定，所以需要一個callback回調(diào)函數(shù)來拿到最新值

當(dāng)為文本框綁定value值以后，要么同時提供一個readOnly,要么提供一個onChange處理函數(shù)

• 如果UI頁面上，文本框的內(nèi)容變化了，想要把最新的值同步回state中去，此時，React沒有這種自動同步機制：

  1. 在react中，需要程序員手動監(jiān)聽文本框的onChange事件；
  2. 在onChange事件中，拿到最新的文本框的值；
  3. 程序員調(diào)用this.setState({})手動吧最新的值同步到state中

• 在onChange事件中獲取文本框的值，有兩種方案

  1. 通過事件參數(shù)e來獲取 const newVal=e.target.value
     this.setState({msg:newVal})
  2. 利用ref

console.log(this.refs.txt.value)

{
name:'',
age:'',
:'',
name2:'',
name3:'',
}