[ Day 13 ] React 的生命周期 - Unmounting

https://ithelp.ithome.com.tw/upload/images/20210925/20134153IY9la1orIP.png
今天终於要进入到生命周期的最後一个阶段: Unmounting 了!在元件要被卸载的这个阶段会发生什麽事呢?


Unmounting 卸载

一个 Component 从 DOM 中被移除时。

https://ithelp.ithome.com.tw/upload/images/20210925/201341530iClW0xufY.png

白话文来说就是指当元件要从画面中被移除时的阶段,这样的说明可能还是有点模糊,没关系!接下来会提供范例程序码让大家搞清楚这一切。那我们就来看在 Unmounting 这一个最後的生命周期当中唯一的一个方法:
componentWillUnmount()
会应用在什麽样的情况和地方吧!

componentWillUnmount()

在ㄧ个 Component 被移除和摧毁後马上被呼叫的方法。

所以针对这个方法,我们主要会用在清除 Cookie 或 Local Storage 等资料。另外,我们也在 Day 11 Mounting 阶段中的 componentDidMount() 方法中提过,如果有绑定监听的话必须要在 componentWillUnmount() 这个方法中去移除这个监听,否则一样会产生重复监听的问题。

官方文件中还有提到一个小细节,就是如果你在 componentWillUnmount() 中去使用 setState() 来修改元件内的 state 值的话并不会让画面重新渲染喔!因为该元件实体被移除之後,就不会再经历到 Mounting 的阶段了。


何时被移除的?

看完上面的说明跟官方文件之後,其实我内心还是有一个困惑:到底要怎麽知道元件是在何时被移除的啊?

这边真的很感谢有前辈们的文章和范例程序码帮我解开了这个谜团,在 Yvonne 大大的文章: Day 06-生命有限好好把握(Lifecycle) 当中,提供了一个非常棒的 CodePen 范例 就是使用 componentDidMount()componentWillUnmount() 这两个生命周期的方法来呈现出一个元件的开始挂载和最後的结束卸载

这个范例实现的功能是当点击画面中的按钮後,元件会开始挂载在 DOM 中并印出 componentDidMount 的字串,接着每隔 1 秒再印出 hello world 字串;当再次点击按钮,元件就会被移除 DOM 中并印出 componentWillUnmount 的字串,代表元件的生命周期结束了。
所以我们可以透过这个范例来观察元件的生命周期变化:

  1. App 的 Component 中做 state 的判别条件,判断现在是否要挂载元件 Timer
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      timerOn: false
    };
    this.toggleTimer = this.toggleTimer.bind(this);
  }

  toggleTimer() {
    this.setState({
      timerOn: !this.state.timerOn
    });
  }

  render() {
    const buttonText = this.state.timerOn ? "停止timer" : "开启timer";
    return (
      <div>
        <button onClick={this.toggleTimer}>{buttonText}</button>
        {this.state.timerOn && <Timer />}
      </div>
    );
  }
}
  1. Timer 元件内使用 componentDidMount()componentWillUnmount() 这两个生命周期的方法,便可以透过印出的字串来判别元件目前所在的生命周期阶段为何?
class Timer extends React.Component {
  // Mounting 生命周期的方法
  componentDidMount() {
    console.log("componentDidMount");
    this.timer = window.setInterval(() => {
      console.log("hello world");
    }, 1000);
  }
  // UnMounting 生命周期的方法
  componentWillUnmount() {
    window.clearInterval(this.timer);
    console.log("componentWillUnmount");
  }
  // Class Component 必备的 render() 方法
  render() {
    return <div>timer is running</div>;
  }
}

上面的范例建议大家可以打开 CodePen 的程序码直接跑一次看看,这样会能够更理解元件究竟是怎麽经历过一个完整的生命周期的。

那今天的内容到这边结束罗!一转眼生命周期的篇章也这样告一个段落了,其实我个人觉得 React.js 中的每个生命周期方法的命名都非常白话,基本上就是元件目前进行到哪一个阶段的直接说明,所以会比较容易有记忆点。

下一篇!也就是明天!
我们终於要进入到久仰大名的 React Hooks 啦~
内心充满期待之余还是希望各位大大可以多多指教唷!
那我们下篇见ʘ‿ʘ


<<:  [Day_14]选择性结构- 多向选择结构、条件判断与运算子「in」

>>:  #12-套件掰!用JS 做进场特效 (Intersection Observer API)

Day 01:前言

先来自我介绍一下好了,我是刚转职踏入软件业的全端菜鸟工程师,也是第一次参加铁人赛。 相信许多还在努力...

[Day 8] 设计UI画面-Figma

昨天已经把功能规画完了, 接下来就需要画成UI,前端开发时会比较方便 也避免程序写完後才发现画面不合...

Day 29 - Rancher Fleet Helm + Kustomize 应用程序部署

本文将於赛後同步刊登於笔者部落格 有兴趣学习更多 Kubernetes/DevOps/Linux 相...

[Day 4] 阿嬷都看得懂的 CSS, JavaScript 在干嘛

阿嬷都看得懂的 CSS, JavaScript 在干嘛 那麽,我们要怎麽看 CSS 扮演的角色呢? ...

乔叔教 Elastic - 30 - Elasticsearch 的优化技巧 (4/4) - Shard 的最佳化管理

Elasticsearch 的优化技巧 系列文章索引 (1/4) - Indexing 索引效能优化...