React18中使用useEffect初始执行2次

出现问题：

由于新版React推荐使用函数式组件，旧版本的React的类式组件的一些钩子和路由组件都无法继续使用，取而代之的是hooks

今天在使用React18，兼容以前旧版本的React的时候，需要将componentDidMount等钩子，使用useEffect这个hooks代替

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//以下代码为伪代码
const navigate = useNavigate()
const [self_open,setSelf_open] = useState(true);
 useEffect(()=>{
        if(isTrue()){
            getSelf().then((res)=>{
                setSelf_open(res.data.open)
            })
        }
        else{
            message.error("无法访问！");
            console.log("无法访问！")
            navigate("/text")
        }
    },[])

代码大概业务就是，组件加载完成，判断是否符合要求，符合要求则请求后端接口，修改状态，否则弹窗并且跳转路由

按照我原本想法，使用useEffect，监听空数组，也就是使其初始化的时候执行一次，相当于类式组件中的componentDidMount，在测试不符合要求的情况下的时候，发现弹窗2次，输出了2次，起初以为是程序的bug。后来通过查阅React官网发现造成这种情况的原因

• 这是React18的新特性，只有在开发模式下且使用了严格模式才会触发2次，生产环境与原来一样
• 执行2次是为了模拟立即卸载组件和重新挂载组件
• React未来会增加特性，允许其保留状态的同时能够做到仅仅删除或者添加UI部分

解决方案：

方法1：同时也是最简单的方法，在index.js中取出StrictMode，关闭严格模式

方法2：按照React官方的说法

The right question isn’t “how to run an Effect once,” but “how to fix my Effect so that it works after remounting”.

React官方是希望我们解决重复挂载卸载，useEffect支持返回函数，可以在组件卸载额时候执行函数，通常可以实现清理函数并在useEffect返回。

最后

以上就是英俊芒果最近收集整理的关于React18中使用useEffect初始执行2次的全部内容，更多相关React18中使用useEffect初始执行2次内容请搜索靠谱客的其他文章。