iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 8
5

前言

本篇會開始提及 React 本身的基本用法和使用觀念,大概會提個三四篇,和去年不同的是,所有範例都會使用 Hooks ,如果有任何問題再麻煩留言告訴我,謝謝!


前置準備

  1. 今天閒聊 Hooks 。
  2. 一顆擁有學習熱忱的心。

Hooks

Hooks 能夠讓開發者在 Class 外的地方,盡情揮灑 React 的特性。

Class Component

Hooks 是今年年初放上正式版的,它出現在 React v16.8 版本,而在它出現前,撰寫 Component 的首要手段就是使用 Class,例如:

也許看到上方的例子,可能會想說:

我還是可以使用 Function Component 啊!

Umm...是這樣沒錯,但如果 Main 是一個計數器呢?擁有自己的 State 的那種:

噢,那這看起來還是得用 Class。

在非 Hooks 時代你應該會這麼想,或者該說:「你只能這麼想。」

也許上方的例子還不夠觸動對 React 不熟的讀者,認為我從小看到的 React 就是這樣,

怎麼了嗎?

是不會怎麼了,因為官方也有提到說,Hooks 的更新是向下相容的,並非得學習使用 Hooks,你仍然可以在 Class 上揮灑青春。

但是!Hooks 在不影響你對 React 的了解下,對原有的特性做了更直觀的應用。

與其解釋,不如直接繼續向下,用體感感受申裝 Hooks 後的 Main 會變得如何。

Function Component

關於 Function Component 的部分,之前也被稱作為 Stateless Component(無狀態組件)。

Stateless Component 就如同字面,在該 Component 中,無法使用 State 或 Life,雖然它還是能接收 Props,然後回傳一個 Dom。

但那是之前了!

Hooks 讓 Function Component 變得不同。

就以計數器的例子來對照, Hooks 會這麼做:

是不是乾淨多了?使用了 Hooks,便不需要再確認 this 的指向是否正確,且在更新的時候也不需再用 this.setState 更新整個 State,因為在 Hooks 中,每個 State 都是分開來的,怎麼設計都取決於開發者。

然後其實有些人會擔心,Hooks 的生態圈是不是和 Class Component 一樣,會不會碰到目前套件無法使用的狀況,

我得說會!

最明顯的就是 Enzyme ,這是用來對 Component 做 Render 測試的套件,但是在 Hooks 剛出現時,他無法快速應對新環境帶來的衝擊,所以在那時我便放棄他了。

不過不用擔心!

因為 Hooks 的出現在 React 的生態圈中是一個趨勢,上方提到的 Enzyme 的作者,包含使用該套件的開發者,在發現問題後,都不斷地投入心思處理,至今也完成了大部分對 Hooks 的支援:


issue 來源: https://github.com/airbnb/enzyme/issues/2011

所以真的不用擔心, Hooks 的陣痛期在這半年過的差不多了,基本的套件都有辦法找到出路,各位就放心學吧!如果真的不行的話,就來 iThelp 勇敢發問吧!踩坑也是大家一起對吧 XD!

至於真的有人上 Hooks 到專案裡了嗎?

當然有啊!

至少筆者的社群圈內,React 一釋出 Hooks 正式版本更新,大家就都沸沸揚揚的討論使用心得,甚至是直接拔掉 Redux 的開發者也有 相關文章 (但建議熟悉基本的 React 和 Redux 後在閱讀會比較容易了解)。

雖然前端流動的速度很快,但至少就一次,別想太多,一起走在尖端上吧 :D


結尾

本篇文章讓大家稍微了解 Hooks,如果有漏講的觀念,或是好奇什麼,再麻煩各位留言告訴我!謝謝大家!

明天起的章節會從 useState 開始,讓大家習慣新生的 React。


上一篇
Day06 | 一次說完 JSX 基本用法
下一篇
Day08 | Function Component 的 State 在哪裡
系列文
在 React 生態圈內打滾的一年 feat. TypeScript31

尚未有邦友留言

立即登入留言