react组件mount好几次怎么办

导读 react组件mount好几次的解决办法:1、找到并打开“index.tsx”或者“index.js.....

react组件mount的解决方案好几次:1。找到并打开“index.tsx”或者“index.js文件;2.找到“root.render(<React.StrictMode><App /></React.StrictMode>);代码;3.将“React.StrictMode“高级组件可以包围去除。

本教程的操作环境:Windows10系统、react18.2.0版、Dell G3电脑。

react组件mount好几次怎么办?

React 18 componentDidMount重复执行两次解决方案

问题

这两天用create-react-app在项目运行过程中,创建了一个新的React项目,似乎发生了意想不到的事情,组件componentDidMount该方法被触发两次。

2f17c09c50c75db8a6310c2fb8921c1.jpg

更早的项目也被使用create-react-app创建的一个项目,却没有这个问题,当时真的是一脸懵逼。

排查

首先想到的是前几天当地的create-react-app升级,问题不是吗?create-react-app升级造成的,转而思考应该没关系。后来,我仔细比较了两个项目package.json文件,发现以前的项目,React用的是17.x版本;但问题项目是18.2.0版本的React。

后来去了React官方Github,果然,我找到了一些关于18版本的版本Feature,链接:https://github.com/facebook/react/blob/main/CHANGELOG.md#breaking-changes:

Stricter Strict Mode: In the future, React will provide a feature that lets components preserve state between unmounts. To prepare for it, React 18 introduces a new development-only check to Strict Mode. React will automatically unmount and remount every component, whenever a component mounts for the first time, restoring the previous state on the second mount. If this breaks your app, consider removing Strict Mode until you can fix the components to be resilient to remounting with existing state.
登录后复制

大意如下:

在未来,React它将提供一个新的特性,使组件在取消加载后能够保持状态。React 18会再Strict Mode引入新的开发模式。React每个组件将自动取消加载并重新加载。如果它干扰了你的应用程序,请删除它Strict Mode可以修复组件重新加载的问题。(我糟糕的英语翻译,就这样看。。。)

解决方案

了解原因后,解决方案也很简单,会index.tsx或者index.js文件里的React.StrictMode可以去除高级组件的包围。

修改前:

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
登录后复制

修改后:

root.render(
  // 去除React.StrictMode
  // <React.StrictMode>
    <App />
  // </React.StrictMode>
);
登录后复制

到目前为止,问题得到了完美的解决。

推荐学习:《react视频教程》

以上是react组件mount几次怎么办的详细内容,请关注php中文网的其他相关文章!

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。2023-01-23 12:00:33

猜你喜欢

最新文章