React Hook 官網(wǎng)地址：https://react.docschina.org/docs/hooks-faq.html

---

（1）問(wèn)題分析？

Hook 是什么？

Hook 是一個(gè)特殊的函數(shù)，它可以讓你“鉤入” React 的特性。例如，useState 是允許你在 React 函數(shù)組件中添加 state 的 Hook。稍后我們將學(xué)習(xí)其他 Hook。

什么時(shí)候我會(huì)用 Hook？

如果你在編寫函數(shù)組件并意識(shí)到需要向其添加一些 state，以前的做法是必須將其它轉(zhuǎn)化為 class。現(xiàn)在你可以在現(xiàn)有的函數(shù)組件中使用 Hook。

什么是副作用？

在 React 組件中執(zhí)行數(shù)據(jù)獲取、訂閱或者手動(dòng)修改 DOM，我們統(tǒng)一把這些操作稱為“副作用”，或者簡(jiǎn)稱為“作用”。

兩種常見(jiàn)副作用操作是什么？

• 需要清除的
• 不需要清除的

不需要清除effect

只想在 React 更新 DOM 之后運(yùn)行一些額外的代碼。（比如發(fā)送網(wǎng)絡(luò)請(qǐng)求，手動(dòng)變更 DOM，記錄日志，這些都是常見(jiàn)的無(wú)需清除的操作。）

需要清除effect

例如訂閱外部數(shù)據(jù)源。這種情況下，清除工作是非常重要的，可以防止引起內(nèi)存泄露！

---

---

（2）useEffect使用和意義？

在一個(gè)函數(shù)里面可以多次使用；

代表 componentDidMount、componentDidUpdate 和 componentWillUnmount；

useEffect默認(rèn)可以當(dāng)做class中的componentDidMount生命周期：只在組件掛載的時(shí)候運(yùn)行一次；

清除副作用，在useEffect 的函數(shù)中 ，在return一個(gè)函數(shù)；（副作用函數(shù)還可以通過(guò)返回一個(gè)函數(shù)來(lái)指定如何“清除”副作用）；

只能在函數(shù)最外層調(diào)用 Hook。不要在循環(huán)、條件判斷或者子函數(shù)中調(diào)用；

只能在 React 的函數(shù)組件中調(diào)用 Hook。不要在其他 JavaScript 函數(shù)中調(diào)用；

組件之間重用一些狀態(tài)邏輯（高階組件和 render props）自定義 Hook 可以讓你在不增加組件的情況下達(dá)到同樣的目的。

①、②、③、④、⑤、⑥、⑦、⑧、⑨、⑩ ?、?、?、?、?

useEffect 問(wèn)題總結(jié)

①、useEffect 做了什么？
通過(guò)使用這個(gè) Hook，你可以告訴 React 組件需要在渲染后執(zhí)行某些操作。

②、為什么在組件內(nèi)部調(diào)用 useEffect？
將 useEffect 放在組件內(nèi)部讓我們可以在 effect 中直接訪問(wèn) count state 變量（或其他 props）。

③、useEffect 會(huì)在每次渲染后都執(zhí)行嗎？
是的，默認(rèn)情況下，它在第一次渲染之后和每次更新之后都會(huì)執(zhí)行。

④、使用useEffect Hook 其中一個(gè)目的？
就是要解決 class 中生命周期函數(shù)經(jīng)常包含不相關(guān)的邏輯，但又把相關(guān)邏輯分離到了幾個(gè)不同方法中的問(wèn)題。

⑤、useEffect 執(zhí)行順序？
Hook 允許我們按照代碼的用途分離他們， 而不是像生命周期函數(shù)那樣。React 將按照 effect 聲明的順序依次調(diào)用組件中的每一個(gè) effect。
⑥、在某些情況下，每次渲染后都執(zhí)行清理或者執(zhí)行 effect 可能會(huì)導(dǎo)致性能問(wèn)題？

