iT邦幫忙

鐵人檔案

2022 iThome 鐵人賽
回列表
Modern Web

React Hook 不求人,建立自己的 Hook Libary 系列

建立自己的 React Hook Libary !
不想起手又是useState,不想又再寫一樣的handler,不想換專案發現怎麼沒有這個hook又要再整理,利用三十天解決自己的開發苦惱!

鐵人鍊成 | 共 30 篇文章 | 18 人訂閱 訂閱系列文 RSS系列文 團隊桌遊玩樂團
DAY 1

[DAY 01] 我知道 React,但 Hook 是什麼?

大家好,我是查理!懷抱著既緊張又期待的心情參加,也抓著朋友們一起組團,這樣就能一起緊張(剉咧等)了。 我們都是在網頁中暢遊的小小工程師,團員丹尼要來做新手友善的...

2022-09-14 ‧ 由 Charlie 分享
DAY 2

[DAY 02] Hook I am? I am useState!

標題下的冷笑話等級已經進入初老階段了嗎... 30 天的旅途前段會來回頭認識一些基本的 React Hook,而最常見到的就是 useState 本人。 Usa...

2022-09-15 ‧ 由 Charlie 分享
DAY 3

[DAY 03] useEffect 與無止盡 loop 的距離

30 天的旅途前段會來回頭認識一些基本的 React Hook,繼 useState 再來就是 useEffect。 useEffect 如其名,專門拿來處理...

2022-09-16 ‧ 由 Charlie 分享
DAY 4

[DAY 04] 記憶吐司的 useCallback

前一篇 useEffect 大概了解之後,我們這篇來簡單了解一下 dependecies (就是辣個 []) 以及 useCallback 吧! 前一篇:ht...

2022-09-17 ‧ 由 Charlie 分享
DAY 5

[DAY 05] useMemo 讓你網頁不卡卡

網頁中難免會有排序/過濾/資料整理等等的操作,有些列表式的查詢更可以一次列出一千多筆,只想排一下順序網頁就開始跟你鬧「彆扭」,這次來看看 useMemo 可以...

2022-09-18 ‧ 由 Charlie 分享
DAY 6

[DAY 06] useRef 與一般的變數有甚麼不同?

有時候我們只需要一個單純的變數,希望隨著每次 render 都還能保持同樣的 ref,一般的變數又會不停的更新數值,這時候 useRef 就會是你的好幫手啦!...

2022-09-19 ‧ 由 Charlie 分享
DAY 7

[DAY 07] 三個你不能不知道的 Hook 小知識!

Hook 雖然為一般的function,為了確保自己能夠很好掌握程式碼以及狀態的運作方向,有幾個點(小知識)不能不知道: 小知識開始! 小知識一:Hook 名稱...

2022-09-20 ‧ 由 Charlie 分享
DAY 8

[DAY 08] 自己的Hook自己做!useToggle 讓你想開就開,想關就關

終於進入正題啦! 情境 不論是現實世界還是網路上,小朋友看到東西都喜歡碰一下摸一下(手賤),只要能互動就會興奮到一個不行,特別是能開開關關的東西,一不小心就會...

2022-09-21 ‧ 由 Charlie 分享
DAY 9

[DAY 09] 自己的Hook自己做!useToggle 再進化,useToggle+!

延伸情境 前一篇的 useToggle 顯然可以再更好,除了一般狀態之間切換,也可以再加入特定狀態的指定切換,來讓整體閱讀更直覺;也可以再嘗試額外加入 sid...

2022-09-22 ‧ 由 Charlie 分享
DAY 10

[DAY 10] 自己的Hook自己做!useCallbackEvent 真的有必要嗎?

回顧前一篇的困饒:「useCallback 中有從 props 傳來的 inner function 要如何正常運作?」 由於我們的 function 一直被...

2022-09-23 ‧ 由 Charlie 分享