iT邦幫忙

2021 iThome 鐵人賽

DAY 14
0
自我挑戰組

React 學習之路系列 第 14

學習 Hook( Day14 )

在截稿為止, 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的差異


上一篇
Composition vs 繼承( Day13 )
下一篇
Hook 概觀( Day15 )
系列文
React 學習之路30

尚未有邦友留言

立即登入留言