如果某些特定值在兩次重渲染之間沒(méi)有發(fā)生變化，你可以通知 React 跳過(guò)對(duì) effect 的調(diào)用，只要傳遞數(shù)組作為 useEffect 的第二個(gè)可選參數(shù)即可：

useEffect(() => {document.title = `You clicked ${count} times`; }, [count]); // 僅在 count 更改時(shí)更新

⑦、何時(shí)使用？
如果你要使用此優(yōu)化方式，請(qǐng)確保數(shù)組中包含了所有外部作用域中會(huì)隨時(shí)間變化并且在 effect 中使用的變量，否則你的代碼會(huì)引用到先前渲染中的舊變量。

⑧、如何執(zhí)行一次effect？
如果想執(zhí)行只運(yùn)行一次的 effect（僅在組件掛載和卸載時(shí)執(zhí)行），可以傳遞一個(gè)空數(shù)組（[]）作為第二個(gè)參數(shù)。

useEffect(() => {document.title = `You clicked ${count} times`; }, []); // 僅在 count 更改時(shí)更新

---

（3）react hook復(fù)用數(shù)據(jù)狀態(tài)？

可以創(chuàng)建涵蓋各種場(chǎng)景的自定義 Hook，如表單處理、動(dòng)畫、訂閱聲明、計(jì)時(shí)器，甚至可能還有更多我們沒(méi)想到的場(chǎng)景。

（4）useContext 和useReducer 的作用？

useContext （不使用組件嵌套就可以訂閱 React 的 Context）

useReducer 可以讓你通過(guò) reducer 來(lái)管理組件本地的復(fù)雜 state

** ①、useContext接受值，返回值，context的值來(lái)源？**

const value = useContext(MyContext);

接收一個(gè) context 對(duì)象（React.createContext 的返回值）并返回該 context 的當(dāng)前值。當(dāng)前的 context 值由上層組件中距離當(dāng)前組件最近的 <MyContext.Provider> 的 value prop 決定。
注意點(diǎn)：
useContext 的參數(shù)必須是 context 對(duì)象本身

** ②、useReducer使用場(chǎng)景？**

const [state, dispatch] = useReducer(reducer, initialArg, init);

state 邏輯較復(fù)雜且包含多個(gè)子值，
或者下一個(gè) state 依賴于之前的 state 等

（5）使用State Hook說(shuō)明

組件昵稱（稱呼）？
沒(méi)有React state 的能力的成為“無(wú)狀態(tài)組件”，有React state 的能力的成為“函數(shù)組件”；

useState 需要哪些參數(shù)？
useState() 方法里面唯一的參數(shù)就是初始 state；

調(diào)用 useState 方法的時(shí)候做了什么?
它定義一個(gè) “state 變量”；

useState 方法的返回值是什么？
返回值為：當(dāng)前 state 以及更新 state 的函數(shù)。

讀取state？

<p>You clicked {count} times</p>

更新state？

<button onClick={() => setCount(count + 1)}>Click me</button>

---

初始化時(shí)需要處理state情況？

（1）初始值需要計(jì)算
如果初始 state 需要通過(guò)復(fù)雜計(jì)算獲得，則可以傳入一個(gè)函數(shù)，在函數(shù)中計(jì)算并返回初始的 state，此函數(shù)只在初始渲染時(shí)被調(diào)用：

const [state, setState] = useState(() => {const initialState = someExpensiveComputation(props);return initialState; });

（2）初始值需要計(jì)算，且消耗較大
如果你在渲染期間執(zhí)行了高開(kāi)銷的計(jì)算，則可以使用 useMemo 來(lái)進(jìn)行優(yōu)化。

（6）使用useRef說(shuō)明

const refContainer = useRef(initialValue);

useRef 返回一個(gè)可變的 ref 對(duì)象，其 .current 屬性被初始化為傳入的參數(shù)（initialValue）。返回的 ref 對(duì)象在組件的整個(gè)生命周期內(nèi)保持不變。

以上都是常見(jiàn)疑惑問(wèn)題總結(jié)，下一篇寫一下實(shí)例分析；

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的react hook问题讲解的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。