iT邦幫忙

react-hooks相關文章
共有 55 則文章
鐵人賽 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 14

技術 Day14 ー 用 react-spring 做一個假 3D 電子鐘吧!

[ 假 3D 電子鐘 ] 轉轉轉~! 時間的顯示,也是 Web 前端常常會要處理到的事情之一,做時鐘對初心者來說也是一個很好的練習題材唷。 那就 Demo...

鐵人賽 Modern Web DAY 13

技術 Day13 ー 用 react-spring 刻帶有 Blob 特效的 SVG 圓形進度條(Circular Progress Bar)吧!

[ SVG Circular Progress Bar ] 帶有 Blob 特效的圓形進度條~而且是 SVG 動畫! 是的,react-spring 也可以...

鐵人賽 Modern Web DAY 13

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

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

鐵人賽 Modern Web DAY 12

技術 Day12 ー 用 react-spring 漂亮的 Show 出商品吧!

[ 漂亮的 Show 出商品 ] 不只商品,只要是需要大量展示在頁面上的東西都可以用的唷 :D 應用實作到現在,感覺其實最難的就是要構想動畫如何「演出」了~...

鐵人賽 Modern Web DAY 12

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

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

鐵人賽 Modern Web DAY 11

技術 Day11 ー 用 react-spring 做 Search Bar 吧!

[ Search Bar ] 搜尋 Bar ~! Search Bar 也是 Web 前端的必修課題之一呢!尤其是處理 RWD 時 Search Bar 要...

鐵人賽 Modern Web DAY 10

技術 Day10 ー 用 react-spring 做有趣的字母漸變吧!

[ 字母漸變 ] いろはにほへと、ちりぬるを~♪ 其實也不清楚這類特效的正式名稱或目的是什麼(?),或許單純讓人感覺很酷炫用的吧(欸#) Demo Time...

鐵人賽 Modern Web DAY 9

技術 Day09 ー 用 react-spring 客製一個 Checkbox 吧!

[ Checkbox ] 切手指打勾勾,騙人的話,要吞 1000 隻針~(不是這個打勾勾 ry 前兩天挑戰的 UI 都偏向放著讓動畫自己跑的類型,今天總算要...

鐵人賽 Modern Web DAY 7

技術 Day07 ー 用 react-spring 做一個 Gooey Loader 吧!

[ Gooey Loader ] 黏黏球 Loader 終於進到了開始應用實作的階段了,就用 Loader 來打頭陣吧~!身為一個 Web 前端(Web F...

鐵人賽 Modern Web DAY 6

技術 Day06 ー react-spring 的 Hooks API 其之 ⑤ ~useChain~

[ 本日 MVP:useChain ] 讓一切的一切都串起來的關鍵人物~!(?) 就如同它的名稱一樣,這是一個可以將前面幾天介紹過的不同種類的 Hook 鍊...

鐵人賽 Modern Web DAY 5

技術 Day05 ー react-spring 的 Hooks API 其之 ④ ~useTransition~

[ 本日巨星:useTransition ] Component 切換(Mount、Unmount)時用的 Hook,也可以在 Component Updat...

鐵人賽 Modern Web DAY 4

技術 Day04 ー react-spring 的 Hooks API 其之 ③ ~useTrail~

[ 本日嘉賓:useTrail ] 這邊的 Trial 是「蹤跡」的意思唷~!不是指小徑。 想要元素們依序跟隨前一個元素做一樣的動作,就是要用這個 Hook...

鐵人賽 Modern Web DAY 3

技術 Day03 ー react-spring 的 Hooks API 其之 ② ~useSprings~

[ 今天要介紹的是:useSprings ] 啊怎麼好像跟昨天一樣!(不不不,今天這個是詞尾有加 s 的,昨天的迷 U) 當我們有好幾個不同的元素(例如 l...

鐵人賽 Modern Web DAY 2

技術 Day02 ー react-spring 的 Hooks API 其之 ① ~useSpring~

[ 本日的主角:useSpring ] 最基本款的 Hook,通常若沒什麼特別需求,選用這個就可以了 好的~!我不會鋪陳(也不知道要鋪陳什麼 ry),use...

鐵人賽 Modern Web DAY 1

技術 Day01 ー react-spring 是什麼?~開場、目錄~

[ 首先,簡單自介 & 開場 (灬ºωº灬) ] 由於自己的經歷跟別人很不一樣,覺得有必要自介一下這樣~ 淡水某私立大學日文系畢業,女生。日文程度...

技術 斯坦的實戰學院 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 的搭配使用

useEffect, localStorage 昨天完成了讓使用者設定地區的表單頁面後,今天就讓我們來實作設定地區這個功能。最終的目標是當使用者按下儲存後,根據...

鐵人賽 Modern Web DAY 27

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

keywords: useRef, controlled components, uncontrolled components, form 昨天已經建立好了天...