受控組件和無(wú)狀態(tài)組件
-
- 推薦使用
受控組件來(lái)實(shí)現(xiàn)表單. 在受控組件中, 表單數(shù)據(jù)是有React組件處理 - 如果讓表單數(shù)據(jù)有DOM處理時(shí), 替代方案為使用非受控組件
-
<input type="text" ref={input =>this._name = input} />如是, 不通過(guò)value控制其值,
- 推薦使用
-
受控組件
<input type="text" value={this.state.name} onChange={this.handleNameChange}/>- 以上handleNameChange獲取輸入的值
this.setState({ name: event.target.value });賦值給state, 然后在觸發(fā)刷新, 對(duì)用input的value賦新的值
-
無(wú)狀態(tài)組件
語(yǔ)法簡(jiǎn)潔, 占內(nèi)存小(少了class的諸多屬性), 無(wú)副作用(純函數(shù)), 函數(shù)式寫(xiě)法(柯里化)
-
函數(shù)式組件: 使用props
function Welcome(props) { return <h1>Hello, {props.name}</h1>; } -
狀態(tài)組件/類組件的優(yōu)點(diǎn):
- 可以使用this
- 擁有局部狀態(tài): this.state
- 聲明周期鉤子
生命周期流程
父子組件嵌套的生命周期, 先初始化父組件, 在父組件的render組件中初始化子組件, 當(dāng)子組件都創(chuàng)建完成后(都完成了
componentDidMount方法后) 父組件執(zhí)行componentDidMount-
啟動(dòng)過(guò)程
father constructor father componentWillMount father render son constructor son componentWillMount son render son componentDidMount father componentDidMount -
組件更新過(guò)程
son componentWillReceiveProps son shouldComponentUpdate 根據(jù)返回值 true/false 決定是否繼續(xù)執(zhí)行 son componentWillUpdate son render son componentDidUpdate?
setState() 執(zhí)行流程, 生命周期.
利用隊(duì)列機(jī)制管理state, 避免重復(fù)的view刷新
replaceState({}) 會(huì)完全替代原有的state, setState不會(huì)影響未涉及的state
-
如果組件正處于創(chuàng)建或更新組件階段,則把新的更新放入
dirtyComponents稍后處理- 故getInitialState，componentWillMount， render，componentWillUpdate 中setState都不會(huì)引起updateComponent。但在componentDidMount和componentDidUpdate中則會(huì)。
-
主要流程如下
1.enqueueSetState將state放入隊(duì)列中，并調(diào)用enqueueUpdate處理要更新的Component
2.如果組件當(dāng)前正處于update事務(wù)中，則先將Component存入dirtyComponent中。否則調(diào)用batchedUpdates處理。
3.batchedUpdates發(fā)起一次transaction.perform()事務(wù)
-
4.開(kāi)始執(zhí)行事務(wù)初始化，運(yùn)行，結(jié)束三個(gè)階段
1.初始化：事務(wù)初始化階段沒(méi)有注冊(cè)方法，故無(wú)方法要執(zhí)行
2.運(yùn)行：執(zhí)行setSate時(shí)傳入的callback方法，一般不會(huì)傳callback參數(shù),
3.結(jié)束：更新isBatchingUpdates為false，并執(zhí)行FLUSH_BATCHED_UPDATES這個(gè)wrapper中的close方法
FLUSH_BATCHED_UPDATES在close階段，會(huì)循環(huán)遍歷所有的dirtyComponents，調(diào)用updateComponent刷新組件，并執(zhí)行它的pendingCallbacks, 也就是setState中設(shè)置的callback。第二個(gè)參數(shù)?
我的理解: setState 修改state是異步操作, 意思就是不能立即獲取
this.state修改的值, 當(dāng)調(diào)用了setState后,把本次操作放入隊(duì)列中, 如果組件未在創(chuàng)建/更新,那么立即執(zhí)行更新流程, 如果組件在刷新,那么本次更新操作放入稍后執(zhí)行的隊(duì)列中等待執(zhí)行.批處理時(shí)會(huì)把待處理數(shù)組中每一個(gè)操作從第一個(gè)依次傳遞給后一個(gè),直到待處理操作為空,把最后的結(jié)果設(shè)置給state
