內(nèi)容：props辱姨、狀態(tài)機憔鬼、事件伞剑、
組件通信洋只、模擬表單雙向綁定
一样眠、組件的props
1.類組件
定義：
import React from 'react'
class Home extends React.Component{
constructor(){
super();
console.log("構(gòu)造函數(shù)先執(zhí)行")
}
//渲染頁面的鉤子函數(shù)
render(){
console.log("渲染函數(shù)執(zhí)行")
return(
<div>
<h2>這是一個es6類定義的組件</h2>
</div>
)
}
}
export default Home;
擁有構(gòu)造函數(shù)等生命周期函數(shù)（業(yè)務(wù)組件/狀態(tài)組件）
類組件中可以定義很多個函數(shù)割笙、初始數(shù)據(jù)等权烧，通過this.props接收父組件傳遞的數(shù)據(jù)
2.函數(shù)組件
定義：
import React from 'react'
var Movie = (props)=>{
return(
<div>
<h3>這是一個函數(shù)式組件</h3>
</div>
)
}
export default Movie;
它沒有生命周期等函數(shù)（無狀態(tài)組件/木偶組件）、沒有狀態(tài)機伤溉。
函數(shù)組件要接收父組件傳遞的數(shù)據(jù)需要通過函數(shù)的形參來接收般码。
二、狀態(tài)機
state是react中內(nèi)置的狀態(tài)管理器乱顾，設(shè)置一些初始數(shù)據(jù)（數(shù)據(jù)格式是對象）板祝。
setState，react中不建議我們直接通過state.變量名來進行賦值走净，即使賦值成功券时，但是頁面上的數(shù)據(jù)不會發(fā)生變化（沒有重新調(diào)用render函數(shù)），推薦我們使用setState方法來改變狀態(tài)機中的數(shù)據(jù)伏伯。
setState會把新的數(shù)據(jù)合并到原來的數(shù)據(jù)中橘洞，重新調(diào)用render方法。
三说搅、事件
1.事件綁定
(1)es5方式進行綁定
<button onClick={ this.自定義函數(shù)名 }
注意：this.自定義函數(shù)名()這種方式的寫法炸枣，指定的函數(shù)會自動執(zhí)行
保持this指向：
<button onClick={ this.自定義函數(shù)名.bind(this) }
(2)es6方式進行綁定
<button onClick={ ()=>this.addNum() }>es6-保持this指向</button><br/>
<button onContextMenu={ (e)=>this.handle1(e) }>es6-保持this指向-事件</button>
2.傳遞參數(shù)
(1)es5傳遞參數(shù)
①事件
不需要顯示的在函數(shù)中進行傳遞，在定義函數(shù)的形參中直接使用即可
②額外參數(shù)
如果要在函數(shù)中繼續(xù)獲取事件和其他參數(shù)弄唧，那么在使用bind時應(yīng)該加上this适肠，然后再傳遞其他參數(shù)。
<button onContextMenu={ this.handle1.bind() }>es5--事件--無參數(shù)</button>
<button onClick={ this.handle2.bind(this,'haha') }>es5--事件--有參數(shù)</button>
es5傳遞參數(shù)的方式候引，在定義函數(shù)時侯养，形參中的事件參數(shù)應(yīng)該放到所有普通參數(shù)的最后。
(2)es6傳遞參數(shù)
<button onClick={ (e)=>this.handle2('hehe',e) }>es6-保持this指向-事件-有參數(shù)</button>
es6要獲取事件和其他額外參數(shù)時澄干，實參傳遞和形參接收的順序是一致的逛揩。
四柠傍、組件通信
1.父子組件
在父組件上使用子組件時，通過自定義屬性名=屬性值進行數(shù)據(jù)的傳遞
在子組件中息尺，如果是類組件通過this.props.自定義屬性名來接收數(shù)據(jù)
? 如果是函數(shù)組件通過形參props.自定義屬性名來接收數(shù)據(jù)
父組件：
import React,{ Component } from 'react'
//引入子組件
import Child from './Child'
export default class Parent extends Component{
render(){
return(
<div>
<h1>這是一個父組件</h1>
<Child gift="寶馬"></Child>
</div>
)
}
}
子組件：
import React from 'react'
var Child = (props)=>{
return(
<div>
<h2>這是一個子組件携兵，這是父組件給的禮物:{ props.gift }</h2>
</div>
)
}
export default Child;
2.子父組件
在父組件使用子組件時疾掰，除了可以傳遞普通數(shù)據(jù)搂誉，還可以傳遞事件。
父組件：
state = {
msg:''
}
setMsg(e){
console.log('此事件被子組件執(zhí)行了',e)
this.setState({
msg:e
})
}
render(){
return(
<div>
<h1>這是一個父組件</h1>
<Child gift="寶馬" toParent={ (e)=>this.setMsg(e) }></Child>
<hr/>
<h1>這是子組件發(fā)送過來的數(shù)據(jù)：{ this.state.msg }</h1>
</div>
)
}
子組件：
render(){
return(
<div>
<h2>這是一個子組件静檬，這是父組件給的禮物:{ this.props.gift }</h2>
<button onClick={ ()=>this.props.toParent('口罩100個') }>發(fā)送數(shù)據(jù)</button>
</div>
)
}
3.DOM節(jié)點操作
ref
(1)字符串
可以給子組件設(shè)置一個ref屬性炭懊，然后可以通過this.refs.屬性名來獲取/設(shè)置子組件中的數(shù)據(jù)。
<Song ref="mySong"></Song>
可以通過this.refs.mySong來獲取到組件拂檩。
(2)回調(diào)函數(shù)
可以給子組件設(shè)置一個ref屬性侮腹，它的屬性值不是字符串，而是一個函數(shù)（自動執(zhí)行）稻励「缸瑁可以把子組件當(dāng)成參數(shù)進行傳遞，然后就可以對組件中的數(shù)據(jù)進行獲取或者修改望抽。
<Song ref={ (el)=>this.getChild2(el) }></Song>
回調(diào)函數(shù)的寫法不會在this.refs存在子組件加矛。
不推薦直接使用ref，只有萬不得已才去使用煤篙。
五斟览、模擬表單數(shù)據(jù)雙向綁定
六、初始化項目失敗
[圖片上傳失敗...(image-f0df1e-1582630015203)]
解決辦法：
在命令行中執(zhí)行命令：npm cache clean --force 清除緩存
然后再重新執(zhí)行初始化操作
七辑奈、作業(yè)
用react實現(xiàn)用戶注冊苛茂、登錄界面，點擊注冊或者登錄按鈕時獲取到用戶輸入的內(nèi)容
表格頁面
（可以使用bootstrap鸠窗，樣式要好看）
