iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

1 Like 2 留言 3683 瀏覽

鐵人賽 Modern Web DAY 27

一次打破 React 常見的學習門檻與觀念誤解系列第 27 篇

技術 [Day 27] useCallback 與 useMemo 的正確使用時機

除了最核心的 useState 以及 useEffect 以外，在 React 中最常被我們使用到的內建 hooks 應該就屬 useCallback 以及 u...

Zet ‧ 2022-10-12

0 Like 0 留言 1308 瀏覽

鐵人賽 Modern Web DAY 27

用React讓網頁動起來: React基礎與實作系列第 27 篇

技術 [Day27]用 React 讓網站動起來：useCallback

昨天我們介紹了 useMemo，這個 hook 可以幫助我們記憶依賴參數，當參數變化時才會重新執行函式，並且取得函式回傳的值。今天要來介紹的是 useCallb...

時雨 ‧ 2022-10-12 ‧團隊死線衝鋒 Deadline Squad

0 Like 0 留言 891 瀏覽

鐵人賽 Modern Web DAY 26

用React讓網頁動起來: React基礎與實作系列第 26 篇

技術 [Day26]用 React 讓網站動起來：useMemo

昨天我們介紹了什麼是 memorized hook，介紹他們是如何提升 React 的效能。接著，我們來更詳細一點的介紹各個 hook 要怎麼使用。 useMe...

時雨 ‧ 2022-10-11 ‧團隊死線衝鋒 Deadline Squad

1 Like 0 留言 3500 瀏覽

鐵人賽 Modern Web DAY 25

一次打破 React 常見的學習門檻與觀念誤解系列第 25 篇

技術 [Day 25] Reusable state — React 18 的 useEffect 在 mount 時為何會執行兩次？

在前面的章節中我們已經詳細的解析了 useEffect 正確的概念以及用法，也再三強調了 useEffect 的用途是同步資料到 React elements...

Zet ‧ 2022-10-10

0 Like 0 留言 1148 瀏覽

鐵人賽 Modern Web DAY 25

用React讓網頁動起來: React基礎與實作系列第 25 篇

技術 [Day25]用 React 讓網站動起來：認識 memorize hook

當 React 程式越來越龐大，就需要考慮效能的問題。memorize hook 是 React 提供的 api，可以避免重複 render 造成的效能問題。今...

時雨 ‧ 2022-10-10 ‧團隊死線衝鋒 Deadline Squad

3 Like 1 留言 2907 瀏覽

鐵人賽 Modern Web DAY 24

一次打破 React 常見的學習門檻與觀念誤解系列第 24 篇

技術 [Day 24] useEffect dependencies 的經典錯誤用法

這個章節讓我們更深入的探討一下 dependencies 常見的錯誤使用方式。我們在前幾篇 useEffect 的深入解析中一再強調過一個概念：useEffec...

Zet ‧ 2022-10-09

0 Like 0 留言 432 瀏覽

鐵人賽 Modern Web DAY 25

為期 N 天的 react 小冒險系列第 25 篇

技術用 react hook 做一個城市天氣卡-part2-day25

接續把拿回來的資料做整理拿回來的資料像這樣一大串.. 插播一下，使用 chrome 可以安裝一下 Json Formatter 這個 extension功用是可...

dc88 ‧ 2022-10-09

0 Like 0 留言 557 瀏覽

鐵人賽 Modern Web DAY 24

為期 N 天的 react 小冒險系列第 24 篇

技術用 react hook 做一個城市天氣卡-part1(with axios fetch data)-day24

暫時揮別 react router 的部分，這次來實作一個小型的互動程式，用 react hook 及 axios 向 api 取得特定城市的氣溫資料安裝 a...

dc88 ‧ 2022-10-08

2 Like 1 留言 2352 瀏覽

鐵人賽 Modern Web DAY 23

一次打破 React 常見的學習門檻與觀念誤解系列第 23 篇

技術 [Day 23] 保持資料流 — 不要欺騙 hooks 的 dependencies（下）

