React Hook 官網地址：https://react.docschina.org/docs/hooks-faq.html

---

（1）問題分析？

Hook 是什么？

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

什么時候我會用 Hook？

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

什么是副作用？

在 React 組件中執行數據獲取、訂閱或者手動修改 DOM，我們統一把這些操作稱為“副作用”，或者簡稱為“作用”。

兩種常見副作用操作是什么？

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

不需要清除effect

只想在 React 更新 DOM 之后運行一些額外的代碼。（比如發送網絡請求，手動變更 DOM，記錄日志，這些都是常見的無需清除的操作。）

需要清除effect

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

---

---

（2）useEffect使用和意義？

在一個函數里面可以多次使用；

代表 componentDidMount、componentDidUpdate 和 componentWillUnmount；

useEffect默認可以當做class中的componentDidMount生命周期：只在組件掛載的時候運行一次；

清除副作用，在useEffect 的函數中 ，在return一個函數；（副作用函數還可以通過返回一個函數來指定如何“清除”副作用）；

只能在函數最外層調用 Hook。不要在循環、條件判斷或者子函數中調用；

只能在 React 的函數組件中調用 Hook。不要在其他 JavaScript 函數中調用；

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

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

useEffect 問題總結

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

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

③、useEffect 會在每次渲染后都執行嗎？
是的，默認情況下，它在第一次渲染之后和每次更新之后都會執行。

④、使用useEffect Hook 其中一個目的？
就是要解決 class 中生命周期函數經常包含不相關的邏輯，但又把相關邏輯分離到了幾個不同方法中的問題。

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

如果某些特定值在兩次重渲染之間沒有發生變化，你可以通知 React 跳過對 effect 的調用，只要傳遞數組作為 useEffect 的第二個可選參數即可：

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

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

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

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

---

（3）react hook復用數據狀態？

可以創建涵蓋各種場景的自定義 Hook，如表單處理、動畫、訂閱聲明、計時器，甚至可能還有更多我們沒想到的場景。

（4）useContext 和useReducer 的作用？

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

useReducer 可以讓你通過 reducer 來管理組件本地的復雜 state

** ①、useContext接受值，返回值，context的值來源？**

const value = useContext(MyContext);

接收一個 context 對象（React.createContext 的返回值）并返回該 context 的當前值。當前的 context 值由上層組件中距離當前組件最近的 <MyContext.Provider> 的 value prop 決定。
注意點：
useContext 的參數必須是 context 對象本身

** ②、useReducer使用場景？**

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

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

（5）使用State Hook說明

組件昵稱（稱呼）？
沒有React state 的能力的成為“無狀態組件”，有React state 的能力的成為“函數組件”；

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

調用 useState 方法的時候做了什么?
它定義一個 “state 變量”；

useState 方法的返回值是什么？
返回值為：當前 state 以及更新 state 的函數。

讀取state？

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

更新state？

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

---

初始化時需要處理state情況？

（1）初始值需要計算
如果初始 state 需要通過復雜計算獲得，則可以傳入一個函數，在函數中計算并返回初始的 state，此函數只在初始渲染時被調用：

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

（2）初始值需要計算，且消耗較大
如果你在渲染期間執行了高開銷的計算，則可以使用 useMemo 來進行優化。

（6）使用useRef說明

const refContainer = useRef(initialValue);

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

以上都是常見疑惑問題總結，下一篇寫一下實例分析；

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的react hook问题讲解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。