iT邦幫忙

react-hooks相關文章
共有 42 則文章
鐵人賽 Modern Web DAY 28

技術 【Day.28】React進階 - 導入Redux,讓元件溝通更簡潔

當專案中的階層變複雜,state和props變的很多,資料在多層component之間的傳遞也越來越多。產生了一堆純粹用來傳遞用的props和父componen...

鐵人賽 Modern Web DAY 27

技術 【Day.27】React進階 - 用useReducer定義state的更動原則

通常當我們要設定state時,都是透過setState(要指定的值)。但這樣做有兩個問題: 使用setState的元件可以任意指定值給state 當stat...

鐵人賽 Modern Web DAY 26

技術 【Day.26】React進階 - useEffect v.s useLayoutEffect

如果你在撰寫React專案時,有試著在第一次渲染後,透過useEffect以state修改綁定給元件的資料,應該會發現一個特殊的現象: 嗯?為甚麼我的元件會閃...

鐵人賽 Modern Web DAY 25

技術 【Day.25】React進階 - Custom hook | 把React component API模組化吧!

在一開始介紹React的時候,我們曾經說過以前React有個問題: 當要使用React的特有功能時,大部份的時候都要做一個元件出來。但有的時候我們並不是要創造...

鐵人賽 Modern Web DAY 22

技術 【Day.22】React效能 - 如何處理useContext的效能問題

前面我們提過,Context api雖然方便,但是每一次context更新時都會迫使「有使用useContext取得該context」的元件更新。這在專案有規模...

鐵人賽 Modern Web DAY 21

技術 【Day.21】React效能 - 用useMemo避免函式非必要的執行

但是有的時候我們只負責製作元件,並沒有辦法確認使用這個元件的人是不是在函式定義域內加工元件,這個時候該怎麼辦才能確保這個問題呢? 在Day.19,我們以元件...

鐵人賽 Modern Web DAY 20

技術 【Day.20】React效能 - 用useCallback避免函式的重新定義

在前面,我們說在非必要的時候,不要在React function component內宣告函式。 那什麼時候是「必要的時候」呢 ? 當我們有需要綁定和state...

鐵人賽 Modern Web DAY 19

技術 【Day.19】React效能 - 用memo避免不必要的重複渲染

這一篇要討論的是function component的效能問題 在上一篇中,我們發現即使MenuItem接收的props並沒有被改變,MenuItem的re...

鐵人賽 Modern Web DAY 18

技術 【Day.18】開發者工具React Dev tool與useContext的效能問題

由於我們在執行React程式前,都要透過webpack和Babel打包編譯成瀏覽器看的懂的ES5,實際跑在瀏覽器的程式碼就會和本來React裡面長的樣子差很多,...

鐵人賽 Modern Web DAY 17

技術 【Day.17】React入門 - 利用useContext進行多層component溝通

我們完成了分頁,完成了用React製作的一個Menu和MenuItem,看似一切都大功告成了。 然而不幸的是,這個時候客戶打來了一通電話: 欸!我想讓Menu...

鐵人賽 Modern Web DAY 15

技術 【Day.15】React入門 - 非控制組件與useRef

reference,中文翻譯是「參考」。聽起來好像有點奇怪,但他在程式中一般是指「變數指向的記憶體位置上對應到的值」。 超級複雜的啦。 簡單來說可以想像成是...

鐵人賽 Modern Web DAY 13

技術 【Day.13】React入門 - useEffect(生命週期)

在前面的文章中,我們曾經說過這句話: ...如果有仔細看剛剛範例中的程式碼,你會發現Menu開關的功能並沒有被加進去。這是因為在React元件中,以內部控制元...

鐵人賽 Modern Web DAY 12

技術 【Day.12】React入門 - useState與解構賦值後的props

還記得在Day.04我們實作的觀察者模式嗎? 由於這種「當某個JS變數改變時,有很多DOM元素需要被改變」的功能很常被使用,React將其拉了出來做成獨立的AP...

技術 斯坦的實戰學院 MongoDB, Express, React, Node.js (MERN) - MongoDB建置

Node.js 串接 MongoDB 會在下一篇教學,滿意的朋友請記得關注,未來預計每週2篇技術文章 國外朋友常提到網頁工程師必備 MERN,那MERN究竟...

技術 【React.js 筆記】- 使用useContext和useReducer進行多層子父元件溝通

接續自己的文章 【React.js入門 - 21】 各階層Component的溝通 在React中常常會遇到需要在多層component的之間溝通的情形。在沒有...

鐵人賽 Modern Web DAY 28

技術 [Day 28 - 即時天氣] 保存與更新使用者設定的地區資訊 - localStorage 與 useEffect 的搭配使用

感謝 iT 邦幫忙與博碩文化,本系列文章已出版成書「從 Hooks 開始,讓你的網頁 React 起來」,首刷版稅將全額贊助 iT 邦幫忙鐵人賽,歡迎前往購書...

鐵人賽 Modern Web DAY 27

技術 [Day 27 - 即時天氣] React 中的表單處理(Controlled vs Uncontrolled)以及 useRef 的使用

