iT邦幫忙

鐵人檔案

2021 iThome 鐵人賽
回列表
Modern Web

用30天更加認識 React.js 這個好朋友 系列

在這次的鐵人賽中,我會以單元式的方式介紹 React.js 的各種 Hooks、Context、React router、Redux & Redux toolkit、React 動畫、React 效能優化及其他瑣碎 React 特性功能等...
希望能透過一系列 React 相關的主題幫助自己和讀者更加認識 React.js。

鐵人鍊成 | 共 32 篇文章 | 24 人訂閱 訂閱系列文 RSS系列文
DAY 1

Day1-鐵人賽大綱 & 為什麼要使用 Hook?

鐵人賽大綱 在這次鐵人賽的挑戰中,主要的目標是希望自己和讀者們可以更加認識 React.js 或者是複習一下以前學過的知識,所以安排了幾個單元來進行介紹,預期介...

2021-09-15 ‧ 由 harry xie 分享
DAY 2

Day2-React Hook 篇-認識 useState

今天我們來認識一個相當常使用的 hook: useState。 語法 const [currentValue, setCurrentValue] = useSt...

2021-09-16 ‧ 由 harry xie 分享
DAY 3

Day3-React Hook 篇-認識 useEffect

今天要介紹的是常用的 hook,useEffect。 功用 處理各種的 side effect,針對渲染出來的網頁後進行操作產生的影響就是 side effec...

2021-09-17 ‧ 由 harry xie 分享
DAY 4

Day4-React Hook 篇-認識 useRef & useImperativeHandle

今天要介紹的是可以用來操作 DOM 元素的 useRef 及和它有關的 useImperativeHandle。 功用 操作 DOM 元素(ex: 管理 fo...

2021-09-18 ‧ 由 harry xie 分享
DAY 5

Day5-React Hook 篇-認識 useContext

讓開發者可以更容易的從母元件傳遞 state 到深層的子元件,並讓多個用到的 state 資料的元件可以隨著資料變動而更新。 語法 const value =...

2021-09-19 ‧ 由 harry xie 分享
DAY 6

Day6-React Hook 篇-useReducer

這個 hook 可以讓我們用類似 redux 用 reducer、action、dispatch 操作 state。 useReducer 適合較複雜的 sta...

2021-09-20 ‧ 由 harry xie 分享
DAY 7

Day7-在認識 useMemo 前,先認識 React.memo

今天介紹的是避免重新渲染的 HOC(Higher Order Component) React.memo,透過它可以使我們提升 React 網站的效能。 Rea...

2021-09-21 ‧ 由 harry xie 分享
DAY 8

Day8-React Hook 篇-認識 useMemo

今天介紹的是避免重新渲染的 hook useMemo,透過它可以使我們提升 React 網站的效能。 useMemo 由於當元件重新渲染時,複雜的函式又會重複執...

2021-09-22 ‧ 由 harry xie 分享
DAY 9

Day9-React Hook 篇-認識 useCallback

今天介紹的也是避免重新渲染,使 React 效能優化的 hook useCallback。 useCallback useCallback 的用法是將一個函式包...

2021-09-23 ‧ 由 harry xie 分享
DAY 10

Day10-React Hook 篇-打造自己的 Hook:Custom Hook

經過前面幾天的介紹,我們認識了許多常使用的 hooks,不過除了那些 hooks 之外,我們也可以將一些常用的共同程式邏輯抽取出來寫一個函式,這就是 Custo...

2021-09-24 ‧ 由 harry xie 分享