react.js 生命周期componentDidUpdate的另類用法：防止頁面過渡刷新

場景：數據新增成功之后，需要返回原來的查詢表，這時候的查詢，需要使用react的生命周期：componentDidUpdate

componentDidUpdate（） 這個生命周期的作用是當props或state更新之后，使用它更新DOM節點。如果使用不當，則查詢頁面會不停的調用查詢的方法，不停的執行刷新操作。因此，需要給新增的方法增加一個標志，通過這個標志，判斷，如果新增成功，則調用一次查詢方法，否則，則不調用。

這個標志，通常在 2 個位置使用：

1. action的 新增 方法中；
2. 查詢組件的 this.state 與 componentDidUpdate（） 中；

這兩個標志，分別是：
addGroupResponseFlag                  //新增成功的標志
addResponseFlagHas：false           //新增成功后是否更新標志，默認為false

 

下面代碼展示：

//action 方法，在return前使用
let addGroupResponseFlag = httpUtils.httpResponseFlag(params); return{ type: ADD_VERSION_GROUP, data: { params, //新增成功標志
 addGroupResponseFlag } }

//查詢組件 constructor(props){ super(props); this.state = { //新增完成之后是否更新標志，默認false
  　　addResponseFlagHas:false } //頁面更新數據之后需要調用這個生命周期componentDidUpdate
componentDidUpdate(){ /** * 給獲取數據的方法傳參數，分頁 */ let pageSize = this.state.pageSize; let pageNum = this.state.pageNum; /** * 這里使用的是ES6的對象解構賦值，api接收參數只有一個變量，這里的賦值，只是值{pageNum , pageSize}，傳的對象的值 */ let addGroupResponseFlag = this.props.versionGroupState.addGroupResponseFlag; let addResponseFlagHas = this.state.addResponseFlagHas; if(addGroupResponseFlag && !addResponseFlagHas){ this.setState({ addResponseFlagHas: true }); /** * addGroupResponseFlag && !addResponseFlagHas 為 true 時，執行重新查詢方法 */
  this.props.searchAppVersionGroup({pageNum , pageSize}); } /** * 如果有刪除 或 修改 依次把判斷方法寫在下面 */ }

 

如果有更好的方法，歡迎交流！