reactjs 为什么useEffect运行两次?

hyrbngr7  于 2023-01-17  发布在  React
关注(0)|答案(4)|浏览(196)
import { useContext, useEffect, useState } from 'react';

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

    return(<p>here</p>)

}

export default Log;

无论何时运行此代码,我都会在浏览器控制台中收到两次**Running...**消息。
我认为它应该运行一次,因为我在useEffect中有一个空的second参数。
有谁能解释一下为什么要运行两次吗?

tv6aics1

tv6aics11#

这是由于< StrictMode >最有可能在你的根树。

什么是严格模式?

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

如何使useEffect()运行两次?

它会为其子对象激活附加检查和警告,换句话说...渲染两次。
Note:严格模式检查仅在开发模式下运行;它们不影响生产构建。

rjee0c15

rjee0c152#

如果useEffect没有任何依赖项,则组件本身仅被调用一次。
这个答案会对你有帮助。
React Hooks: useEffect() is called twice even if an empty array is used as an argument

ssm49v7z

ssm49v7z3#

由于useEffect()的依赖项列表设置为空,因此每当重新呈现Log组件时,“console.log”将自动运行。
我认为组件树中的上下文或父组件可能有一些变化。
请检查您的项目结构。

<ContextProvider.Provider value={setGlobalState}>
  <ParentComponent>
    <Log/>
  </Parent Component>
</ContextProvider.Provider>
nfeuvbwi

nfeuvbwi4#

只需从src/index.js中删除<React.StrictMode> Package

相关问题