首页 > 代码库 > react.js 生命周期componentDidUpdate的另类用法：防止页面过渡刷新
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 }//页面更新数据之后需要调用这个生命周期componentDidUpdatecomponentDidUpdate(){ /** * 给获取数据的方法传参数，分页 */ 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的另类用法：防止页面过渡刷新
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。