开发笔记📐 发现👽 人物👮 趣闻💦
[problem solve]解决react unsafe生命周期方法报警

[problem solve]解决react unsafe生命周期方法报警
2020-02-04 10:01:20   点击:

warning内容:

Warning: componentWillMount has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles for details.

* Move code with side effects to componentDidMount, and set initial state in the constructor.

* Rename componentWillMount to UNSAFE_componentWillMount to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.

react-dom.development.js:12357 Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles for details.

...

原因:React v16.9之后,当你在新版本中使用旧的生命周期方法时,会提示该警告。

componentWillMount → UNSAFE_componentWillMount

componentWillReceiveProps → UNSAFE_componentWillReceiveProps

componentWillUpdate → UNSAFE_componentWillUpdate
 

解决方案:

1. 尝试按照警告信息中提供的命令解决。

 npx react-codemod rename-unsafe-lifecycles

2. 该codemod 脚本可以自动重命名我的代码。但是这里的原因是umi包的原因。

3. 找到Umi的issue,一个可行的方案是固定react的版本。

"react": "16.8.6",
"react-dom": "16.8.6"

 

react warning 生命周期

上一篇:vue修改数组中对象属性值页面不同步更新渲染问题处理
下一篇:phpcms列表查询附带点击量的优化方案