React 元件也有生老病死

我們知道元件會有狀態的變化,且上層元件也可以傳遞參數給下層元件,來讓元件產生變化。

在一個複雜的應用程式中,你通常會有攔截變化(不論是元件重新渲染、狀態更新、上層元件傳遞新的參數),並且進行後續相對應行為的需求。

因此,得知元件何時變化,就變得非常重要!在 React 中,元件的 class 有相對應的 method 可以幫助你攔截這些變化。

在了解這些 method 前,我們必須先清楚元件的生命週期(Component Lifecycle)

學習重點

這章節,我們將學習到

  1. 如何使用與元件生命週期相關的 method
  2. 每一個生命週期 method 的發生順序

了解「元件的生命週期」

元件的生命週期,就如同人類的生老病死,大致可以分為下面七個週期:

  1. Mounting:取得元件的初始參數和狀態,並且進行第一次的渲染
  2. DOM Mutations Complete:渲染完後,DOM 也跟著更新,使用者看到最新的畫面
  3. Mounted:元件已經更新完成,等待其他變化
  4. Receiving props:元件得到上層元件傳遞的新參數(props)
  5. Receiving state:元件的狀態(state)已經被更新,並且重新渲染,所以回到第 2 個週期
  6. Unmounting:元件即將被移除,一隻腳已踏進棺材
  7. Unmounted:元件的死亡階段

了解「元件生命週期的相關 method」

下方是每個生命週期中,會呼叫的方法:

那麼要如何使用這些方法呢?

直接在 class 中實作這些方法,你就可以攔截到元件的變化,並做後續的動作,例如:

如果你想更詳細的了解他的基本用法,你可以參考官方文件;或者如果你想玩玩看的話,可以參考這支 jsfiddle,打開開發者工具,在 console 中你可以看到 log。

重點整理

本章節,我們了解

  1. 元件是有生命週期的
  2. 每一階段的生命週期,都會呼叫相關的 method
  3. 實作這些 method,可以攔截到元件的變化,並且做後續的處理

最後補充

ReactJS 的快速體驗系列連載就到這裡囉!

我之後會在將整個系列進行校正和整理,並且做個「小筆記」給大家

這個系列的最大目標是希望大家

  1. 了解 React 的核心思維是什麼
  2. 了解 React 的開發體驗是什麼
  3. 了解 React 可以拿來解決什麼問題
  4. 思考更多 React 的可能
  5. 引起想動手實作 React 的慾望
  6. 最重要的是,學習新技術的樂趣

希望有達到以上目的了!

下一個計畫

  1. ReactJS 快速體驗系列 v2
  2. 什麼是 Flux / Redux 系列連載

如果各位有興趣的,在歡迎 follow 這一個 Publication 囉!

你應該會想看的

上一篇系列文章

音樂

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.