由于严格模式，我的反应组件呈现了两次

我的反应组件呈现了两次。因此，我决定逐行进行调试，问题就在这里

 if ( workInProgress.mode & StrictMode) {
instance.render();
}

React-dom. development. js

是因为严格模式吗? 我可以禁用它吗? 什么是严格模式? 我需要它吗？

66125 次浏览
小开

是的，您必须删除严格模式为

严格模式 不行自动为您检测副作用，但它可以帮助您发现他们，使他们更确定一点。这是通过有意双重调用以下函数来实现的: Class 组件构造函数、 render 和 should dComponent entUpdate 方法。

资料来源: React Docs: 严格模式

小开

StrictMode 会两次呈现组件(在开发环境中，但不是在生产环境中) ，以便检测代码中的任何问题并提醒您注意(这非常有用)。

如果您在应用程序中启用了 StrictMode，但不记得启用过它，这可能是因为您最初使用 create-response-app 或类似的方法创建应用程序，默认情况下它会自动启用 StrictMode。

例如，您可能会发现您的{ app }在 index.js 中被 <React.StrictMode>包装:

  ReactDOM.render(
<React.StrictMode>
{app}
</React.StrictMode>,
document.getElementById('root')
);

如果是这样，您可以通过删除 <React.StrictMode>标记来禁用 StrictMode:

  ReactDOM.render(
{app}
document.getElementById('root')
);
小开

似乎组件呈现了两次，但是第一次呈现的组件是未装载的 没有？至少这是我在 React 17中看到的行为，当然，这可能是我的代码中的一个 bug

小开

我的解决方案是通过环境变量自动删除 StrictMode。


const strictMode = process.env.NODE_ENV === 'production';


root.render(
(strictMode && (
<React.StrictMode>
<App />
</React.StrictMode>
)) || <App />,
);
小开

对于像 my-self 这样的 Next.js 用户, 在默认情况下也启用了 strict 模式，并导致此问题。

你可以通过这种方式禁用它

// next.config.js
module.exports = {
reactStrictMode: false,
}

提交答案