React.js 组件生命周期 - 卸载

  • ComponentWillUnmount 是卸载阶段中唯一执行的方法。
  • 当元素树中没有与该组件匹配的元素时，组件进入此阶段。
  • 在组件从实际 DOM 中移除之前，会调用此方法。
  • 除了从 DOM 树中移除此组件之外，该组件的所有子组件也会自动移除。
  • 组件从 DOM 中移除后，它将在 React 中可供垃圾回收。
  • 可以在此方法中执行清理活动。例如，清除应用程序中使用的本地存储变量、清除会话、清理图表、清理计时器、取消挂起的 API 请求等。
componentWillUnmount(){
   this.resetSession(); //example method to clean data
}
  • 清理活动有助于提高性能、避免内存泄漏和维护安全性。
  • 在最新的 16.4+ 版本中，三个方法被标记为已弃用并已重命名。这些方法将在 React.js 的下一个主要版本中移除。
    • componentWillReceiveProps 更改为 UNSAFE_componentWillReceiveProps。此方法使用 getDerivedStateFromProps 方法以安全且静态的方式实现。
    • componentWillMount 更改为 UNSAFE_componentWillMount。此方法中的代码应根据逻辑移动到 componentDidMount 或构造函数中。
    • componentWillUpdate 更改为 UNSAFE_componentWillUpdate。安全实现为 getSnapshotBeforeUpdate。如果此方法返回任何值，则该值将用作下一个方法（即 componentDidUpdate）的参数。
    • 如果用户关闭浏览器，则 componentWiIlUnmount 将不会完成。
    • componentWillUnmount 没有参数。不应从此方法调用 setState。这是对组件的一次性调用。此方法的目的是销毁组件创建的副作用。
    • 组件卸载后，我们无法再次使用它。每次都会创建一个新的组件。
    • 此外，如果虚拟 DOM 和实际 DOM 没有差异，React 也可以停止更新阶段。

更新于： 2019年9月4日

317 次浏览

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告