郑州学校网站建设,网易企业邮箱名称,做网站都需要会什么软件,wordpress禁止某ip1、问题描述 最近在写react的时候碰到了一个很奇怪的问题。 可以看到那个getXXX()的方法一直不断的被调用#xff0c;网页一直请求#xff0c;根本停不下来了。 2、产生原因 要弄明白这个原因#xff0c;首先要先了解一下react生命周期。 react是组件式的编程#xff0c;一…1、问题描述 最近在写react的时候碰到了一个很奇怪的问题。 可以看到那个getXXX()的方法一直不断的被调用网页一直请求根本停不下来了。 2、产生原因 要弄明白这个原因首先要先了解一下react生命周期。 react是组件式的编程一个react项目启动以后先是会加载好网页的DOM结构 所谓的DOM结构其实就是常见的一些web标签比如html、body这些。就是绘制一个网页的基本框架。 网页的DOM结构加载完以后再去渲染react组件到页面上去Mounting挂载阶段把组件插入真实DOM。调用了setStateuseState的setState后就到了第二个Updating更新重新渲染(render)阶段。setState请求了好多次就是发生在Updating更新阶段。 因为我是想在第一次打开这个页面的时候就从后端请求数据并把返回的数据渲染到页面上去根据代码是顺序执行的代码从上往下顺序执行执行到getXXX()这个方法的时候会请求后端以及渲染数据。但问题就出现在这里getXXX()方法会被不断的调用因为每次setState()的时候都会重新render一次页面异步过程于是整个页面的代码又会从头到尾执行一次。相当于每次render都会顺序把getXXX()里面的代码都顺序执行一下每次render都又加了新的setState然后无限嵌套递归的这种...... 3、解决方法 注因为不方便直接贴公司的代码这里我就用自己写的Demo了。
3.1、使用useEffect函数 在listAllPeople()方法外面再加一层方法getData()在useEffect里面调用getData()并把useEffect的第二个参数为[ ]表示只在第一次render的时候调用一下。
const getData(){//get请求无参数listAllPeople().then((response) {const result response.data;console.log(response);console.log(result);setpeopleDTOList(result.PeopleDTOList);console.log(peopleDTOList)});
};useEffect(() {getData();
}, []); 然后你会发现useEffect()调用了两次getData()方法这是由于严格模式下为了确保请求响应成功所以特地多执行了一次useEffect。当然如果你不想请求两次的话也可以取消严格模式。找到入口页面的React.StrictNode并删除就退出严格模式了。 退出严格模式后useEffect就只执行了一次了。 4、总结 无 5、参考资料
React useEffect 两个参数你用对了吗 - 掘金
react 严格模式控制台调用两次问题_使用react.strictmode,接口调用两次_轻狂的书生的博客-CSDN博客
使用 Effect Hook – React (reactjs.org)
Hook 简介 – React (reactjs.org)
react 严格模式控制台调用两次问题_使用react.strictmode,接口调用两次_轻狂的书生的博客-CSDN博客 react关闭严格模式-掘金 (juejin.cn)
react 严格模式控制台调用两次问题_使用react.strictmode,接口调用两次_轻狂的书生的博客-CSDN博客
防止 React 触发 useEffect 两次 - 知乎 (zhihu.com)
useEffect – React
深入详解React生命周期 - 掘金 (juejin.cn)
React 组件生命周期 | 菜鸟教程 (runoob.com)
HTML DOM 教程 | 菜鸟教程 (runoob.com)
