为什么在第一次渲染时，useEffect 内部的代码会运行两次？

16 浏览
0 Comments

为什么在第一次渲染时，useEffect 内部的代码会运行两次？

控制台.log运行两次。下面说的是严格模式的原因：

React Hooks: useEffect()即使使用空数组作为参数，也会被调用两次

为了检测代码中的任何问题并警告您（这可能非常有用），StrictMode会两次渲染组件（在开发环境中，而不是在生产环境中）。

但是我不明白为什么！它说：为了检测代码中的任何问题并警告您。但是问题是什么？警告什么？

是否有办法在不移除应用中的严格模式的情况下消除这种（两次运行）？

这是我的代码：

import {useEffect, useState} from "react";
import BlogList from "./BlogList";
const Home = () =>{
    const [blogs, setBlogs] = useState([
        { title: 'My new website', body: 'lorem ipsum...', author: 'mario', id: 1 },
        { title: 'Welcome party!', body: 'lorem ipsum...', author: 'yoshi', id: 2 },
        { title: 'Web dev top tips', body: 'lorem ipsum...', author: 'mario', id: 3 }
    ]);
    const [name, setName] = useState('mario');
    const handleDelete = (id) => {
        const newBlogs = blogs.filter(blog => blog.id !== id);
        setBlogs(newBlogs);
    }
    useEffect(() => {
        console.log("useEffect被调用");
        console.log(name);
    },[name]);
    return(
            
            
            {name}
    );
}
export default Home;

完整的代码：

https://codesandbox.io/s/interesting-buck-omruo8

0

1 答案

0 Comments

问题的原因是React在开发模式下会使用StrictMode来检测代码中的问题，其中之一就是会导致useEffect内的代码运行两次。而在生产模式下，这个问题不会出现。

解决这个问题的方法是移除StrictMode标签，这样就不会再出现双重渲染了。

StrictMode标签无法自动检测副作用，但它可以通过使副作用更加确定性来帮助我们发现它们。但需要注意的是，这个双重渲染只在开发模式下出现，在生产模式下是不会有的。

另外，StrictMode标签的双重渲染是为了进行一些检查，包括识别不安全的生命周期方法、警告关于已弃用的字符串引用API的使用、警告关于已弃用的findDOMNode方法的使用以及检测意外的副作用等等。

如果想要了解更多细节，请查阅React文档中的相关部分。

总结起来，StrictMode的双重渲染是为了在开发模式下检测代码问题，如果不想要双重渲染，可以移除StrictMode标签。

0