NextJS-如何在useEffect in React.StrictMode children中只执行一次代码？

Question

我有问题。我正在开发 nextJS 应用程序。 React 渲染我的组件两次。我知道这是因为 StrictMode。但是在React和nextJS文档中我发现他们强烈建议我们使用StrictMode。但是在我正在处理的应用程序的一部分中，我使用 useEffect 并且我想要在 useEffect 运行中使用一些代码，只需要一次而不是两次！因为运行在那里输入了两次代码，所以犯了一个严重的错误。那我该怎么做呢？我怎样才能使运行 useEffect 中的一些代码反应一次？我将 [] 作为 useEffect 的依赖项，但它没有用！例如这样的事情：

`//inside a component that is a child of React.StrictMode
useEffect(() => {
/* strict mode cuses adding something to body twice. I want to add it just once and without using cleanup function */
document.body.appendChild(something)

//it runs twice, too. I dont want it!
console.log('test')
}, [])
`

感谢您的帮助！

Answer 1

如果您使某些东西成为 useEffect 函数的依赖项，以便它仅在 'something' 发生变化时运行它，该怎么办？不幸的是，渲染两次以消除副作用正是严格模式的工作原理，并且没有很好的解决方法。尽管被推荐，但我并不总是使用它，而且我是 nextjs 的大用户。

Answer 2

一般建议每个效果都应该 return 一个“清理”函数，初始效果 + 清理应该是一个 no-op（因此 effect->cleanup->effect = effect ).在您的情况下，您可以在清理中删除附加的 DOM 节点：

useEffect(() => {
const node = document.body.appendChild(something)
return () => document.body.removeChild(node);
}, [])

严格模式的目标是为 React 的未来版本捕获此类问题，在奇怪的情况下效果可能运行两次（React 可能会卸载并重新安装组件，并且会出现错误）。

NextJS-如何在useEffect in React.StrictMode children中只执行一次代码？

NextJS- How to execute some codes just once in useEffect in React.StrictMode children?

javascript

reactjs

next.js

react-hooks