函式與 dependencies 一種常見的誤解是認為函式不應該填寫在 dependencies 中。我們來看一下這個範例： function SearchRe...

Zet ‧ 2022-10-08

1 Like 1 留言 2595 瀏覽

鐵人賽 Modern Web DAY 22

一次打破 React 常見的學習門檻與觀念誤解系列第 22 篇

技術 [Day 22] 保持資料流 — 不要欺騙 hooks 的 dependencies（上）

在上一篇關於 useEffect 的深度解析中，我們已經了解到了 dependencies 是一種效能的最佳化手段，而不是用來控制生命週期或是商業邏輯。對於 u...

Zet ‧ 2022-10-07

3 Like 0 留言 2838 瀏覽

鐵人賽 Modern Web DAY 21

一次打破 React 常見的學習門檻與觀念誤解系列第 21 篇

技術 [Day 21] useEffect 其實不是 function component 的生命週期 API

經過了前兩篇章的洗禮，相信你現在對於 function component 的 render 概念已經有一定程度的掌握。接著就讓我們進入這個階段的重頭戲：use...

Zet ‧ 2022-10-06

2 Like 0 留言 7340 瀏覽

鐵人賽 Software Development DAY 21

React框架白話文運動系列第 21 篇

技術 React白話文運動21-React Hook-useLayoutEffect

前言嗨，我是Hogan目前在經營自己的自媒體 hogan.tech主要分享一些有關於程式碼、軟體和科技業經驗分享有興趣的讀者可以進一步關注我，進而獲得更多資訊...

hogantech ‧ 2022-10-06

0 Like 0 留言 2360 瀏覽

鐵人賽 Modern Web DAY 20

一次打破 React 常見的學習門檻與觀念誤解系列第 20 篇

技術 [Day 20] 每一次 render 都有自己的 effects

接續上一章節的概念，我們已經了解到了每一次 render 都有自己的 props 與 state 以及 event handlers，那麼 useEffect...

Zet ‧ 2022-10-05

3 Like 0 留言 7012 瀏覽

鐵人賽 Software Development DAY 20

React框架白話文運動系列第 20 篇

技術 React白話文運動20-React Hook-useCallback

前言嗨，我是Hogan目前在經營自己的自媒體 hogan.tech主要分享一些有關於程式碼、軟體和科技業經驗分享有興趣的讀者可以進一步關注我，進而獲得更多資訊...

hogantech ‧ 2022-10-05

0 Like 0 留言 519 瀏覽

鐵人賽 Modern Web DAY 20

為期 N 天的 react 小冒險系列第 20 篇

技術用 react hook 寫一個簡易計算機吧-下-day20

