react.js 生命周期componentDidUpdate的另类用法:防止页面过渡刷新

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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});
  }

  /**
  * 如果有删除 或 修改 依次把判断方法写在下面
  */
}

 

如果有更好的方法,欢迎交流!

 

以上是关于react.js 生命周期componentDidUpdate的另类用法:防止页面过渡刷新的主要内容,如果未能解决你的问题,请参考以下文章

react 组件的生命周期

react——生命周期

React.js学习笔记之事件系统

React.js学习知识小结

我试图将顺风集成到 React Js 中,但出现此错误

我试图运行命令“npm run start”,它在 react js 中显示了这个错误