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