上一章 Day 20 - React 安裝與導入需要的package

Component 是 React 中很重要的一環, 其中包括複雜的生命週期, 與各種不同的寫法

也是初學者最容易搞混的地方, 我們將一一介紹。

Component 的撰寫方式分為ES6 Class Component與Stateless Component

• Class Component:

  使用ES6 class, 可以控制state, 進行較複雜的操作, 與控制生命週期, 較stateless耗費資源。

• Stateless Component:

  使用Function Component的寫法, 單純render UI的 stateless component,

  沒有內部狀態, 沒有生命週期函數, render速度較快。

Component 的生命週期:

• Mounting

  1. componentWillMount()
  2. componentDidMount()

• Updating

  1. componentWillReceiveProps(object nextProps)
  2. shouldComponentUpdate(object nextProps, object nextState)
  3. componentWillUpdate(object nextProps, object nextState)
  4. componentDidUpdate(object prevProps, object prevState)

• Unmounting

  1. componentWillUnmount()

一般而言載入Component觸發的順序為:

1. Consturctor
2. componentWillMount
3. compontDidMount

點擊Click或觸發更新state時

1. componentWillUpdate
2. componentDidUpdate

生命週期講起來很抽象, 會在之後的教學中實作給大家看

下一章 Day 22 - React 第一個Component