在截稿為止， React 最新的版本是 v17.0.2 ，而從 React 16.8.0 是第一個支援 Hook 的版本

對一個初學 React 的自己來說，很困惑的就是 function component 跟 class comonent 的差異，很難決定到底要寫什麼。而自從 React 16.8.0 支援了 Hook 的版本，兩種 component 的使用選擇上又有了新的變化。下面系列文章開始學習 Hook 的部分，以下是學習 Hook 的想法：

1. 理解 Hook 要解決什麼問題
2. 認識 Hook 語法寫法
3. 使用 Hook ，跟 React 一起成長
4. 認識其他概念，ex： render props、higherorder component

理解 Hook 要解決什麼問題

官方在 React 使用一段時間後，發現一個使用上的問題，於是提出 Hook 作為解法。
以下問題羅列，而列出的問題如何用 Hook 去實際解決也會在慢慢認識 Hook 之後了解。

• 在 Component 之間重用 Stateful 的邏輯很困難
  => 打造你自己的 Hook

• 複雜的 component 變得很難理解
  => 使用 Effect Hook

• Class 讓人們和電腦同時感到困惑，開發者需了解 this 運作，並在最佳化會遇到的困難
  => 擁抱 function，讓 function 更完整支援 React 功能

認識 Hook 語法寫法，我的第一個 Hook

import React, { useState } from 'react';

function Vender() {
  const [banana, takeBanana] = useState(0);

  return (
    <div>
      <p>I have {banana} bananas</p>
      <button onClick={() => takeBanana(banana + 1)}>
        I take it!
      </button>
    </div>
  );
}

Codepen

使用 Hook ，跟 React 一起成長

1. 目前 React 沒有計畫要移除 Class。
2. Hook 向下相容，實際上還是常能遇到 Class 與 Hook 混用
3. Hook 與 Hook 的其他問題

以上今天。

參考資料：
React Functional Component 與Class Component的差異