为什么代码内部使用效果在第一个渲染中运行两次？

Question

Console.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 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-omrou8

Answer 1

StrictMode渲染组件两次，以检测开发过程中代码的任何问题。您应该在生产上没事。如果您绝对不想要双渲染，请删除标签。

严格模式无法自动检测到您的副作用，但是
可以通过使它们更加确定性来帮助您发现它们。

注意：
这仅适用于开发模式。生命周期不会在生产模式下进行双重影响。