[React Hook 筆記] useRef、forwardRef

(新增 typing 於 2023/11/10)

React Hook 系列文

1. 從最基本的 Hook 開始 useState, useEffect
2. Memorized Hook- useMemo, useCallback
3. useRef
4. useContext
5. useReducer
6. useLayoutEffect
7. Custom Hooks

圖改編自 dev.to Demystifying React Hooks: useRef

useRef 神奇的地方除了可以在不 re-render 的狀態下更新值，也可以直接抓取 DOM 進而控制 DOM 的行為 (Imperative)

🔖 文章索引
1. What's ref? 
2. What’s useRef?
3. Why use useRef?
4. 可以用 useRef 取代 useState 嗎？
5. forwardRef
6. Typing useRef

在進入 useRef 之前，必須來了解一下 refs

什麼是 refs ?

Refs 是可以直接抓取 DOM element 與之互動的方法 (Imperative)

React 是 declarative (若你不知道什麼是 declarative 可以參考我之前寫過的文章 Buzz Word: Declarative vs. Imperative)。

With declarative programming, you write code that describes what you want. With imperative programming, you tell the compiler how to get it, step by step.

declarative 著重在 WHAT (著重在需要什麼) 而不是 HOW (具體表達程式碼該做什麼才能達到目標)，它

• 定義好 JSX 就可以開發 UI 了
• 你可以再不碰觸真的 DOM 之下綁定事件

/* imperative: HOW */

// 先找到某個 DOM 再去更新
const $name = document.querySelector('#name') 
$name = innerHTML = 'Hannah'

/* declarative: WHAT */

const name = 'Hannah'
<div id="name">{name}</div> // JSX