为什么 useEffect 运行两次？

Question

import { useContext, useEffect, useState } from 'react';

const Log =  ()  =>  {
    useEffect(()  => {
        console.log('Running ...')
    },[])

    return(<p>here</p>)

}

export default Log;

每当此代码运行时，我都会 在浏览器控制台中收到两次正在运行...消息。

我认为它应该运行一次，因为我在 useEffect 中有一个空的第二个参数。

谁能解释一下为什么它运行两次？

Answer 1

这是由于根树中最有可能的< StrictMode > 造成的。

什么是严格模式？

StrictMode 是一个用于突出显示应用程序中潜在问题的工具。

它如何使useEffect()运行两次？

它为其后代激活额外的检查和警告，或者换句话说......渲染两次。

Note:严格模式检查仅在开发模式下运行；它们不会影响生产构建。