感謝 iT 邦幫忙與博碩文化,本系列文章已出版成書「從 Hooks 開始,讓你的網頁 React 起來」,首刷版稅將全額贊助 iT 邦幫忙鐵人賽,歡迎前往購書...

鐵人賽 Modern Web DAY 25

技術 [Day 25 - 即時天氣] 自己的鉤子自己做 - 建立 Custom Hook

感謝 iT 邦幫忙與博碩文化,本系列文章已出版成書「從 Hooks 開始,讓你的網頁 React 起來」,首刷版稅將全額贊助 iT 邦幫忙鐵人賽,歡迎前往購書...

鐵人賽 Modern Web DAY 24

技術 [Day 24 - 即時天氣] 跟風一下,在 React 中透過 Emotion 實作深色主題!

感謝 iT 邦幫忙與博碩文化,本系列文章已出版成書「從 Hooks 開始,讓你的網頁 React 起來」,首刷版稅將全額贊助 iT 邦幫忙鐵人賽,歡迎前往購書...

鐵人賽 Modern Web DAY 23

技術 [Day 23 - 即時天氣] 實作資料載入中的提示狀態

感謝 iT 邦幫忙與博碩文化,本系列文章已出版成書「從 Hooks 開始,讓你的網頁 React 起來」,首刷版稅將全額贊助 iT 邦幫忙鐵人賽,歡迎前往購書...

鐵人賽 Modern Web DAY 22

技術 [Day 22 - 即時天氣] 讓白天和晚上使用不同天氣圖示

感謝 iT 邦幫忙與博碩文化,本系列文章已出版成書「從 Hooks 開始,讓你的網頁 React 起來」,首刷版稅將全額贊助 iT 邦幫忙鐵人賽,歡迎前往購書...

鐵人賽 Modern Web DAY 21

技術 [Day 21 - 即時天氣] 處理天氣圖示以及 useMemo 的使用

感謝 iT 邦幫忙與博碩文化,本系列文章已出版成書「從 Hooks 開始,讓你的網頁 React 起來」,首刷版稅將全額贊助 iT 邦幫忙鐵人賽,歡迎前往購書...

鐵人賽 Modern Web DAY 20

技術 [Day 20 - 即時天氣] 在 useEffect 中使用呼叫需被覆用的函式 - useCallback 的使用

感謝 iT 邦幫忙與博碩文化,本系列文章已出版成書「從 Hooks 開始,讓你的網頁 React 起來」,首刷版稅將全額贊助 iT 邦幫忙鐵人賽,歡迎前往購書...

鐵人賽 Modern Web DAY 25

技術 【React.js入門 - 25】 監控瀏覽器長寬 - 以React hook實現

在React.js專案中,「監控瀏覽器長寬」是很常寫到的功能,我們來試著用React hook實現,並以Custom hook把這個功能模組化。 這一篇主要是給...

鐵人賽 Modern Web DAY 19

技術 [Day 19 - 即時天氣] 在 useEffect 中定義並使用 async 函式

感謝 iT 邦幫忙與博碩文化,本系列文章已出版成書「從 Hooks 開始,讓你的網頁 React 起來」,首刷版稅將全額贊助 iT 邦幫忙鐵人賽,歡迎前往購書...

鐵人賽 Modern Web DAY 24

技術 【React.js入門 - 24】 Custom hook - 給我另一個超推React hook的理由

(標題致敬JSDC工作坊的主題XD) 前面在講為什麼今年這麼多人推薦React hook時,我只有提說它讓簡單的元件可以不用class component的方式...

鐵人賽 Modern Web DAY 18

技術 [Day 18 - 即時天氣] 拉取並呈現來自多道 API 的資料

感謝 iT 邦幫忙與博碩文化,本系列文章已出版成書「從 Hooks 開始,讓你的網頁 React 起來」,首刷版稅將全額贊助 iT 邦幫忙鐵人賽,歡迎前往購書...

鐵人賽 Modern Web DAY 23

技術 【React.js入門 - 23】 元件練習(下) - 在function利用useEffect遞迴+useState實作動畫

在這篇,我們要以function component製作和【React.js入門 - 22】 元件練習(上) - 在class利用遞迴+state實作動畫相同的...

鐵人賽 Modern Web DAY 17

技術 [Day 17 - 即時天氣] 頁面載入時就去請求資料 - useEffect 的基本使用

感謝 iT 邦幫忙與博碩文化,本系列文章已出版成書「從 Hooks 開始,讓你的網頁 React 起來」,首刷版稅將全額贊助 iT 邦幫忙鐵人賽,歡迎前往購書...

鐵人賽 Modern Web DAY 16

技術 [Day 16 - 即時天氣] 定義並請求組件會使用到的資料 - useState 的更多使用

感謝 iT 邦幫忙與博碩文化,本系列文章已出版成書「從 Hooks 開始,讓你的網頁 React 起來」,首刷版稅將全額贊助 iT 邦幫忙鐵人賽,歡迎前往購書...