我的React组件渲染两次。因此,我决定逐行调试,问题出在这里:
if ( workInProgress.mode & StrictMode) {
instance.render();
}
React-dom.development.js
是因为严格模式吗?我可以禁用它吗?什么是严格模式?我需要它吗?我的React组件渲染两次。因此,我决定逐行调试,问题出在这里:
if ( workInProgress.mode & StrictMode) {
instance.render();
}
React-dom.development.js
是因为严格模式吗?我可以禁用它吗?什么是严格模式?我需要它吗?为了检测代码问题并提醒您(这可能非常有用),StrictMode在dev(但不是production)中会呈现组件两次。
如果您在应用程序中启用了StrictMode但不记得启用它,可能是因为您最初使用create-react-app或类似工具创建了应用程序,该工具会自动默认启用StrictMode。
例如,您可能会发现您的{app}被包装在<React.StrictMode>
中,在index.js中:
ReactDOM.render(
<React.StrictMode>
{app}
</React.StrictMode>,
document.getElementById('root')
);
如果是这样,您可以通过删除<React.StrictMode>
标签来禁用StrictMode:
ReactDOM.render(
{app}
document.getElementById('root')
);
StrictMode
应该作为最后的解决方案来移除。更详细的答案请参见 https://dev59.com/OlEG5IYBdhLWcg3wJlLh。 - Youssouf Oumar是的,你需要移除Strict模式,因为
Strict模式无法自动检测副作用,但它可以通过使副作用更加确定性来帮助你发现它们。这是通过有意双重调用以下函数来实现的:类组件构造函数、render方法和shouldComponentUpdate方法。
<React></React>
报错了。 - Marry Joanna<React.StrictMode>
,问题就会解决。 - JackyefStrictMode
视为最后的解决方案。更详细的答案请参见 https://dev59.com/OlEG5IYBdhLWcg3wJlLh。 - Youssouf Oumar对于像我这样使用Next.js的用户,严格模式也已默认启用并引起了此问题。
您可以通过以下方式禁用它
// next.config.js
module.exports = {
reactStrictMode: false,
}
那么:
React Developer Tools Chrome Extension提供了一个选项,可以在StrictMode下隐藏第二次渲染期间的日志。要启用此选项:
next.config.js
文件并将reactStrictMode设置为false。module.exports = {
reactStrictMode: false,
};
但是在开发中建议使用严格模式,一旦您确定双重安装是由严格模式引起的,最好启用它。
看起来组件会渲染两次,但第一个渲染的组件并没有卸载?至少在使用React 17时我看到了这种行为,当然也可能是我的代码有bug。
StrictMode
视为最后的解决方案。更详细的答案请参见 https://dev59.com/OlEG5IYBdhLWcg3wJlLh。 - Youssouf Oumar