Fatal编程技术网
  • javascript/
  • Javascript 功能组件渲染四次-为什么不渲染两次？

Javascript 功能组件渲染四次-为什么不渲染两次？

javascript reactjs

Javascript 功能组件渲染四次-为什么不渲染两次？,javascript,reactjs,lifecycle,Javascript,Reactjs,Lifecycle,我遇到了这个简单的React函数组件，它渲染四次，而我希望它最初渲染一次，执行useffect更新状态，然后再次渲染。相反，控制台发送4个日志输出，表示它渲染了4次。了解react功能组件的基本生命周期的原因和资源吗 const{useState，useffect}=React； 函数App（）{ const[jobs，setJobs]=useState（[]）； useffect（（）=>setJobs（[“测试]），[]）； console.log（“应用程序”，作业）； 返回( 你好，代

我遇到了这个简单的React函数组件，它渲染四次，而我希望它最初渲染一次，执行useffect更新状态，然后再次渲染。相反，控制台发送4个日志输出，表示它渲染了4次。了解react功能组件的基本生命周期的原因和资源吗

const{useState，useffect}=React；
函数App（）{
const[jobs，setJobs]=useState（[]）；
useffect（（）=>setJobs（[“测试]），[]）；
console.log（“应用程序”，作业）；
返回(
你好，代码沙盒
开始编辑，看看神奇的发生！
{jobs}
);
}
ReactDOM.render(
,
document.getElementById（“根”）
);

发生这种情况是因为在您的代码沙盒中，您使用
包装您的
）：

严格模式不能自动为您检测副作用，但它可以通过使副作用更具确定性来帮助您发现副作用。这是通过故意双重调用以下函数来实现的：

类组件
构造函数
，
呈现
，以及
应组件更新
方法




@T.J.克劳德不是神器。在
index.js
中，它们将
包装在
中。这就是它的原因。我理解@T.J.Crowder，这是一个很好的例子，说明了为什么所有代码都是相关的，我将把它添加到问题中，以防其他人碰到同样的问题thing@AliNasserzadeh-我已经帮你做了。：-）@T.J.Crowder这是因为您使用的是CDN中的react生产版本，生产版本不会运行严格的性能模式reasons@AliNasserzadeh-是的，我想出来了并修好了。：-）