React hook
React hook 教學
可以讓 functional component 也擁有 ref, state, 生命週期等方法。
1. useState
1.set state 會進行淺比較，如果兩次傳入的參數相同則不會進行 re-render
2. re-render 時不會使 state 重置，包含子組建的 state 也會保持狀態
import React, { useState } from 'react';
function Example() {
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}tip: 多個boolean狀態管理在同個object
更新 array 可以如下，如果用push的會沒作用
2. useEffect
當第二個參數的 array 中有 state 改變時會觸發 useEffect 內的 function，為異步的
用 useEffect 有個雷要注意，記得傳第二個參數，否則會發現怎麼一直重複render
https://reactjs.org/docs/hooks-reference.html#conditionally-firing-an-effect
3. UseLayoutEffect
為同步的，在 dom 更新後但在畫面渲染前觸發，會比 useEffect 早觸發。
https://reactjs.org/docs/hooks-reference.html#uselayouteffect
4. Ref
ref 除了可用來存取元素外，另一個好處是可以用來存值，並且每次 re-render 後會保存，並且使用 ref.current 後改變值並不會造成 re-render
之後用
mapEle.current即可存取
5. Memo
memo只能用在stateless component
功能類似 pure component
當父元素重新 render 時子元素預設都會重新渲染，所以可以使用 memo 來讓子元件監測到只有 prop 改變時才重新渲染（以前的做法是用 shouldComponentUpdate）一般為淺比較，
可以傳入第二個參數，用來做深比較，第二個參數如果回傳為 true 則不會 re-render
6.forwardRef, useImperativeHandle
用來將子元件的方法傳給父元件
7. useCallback
當今天傳入子元素的參數是一個 function，這時要避免子元素 re-render 在子元素寫了 memo 會失效，所以除了 memo 外，還要在父元素的 function 包一個 useCallback。
useCallback 裡面放的是: A function definition
8. useMemo
在該元素內記憶比較複雜的運算，避免 re-render 後重複執行複雜計算，通常裡面都是放沒有 side effect 的東西，如果有 side effect 的計算可以放到 useEffect。
useMemo 第二個參數裡面的 state 改變時才會再次執行。
9. Interval 寫法
UseMemo, UseCallback, React.memo 區別
https://github.com/facebook/react/issues/15156
父元件的狀態被改變了，但是傳給子元件 props 的沒有變，子元件仍然會被重新渲染，所以要用 React.memo
但假設使用了 React.memo 如果傳入的 prop 是 function 或 object 還是會重新渲染，所以可以在該 prop 包成 useCallback 或 UseMemo
useMemo 可以避免 re-render 重複執行複雜計算
useCallback 回傳 function、UseMemo 回傳 value
Last updated
Was this helpful?