iT邦幫忙

鐵人檔案

第 12 屆 iThome 鐵人賽
回列表
自我挑戰組

React初心者30天的探索之路 系列

未曾接觸過React 的我,決定利用30天來熟悉React!

鐵人鍊成 | 共 30 篇文章 | 18 人訂閱 訂閱系列文 RSS系列文
DAY 21

[Day 21] React Hooks (上)-useState&useEffect

當functional component 遇上React Hooks,就好像白雪公主遇到她的王子…(我想不到更好的比喻了)有了Hooks,讓functiona...

2020-09-21 ‧ 由 Lieutenant 分享
DAY 22

[Day 22]React hook(中)-useContext&useReducer

useContext() useContext會和React Context API搭配使用,可以讓component共享資料,像是進階版的props,不用一層...

2020-09-22 ‧ 由 Lieutenant 分享
DAY 23

[Day 23] React hook(下)-useMemo&useRef

在搜尋useMemo的時候,就一直看到React.memo的相關資料 ,雖然React memo不屬於React hook的一部分,但還是簡單介紹一下,我們都知...

2020-09-23 ‧ 由 Lieutenant 分享
DAY 24

[Day 24] React Router- 指路者

以往在同個網站切換網頁的時候,就會重新刷新頁面,然後等待資源重新載入才能看到新的畫面,但是人的耐心是有限的,每次的切換如果都需要等待的話,人的耐心就會被消磨殆盡...

2020-09-24 ‧ 由 Lieutenant 分享
DAY 25

[Day 25] React Portal 任意門

Portal為插槽功能,可以將子元件渲染到父元件以外的地方,聽起來很炫,概念感覺有點像任意門?render一個component時,其實改變的是另一個地方的DO...

2020-09-25 ‧ 由 Lieutenant 分享
DAY 26

[Day 26] React memory leak - 記憶體洩漏

memory leak字面上翻譯就叫做記憶體洩漏,記憶體洩漏會造成什麼問題?大家應該有那種經驗,開太多chrome分頁,電腦開始卡卡的,嚴重點直接當掉,memo...

2020-09-26 ‧ 由 Lieutenant 分享
DAY 27

[Day 27] 利用React Suspense & React Lazy來優化載入速度

在build專案的時候,我們會透過webpack將不同模組的component打包成同一支js,但是當專案的規模越來越大, 程式碼的size就會逐漸肥大,好幾m...

2020-09-27 ‧ 由 Lieutenant 分享
DAY 28

[Day 28] 用React 來做一個todolist吧!

不管是學哪一種框架,todolist可以說是經典練習題,此次練習除了實現基本的功能新增與刪除之外,再加一個拖曳改變排序功能 新增 :當使用者輸入完要新增的代辦...

2020-09-28 ‧ 由 Lieutenant 分享
DAY 29

[Day 29] 用React 來寫ooxx 小遊戲

ooxx也可以說是很熱門的練習題,所以今天就用React 來寫一個ooxx的小遊戲吧! 初始化先設定一個長度為9的陣列來記錄玩家下的位置,這邊用了array.f...

2020-09-29 ‧ 由 Lieutenant 分享
DAY 30

[Day 30] React 完賽心得

本次最大的收穫應該是英文閱讀能力大幅增加(誤 ,畢竟React的媽媽是Facebook,所以國外的文章資源比較豐富,雖然常常看到恍神就是了,另外,stackov...

2020-09-30 ‧ 由 Lieutenant 分享