043_对比新旧生命周期

我不能跟你讲最新的声明周期

咱先更新一下react最新版本

看看官网的CDN连接

给你推荐一个网站:bootcdn 这个网站前端的cdn都有

引入新版本

<!-- 引入新版react核心库 -->
<script type="text/javascript" src="../js/17.0.1/react.development.js"></script>
<!-- 引入新版react-dom，用于支持react操作DOM -->
<script type="text/javascript" src="../js/17.0.1/react-dom.development.js"></script>
<!-- 引入新版babel，用于将jsx转为js -->
<script type="text/javascript" src="../js/17.0.1/babel.min.js"></script>

在新版本的里面,原来的钩子有警告了

1615378599174

大概的意思就是,componentWillMount 这个钩子被重命名了,而且不被推荐使用了

babel.min.js:24779 You are using the in-browser Babel transformer. Be sure to precompile your scripts for production - https://babeljs.io/docs/setup/
u @ babel.min.js:24779
f @ babel.min.js:78
(anonymous) @ babel.min.js:206
DevTools failed to load SourceMap: Could not load content for chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/injectGlobalHook.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME
Inline Babel script:7 count-constructor
Inline Babel script:35 componentWillMount
Inline Babel script:66 render
react-dom.development.js:63 Warning: componentWillMount has been renamed, and is not recommended for use. See https://reactjs.org/link/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 18.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.

Please update the following components: Count
printWarning @ react-dom.development.js:63
warn @ react-dom.development.js:29
ReactStrictModeWarnings.flushPendingUnsafeLifecycleWarnings @ react-dom.development.js:11786
flushRenderPhaseStrictModeWarningsInDEV @ react-dom.development.js:24025
commitRootImpl @ react-dom.development.js:23209
unstable_runWithPriority @ react.development.js:2997
runWithPriority$1 @ react-dom.development.js:11528
commitRoot @ react-dom.development.js:23194
performSyncWorkOnRoot @ react-dom.development.js:22521
scheduleUpdateOnFiber @ react-dom.development.js:22079
updateContainer @ react-dom.development.js:25699
(anonymous) @ react-dom.development.js:26246
unbatchedUpdates @ react-dom.development.js:22627
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26245
render @ react-dom.development.js:26330
(anonymous) @ Inline Babel script:122
i @ babel.min.js:24730
r @ babel.min.js:24753
o @ babel.min.js:24770
u @ babel.min.js:24779
f @ babel.min.js:78
(anonymous) @ babel.min.js:206
react-dom.development.js:63 Warning: componentWillUpdate has been renamed, and is not recommended for use. See https://reactjs.org/link/unsafe-component-lifecycles for details.

* Move data fetching code or side effects to componentDidUpdate.
* Rename componentWillUpdate to UNSAFE_componentWillUpdate to suppress this warning in non-strict mode. In React 18.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.

Please update the following components: Count
printWarning @ react-dom.development.js:63
warn @ react-dom.development.js:29
ReactStrictModeWarnings.flushPendingUnsafeLifecycleWarnings @ react-dom.development.js:11798
flushRenderPhaseStrictModeWarningsInDEV @ react-dom.development.js:24025
commitRootImpl @ react-dom.development.js:23209
unstable_runWithPriority @ react.development.js:2997
runWithPriority$1 @ react-dom.development.js:11528
commitRoot @ react-dom.development.js:23194
performSyncWorkOnRoot @ react-dom.development.js:22521
scheduleUpdateOnFiber @ react-dom.development.js:22079
updateContainer @ react-dom.development.js:25699
(anonymous) @ react-dom.development.js:26246
unbatchedUpdates @ react-dom.development.js:22627
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26245
render @ react-dom.development.js:26330
(anonymous) @ Inline Babel script:122
i @ babel.min.js:24730
r @ babel.min.js:24753
o @ babel.min.js:24770
u @ babel.min.js:24779
f @ babel.min.js:78
(anonymous) @ babel.min.js:206
Inline Babel script:40 componentDitMount
DevTools failed to load SourceMap: Could not load content for chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/contentScript.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME
DevTools failed to load SourceMap: Could not load content for chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME

在18.x版本里面,可能你要写UNSAFE_开头的才能工作了

你现在不加UNSAFE_componentWillMount 他就不能工作了

在新版本里面

  • componentWillReceiveProps
  • componentWillUpdate
  • componentWillUpdate

你就怎么记,带有will的都要加上UNSAFE_前缀

来看官方怎么说,然后你就会发现React在搞一个叫异步渲染之更新的东西.

我们得到最重要的经验是，过时的组件生命周期往往会带来不安全的编码实践，具体函数如下：

  • componentWillMount
  • componentWillReceiveProps

  • componentWillUpdate

    这些生命周期方法经常被误解和滥用；此外，我们预计，在异步渲染中，它们潜在的误用问题可能更大。我们将在即将发布的版本中为这些生命周期添加 “UNSAFE_” 前缀。（这里的 “unsafe” 不是指安全性，而是表示使用这些生命周期的代码在 React 的未来版本中更有可能出现 bug，尤其是在启用异步渲染之后

说白了就是,这3个钩子,他设计的没有什么存在感,然后总有一些编码人员他在不太适合用的时候,他往里面写东西

他就觉得他这个被滥用了

他用UNSAFE_提示你轻易不要用

这回还行,还能用,下次就直接不加前缀不让你用了

你真正开发的时候你就,知道了,这3个钩子基本上不用

所以你就响应React的号召

现在只是提高了一些你使用的难度

网上还有很多人说了:这3个钩子即将废弃,也是不无道理的

对比一下

旧的图

1615374349820

新的图

1615379804015

对比

挂载时

1615379998359

新的声明周期 VS 旧的声明周期

废弃了3个钩子

  • componentWillMount
  • componentWillReceiveProps
  • componentWillUpdate

产生了2个新的钩子

  • getDerivedStateFromProps
  • getSnapshotBeforeUpdate

在官方文档中说了,这2个新的用法极其罕见,所以你就当不知道

results matching ""

    No results matching ""