iT邦幫忙

鐵人檔案

2021 iThome 鐵人賽
回列表
Modern Web

前端日常,每天 React 一下 系列

以 React 為中心的學習筆記,內容主要包含:
★ React 基礎概念、常見功能、活用知識點
★ React Hook 學習筆記
★ Redux 學習筆記

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

【Day 20】全局儲存庫 Context

Context Context 是 React 提供的一個 API其功能有: 統一存放共用參數,實現全局資料管理 某層子元件需要使用時才調用,免去 props...

2021-10-06 ‧ 由 Emi 分享
DAY 22

【Day 21】Hook 04:useContext

useContext useContext 本質上是 Context 的語法糖,精簡了 Context 取得值的方式。 使用方法 useContext 會接收...

2021-10-07 ‧ 由 Emi 分享
DAY 23

【Day 22】Hook 05:useReducer

Reducer Reducer 這個概念,來源於 React 的延伸套件 Redux,其核心由 React 拿來參考後,開發出了 React 原生 API ──...

2021-10-08 ‧ 由 Emi 分享
DAY 24

【Day 23】與 DOM 的互動:Ref

Ref Ref 擁有以下特色: 不須重新渲染就可以更新值 直接抓取 DOM 來控制 DOM 的行為 可以在 render 方法內建立 React elemen...

2021-10-09 ‧ 由 Emi 分享
DAY 25

【Day 24】Hook 06:useRef

useRef useRef 使用方式 const refContainer = useRef(initialValue); useRef 會回傳一個擁有 cu...

2021-10-10 ‧ 由 Emi 分享
DAY 26

【Day 25】React 與 Immutible

Immutable Immutable 中文意思為不可變的,即重新賦值後,新的值和原始的值並不互相影響原本的值依然會保留下來,不會被賦值改變。 Immutabl...

2021-10-11 ‧ 由 Emi 分享
DAY 27

【Day 26】渲染備忘:Memo

React.memo React.memo 主要的作用是性能優化,使用 memo 後,程式會將 render 結果存在快取內,並在 render 時比較前後兩次...

2021-10-12 ‧ 由 Emi 分享
DAY 28

【Day 27】Hook 07:useMemo

useMemo 用於性能優化,避免重複執行高效能的渲染 如果傳入的參數未改變,就直接沿用上次的計算結果。 遇到計算複雜、耗效能的地方,先用 useMemo 計...

2021-10-13 ‧ 由 Emi 分享
DAY 29

【Day 28】Hook 08:useCallback

useCallback 如果父元件所傳遞的 props 包含 Object,則在元件因狀態改變而 re-render 時,Object 的記憶體位址也會隨之重新...

2021-10-14 ‧ 由 Emi 分享
DAY 30

【Day 29】Hook 09:自定義 Hook(Custom hook)

打造自己的 Hook 自 React 16.8 以後,使用者就可以在 React 中創建自定義的 Hook,將重複使用的功能模組化、封裝常用的業務邏輯,利用其他...

2021-10-15 ‧ 由 Emi 分享