昨天寫到鍵入數字部分，今天接續把 +-/* 跟 = 的運算處理完吧～加減乘除執行 dispatch({ type: "該按鈕的數值" }...

dc88 ‧ 2022-10-04

3 Like 0 留言 7195 瀏覽

鐵人賽 Software Development DAY 19

React框架白話文運動系列第 19 篇

技術 React白話文運動19-React Hook-useMemo

前言嗨，我是Hogan目前在經營自己的自媒體 hogan.tech主要分享一些有關於程式碼、軟體和科技業經驗分享有興趣的讀者可以進一步關注我，進而獲得更多資訊...

hogantech ‧ 2022-10-04

2 Like 2 留言 2421 瀏覽

鐵人賽 Modern Web DAY 19

一次打破 React 常見的學習門檻與觀念誤解系列第 19 篇

技術 [Day 19] 每一次 render 都有自己的 props、state 以及 event handlers

承接上一張節的脈絡，在我們解析大魔王 useEffect 之前，我們需要先更深入的重新梳理一下 component 生命週期的重要概念：render。每一次...

Zet ‧ 2022-10-04

1 Like 0 留言 2174 瀏覽

鐵人賽 Modern Web DAY 18

一次打破 React 常見的學習門檻與觀念誤解系列第 18 篇

技術 [Day 18] Function component & class component 你可能不知道的關鍵區別

在解析過 React 的畫面更新的核心觀念以及 setState 進階的細節之後，接下來我們會往下一個大主題邁進 — 有關於 component 的 rende...

Zet ‧ 2022-10-03

4 Like 0 留言 5879 瀏覽

鐵人賽 Software Development DAY 18

React框架白話文運動系列第 18 篇

技術 React白話文運動18-React Hook-useContext 02

前言嗨，我是Hogan目前在經營自己的自媒體 hogan.tech主要分享一些有關於程式碼、軟體和科技業經驗分享有興趣的讀者可以進一步關注我，進而獲得更多資訊...

hogantech ‧ 2022-10-03

3 Like 0 留言 7013 瀏覽

鐵人賽 Software Development DAY 17

React框架白話文運動系列第 17 篇

技術 React白話文運動17-React Hook-useContext 01

前言嗨，我是Hogan目前在經營自己的自媒體 hogan.tech主要分享一些有關於程式碼、軟體和科技業經驗分享有興趣的讀者可以進一步關注我，進而獲得更多資訊...

hogantech ‧ 2022-10-02

0 Like 0 留言 430 瀏覽

鐵人賽 Modern Web DAY 17

為期 N 天的 react 小冒險系列第 17 篇

技術 react hook 內的快樂好朋友-useRef-day17

來介紹一下最後一個好朋友 useRef基本上 state 的更新會促成每一次的 re-render而 reference 則是更新後並不會造成 re-rende...

dc88 ‧ 2022-10-01

4 Like 0 留言 7443 瀏覽

鐵人賽 Software Development DAY 16

React框架白話文運動系列第 16 篇

技術 React白話文運動16-React Hook-useRef

前言嗨，我是Hogan目前在經營自己的自媒體 hogan.tech主要分享一些有關於程式碼、軟體和科技業經驗分享有興趣的讀者可以進一步關注我，進而獲得更多資訊...

hogantech ‧ 2022-10-01

0 Like 1 留言 2328 瀏覽

鐵人賽 Modern Web DAY 16

一次打破 React 常見的學習門檻與觀念誤解系列第 16 篇

技術 [Day 16] Immutable update 物件與陣列的基本功

透過上一篇章的解析，我們已經了解到為什麼我們不應該在 React 中去 mutate state 的資料了。因此，當我們想更新物件或陣列時就必須以 immuta...

Zet ‧ 2022-10-01

0 Like 0 留言 1118 瀏覽

鐵人賽 Modern Web DAY 16

用React讓網頁動起來: React基礎與實作系列第 16 篇

技術 [Day16]用React讓網站動起來：Context 範例

昨天介紹了context是什麼，以及useContext要怎麼用，今天來介紹一下要怎麼在開發上實際運用context object以及useContext。建...

時雨 ‧ 2022-10-01 ‧團隊死線衝鋒 Deadline Squad

1 Like 0 留言 430 瀏覽

鐵人賽 Modern Web DAY 16

為期 N 天的 react 小冒險系列第 16 篇

技術 react hook 內的快樂好朋友-useCallback / useMemo-day16

useCallback & useMemo 基本上這兩個 hook 主要的作用都是幫助效能優化(減少非必要的渲染)頁面上有多個 component 時，...

dc88 ‧ 2022-09-30

4 Like 0 留言 7126 瀏覽

鐵人賽 Software Development DAY 15

React框架白話文運動系列第 15 篇

技術 React白話文運動15-React Hook-useEffect 02

前言嗨，我是Hogan目前在經營自己的自媒體 hogan.tech主要分享一些有關於程式碼、軟體和科技業經驗分享有興趣的讀者可以進一步關注我，進而獲得更多資訊...

hogantech ‧ 2022-09-30

2 Like 0 留言 3028 瀏覽

鐵人賽 Modern Web DAY 15

一次打破 React 常見的學習門檻與觀念誤解系列第 15 篇

技術 [Day 15] 維持 React 資料流可靠性的核心關鍵：Immutable state

在 React 當中，state 是可以存放 JavaScript 中的任何資料型別，除了像是字串、數字等直接可以表示值的型別，當然也支援物件或陣列這種以參考（...

Zet ‧ 2022-09-30

0 Like 0 留言 912 瀏覽

鐵人賽 Modern Web DAY 15

用React讓網頁動起來: React基礎與實作系列第 15 篇

技術 [Day15] 用React讓網站動起來：useContext

昨天我們用useState、useEffect、react-bootstrap完成了todolist程式，不過在寫程式的過程中，會發現我們傳遞的props隨著功...

時雨 ‧ 2022-09-30 ‧團隊死線衝鋒 Deadline Squad

5 Like 0 留言 6915 瀏覽

鐵人賽 Software Development DAY 14

React框架白話文運動系列第 14 篇

技術 React白話文運動14-React Hook-useEffect 01

前言嗨，我是Hogan目前在經營自己的自媒體 hogan.tech主要分享一些有關於程式碼、軟體和科技業經驗分享有興趣的讀者可以進一步關注我，進而獲得更多資訊...

hogantech ‧ 2022-09-29

2 Like 1 留言 2764 瀏覽

鐵人賽 Modern Web DAY 14

一次打破 React 常見的學習門檻與觀念誤解系列第 14 篇

技術 [Day 14] 以 functional updater 來呼叫 setState

在上一篇的章節中，我們詳細的解析了有關於連續呼叫 setState 時的自動 batching 機制。承著前文的脈絡，我們來探討看看一個延伸的情境：如果我們想基...

Zet ‧ 2022-09-29

技術 [Day 27] useCallback 與 useMemo 的正確使用時機

技術 [Day27]用 React 讓網站動起來：useCallback

技術 [Day26]用 React 讓網站動起來：useMemo

技術 [Day 25] Reusable state — React 18 的 useEffect 在 mount 時為何會執行兩次？

技術 [Day25]用 React 讓網站動起來：認識 memorize hook

技術 [Day 24] useEffect dependencies 的經典錯誤用法

技術 用 react hook 做一個城市天氣卡-part2-day25

技術 用 react hook 做一個城市天氣卡-part1(with axios fetch data)-day24

技術 [Day 23] 保持資料流 — 不要欺騙 hooks 的 dependencies（下）

技術 [Day 22] 保持資料流 — 不要欺騙 hooks 的 dependencies（上）

技術 [Day 21] useEffect 其實不是 function component 的生命週期 API

技術 React白話文運動21-React Hook-useLayoutEffect

技術 [Day 20] 每一次 render 都有自己的 effects

技術 React白話文運動20-React Hook-useCallback

技術 用 react hook 寫一個簡易計算機吧-下-day20

技術 React白話文運動19-React Hook-useMemo

技術 [Day 19] 每一次 render 都有自己的 props、state 以及 event handlers

技術 [Day 18] Function component & class component 你可能不知道的關鍵區別

技術 React白話文運動18-React Hook-useContext 02

技術 React白話文運動17-React Hook-useContext 01

技術 react hook 內的快樂好朋友-useRef-day17

技術 React白話文運動16-React Hook-useRef

技術 [Day 16] Immutable update 物件與陣列的基本功

技術 [Day16]用React讓網站動起來：Context 範例

技術 react hook 內的快樂好朋友-useCallback / useMemo-day16

技術 React白話文運動15-React Hook-useEffect 02

技術 [Day 15] 維持 React 資料流可靠性的核心關鍵：Immutable state

技術 [Day15] 用React讓網站動起來：useContext

技術 React白話文運動14-React Hook-useEffect 01

技術 [Day 14] 以 functional updater 來呼叫 setState

標記使用者

技術用 react hook 做一個城市天氣卡-part2-day25

技術用 react hook 做一個城市天氣卡-part1(with axios fetch data)-day24

技術用 react hook 寫一個簡易計算機吧-下-day20