freeCodeCamp/guide/chinese/react/life-cycle-methods-of-a-com.../index.md

2.7 KiB
Raw Blame History

title localeTitle
Life Cycle Methods Of A Component 组件的生命周期方法

组件的生命周期方法

当我们开始使用组件时,我们需要执行多个操作来更新状态或在该组件中发生更改时执行某些操作。在这种情况下,组件的生命周期方法会派上用场!因此,让我们在本文中深入探讨它们。

从广义上讲,我们可以将生命周期方法分为3类。

  1. 安装
  2. 更新
  3. 卸载

由于生命周期方法是自解释的,我只想提一下方法名称。如有必要,请随时为本文做出贡献。

安装:

一个。 constructor()

componentWillMount()

C。 render()

d。 componentDidMount()

更新:

一个。 componentWillRecieveProps()

shouldComponentUpdate()

C。 componentWillUpdate()

d。 render()

componentDidUpdate()

卸载:

一个。 componentWillUnmount()

一些有趣的事实需要注意:

  • constructor componentWillMount componentDidMountcomponentWillUnmount将在组件的生命周期中仅调用一次。
  • 仅当shouldComponentUpdate返回true时才会执行componentWillUpdatecomponentDidUpdate
  • componentWillUnmount()将在卸载任何组件之前调用因此可用于释放已用内存关闭与DB的任何连接等。

通过深入编码可以学到很多东西。因此,通过编码让你的手弄脏。

注意:

“将在未来的16.x版本中启用弃用警告 但遗留生命周期将继续有效直到版本17. ” 1

“即使在版本17中它仍然可以使用它们但是它们将带有”UNSAFE_“前缀别名以表明它们可能会导致问题。我们还准备了一个自动脚本,用现有代码重命名它们 。” 1

换句话说这些previouse生命周期方法仍然可用作

  • UNSAFE_componentWillMount
  • UNSAFE_componentWillReceiveProps
  • UNSAFE_componentWillUpdate

新的生命周期方法

React 17中将引入新的生命周期方法

  • getDerivedStateFromProps将是componentWillReceiveProps的更安全的替代品。
  • 将添加getSnapshotBeforeUpdate以支持安全地从DOM更新中读取属性

通过深入编码可以学到很多东西。因此,通过编码让你的手弄脏。

来源

  1. 沃恩,布莱恩。 “React v16.3.0新的生命周期和上下文API”。 2018年3月29日。访问时间2018年5月22日。

资源

更新异步渲染