在 React 16.8 hook 被發表前，原先的 class component 會有自己的生命週期。

渲染在畫面上的元素，有這三個階段

Mount：元件被渲染到畫面上
⇩
Update：元件的內容因為資料的更動而重新渲染
⇩
Unmount：元件從畫面上消失，移除元件

而有了 hook 的 functional component 不僅可以利用 hook 產生生命週期，且程式碼也較簡短好讀，functional component 也成為了現在的開發主流。

不過有了新人還是不能忘舊人啦，所以今天就跟著我一同來認識 class component 吧

在 Mounting 部分

當一個 component 被建立且加入 DOM 中時，其生命週期將會依照下列的順序呼叫：

• constructor()：用來指定初始 state 的值
• render()：class component 唯一必要使用的 method
• componentDidMount()：當一個 component 被生成後，會呼叫此 function ，所以可以寫一些初始化 function ，所以也很適合放一些遠端資料的網路請求（call API 之類的）

所以要產生一個 class component 可以如下方範例即可

class App extends React.Component {
  render() {
    return (
      <div>
        <h2>class component 試寫</h2>
      </div>
    );
  }
}

較完整版

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      count: 0
    };
  }
	// 只會載入一次，且不會因為 state 被更新而再次呼叫
  componentDidMount() {
    console.log("mount");
    document.getElementById("mount").innerHTML = `component 載入成功，初始值為 ${this.state.count}`;
  }

  render() {
    return (
      <div>
        <h2>class component 試寫</h2>
        <p id="mount"></p>
      </div>
    );
  }
}

接下來進到了 Update 階段

• render()：state 更新後重新 render component
• componentDidUpdate() ：初次 render 時不會呼叫，而是在state更新後被呼叫。

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      count: 0
    };
  }
  // state 每次更新都會呼叫，所以當裡面有 setState 時須小心進入無限迴圈
  componentDidUpdate() {
    console.log("update");
    if (this.state.count > 5) {
      document.getElementById("update").innerHTML = `點太多次囉，扣你一點`;
      this.setState({
        count: this.state.count - 2
      });
    }
  }
  render() {
    const { count } = this.state;
    return (
      <div>
        <h2>class component 試寫</h2>
        <p>數字：點了 {count} 次</p>
        <button
          onClick={() => {
            this.setState({
              count: this.state.count + 1
            });
          }}
        >
          Click me !
        </button>
        <p id="update"></p>
      </div>
    );
  }
}

最後啦 Unmounting

• componentWillUnmount()：會在 component 被 unmount 和 destroy 後呼叫。

class Menu extends React.Component {
  // component  取消引用後呼叫
  componentWillUnmount() {
    alert("unmount");
  }
  render() {
    return <h3 style={{ color: "pink" }}>挖洗 Menu 啦</h3>;
  }
}

最後結合成果：codePen

搭拉～～～