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

Question

Console.log 运行两次。 下面说这是为了推理Strict Mode ：

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

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

但我不明白为什么！ 它说： in order to detect any problems with your code and warn you about them 。 但问题出在哪里？ 并警告什么？

有没有办法在不从应用程序中删除Strict Mode的情况下摆脱这种情况（运行两次）？

这是我的代码：

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 is run");
        console.log(name);
    },[name]);
    return(
        <div className="Home">
            <BlogList blogs={blogs} title="All Blogs" handleDelete={handleDelete} />
            <button onClick={() => setName('arman')}>Delete name</button>
            <p>{name}</p>
        </div>
    );
}

export default Home;

完整代码：

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

Answer 1

StrictMode 两次呈现组件，以便在开发过程中检测代码的任何问题。 你在生产中应该没问题。 如果您绝对不想要双重渲染，那么只需删除标签。

严格模式不能自动为您检测副作用，但它可以通过使它们更具确定性来帮助您发现它们。

注意：这只适用于开发模式。 在生产模式下不会重复调用生命周期。

React Docs：严格模式