一源葫、 組件生命周期的三個狀態(tài)
Mounting：已插入真實 DOM
Updating：正在被重新渲染
Unmounting：已移出真實 DOM
二钙态、生命周期方法
componentWillMount 在渲染前調(diào)用,在客戶端也在服務(wù)端纺涤。
componentDidMount : 在第一次渲染后調(diào)用数焊，只在客戶端疯搅。之后組件已經(jīng)生成了對應(yīng)的DOM結(jié)構(gòu)表制，可以通過this.getDOMNode()來進行訪問健爬。 如果你想和其他JavaScript框架一起使用，可以在這個方法中調(diào)用setTimeout, setInterval或者發(fā)送AJAX請求等操作(防止異步操作阻塞UI)么介。
componentWillReceiveProps 在組件接收到一個新的 prop (更新后)時被調(diào)用娜遵。這個方法在初始化render時不會被調(diào)用。
shouldComponentUpdate 返回一個布爾值壤短。在組件接收到新的props或者state時被調(diào)用设拟。在初始化時或者使用forceUpdate時不被調(diào)用。 可以在你確認(rèn)不需要更新組件時使用久脯。
componentWillUpdate在組件接收到新的props或者state但還沒有render時被調(diào)用纳胧。在初始化時不會被調(diào)用。
componentDidUpdate 在組件完成更新后立即調(diào)用帘撰。在初始化時不會被調(diào)用跑慕。
componentWillUnmount在組件從 DOM 中移除之前立刻被調(diào)用。
三骡和、案例
getSnapshotBeforeUpdate(preProps) {
const{modalVisible}=preProps;
return!modalVisible&&modalVisible!==this.props.modalVisible;
? }
// 當(dāng)組件的modalVisible更新后立即調(diào)用
componentDidUpdate(props,state,snap) {
if(snap) {
const{initData: {expressionContent,sourceId,modelId,modelType} }=this.props;
if(!isUndefined(sourceId)) {
if(modelType===MODEL_TYPE.ASSET){
this.fetchTableColumns({table:expressionContent,datasourceId:sourceId},modelId);
? ? ?? }
this.fetchModelById({modelId,modelType});
? ?? }
?? }
? }
?
