別眨眼網

最近看到一個關於 React 的面試題，是京東技術三面的題目，感覺很有意思，一起來看看：

React 加入 Hooks 的意義是什麼？或者說一下為什麼 React 要加入Hooks 這一特性？最後舉例說一下 Hooks 的基本實現原理；

首先，我們看一下典型的兩個 Hooks 的基本使用，直接看程式碼，這裡就不細說了；

useState 基本使用：

// 引入 useStateimport React， { useState } from ‘react’function App（） { // 使用 const ［count， setCount］ = useState（1）； return （

useEffect ：

import React， { useState， useEffect } from ‘react’import ReactDom from ‘react-dom’function App（） { const ［count， setCount］ = useState（1） // 元件掛載完成之後執行 && 元件資料更新完成之後執行 // useEffect（（） => { // console。log（‘666’） // }） // 元件掛載完成之後執行 // useEffect（（）=>{ // console。log（678） // }，［］） // 元件被解除安裝之前執行 （引入react-dom進行解除安裝測試） useEffect（（）=>{ return （）=>{ console。log（‘元件被解除安裝了’） } }） return （

回到前面的問題，其實這樣的問題並沒有什麼標準答案，但是我們可以換位思考，站在面試官的角度想一下，為什麼會問這樣的問題？無非就是想考察我們對 Hooks 最基本的使用情況以及對 Hooks 設計理念的個人思考；

其實在 React 官方文件中，已經給出了答案，奈何很多人就是不看文件啊；

Hook 簡介 – React （docschina。org）

文件中的 “動機” 就很好的解釋了為什麼 React 要加入 Hooks 特性，總結來說就是三個基本要素：

1：元件之間的邏輯狀態難以複用；

2：大型複雜的元件很難拆分；

3：Class 語法的使用不友好；

總的來說，實際上就是類元件在多年的應用實踐中，發現了很多無法避免問題而又難以解決，而相對類元件，函式元件又太過於簡陋，比如，類元件可以訪問生命週期方法，函式元件不能；類元件中可以定義並維護 state（狀態），而函式元件不可以；類元件中可以獲取到例項化後的 this，並基於這個 this 做各種各樣的事情，而函式元件不可以；

但是，函數語言程式設計方式在JS中確實比 Class 的面向物件方式更加友好直觀，那麼只要能夠將函式的元件能力補齊，也就解決了上面的問題，而如果直接修改函式元件的能力，勢必會造成更大的成本，最好的方式就是開放對應介面進行呼叫，非侵入式引入元件能力，也就是我們現在看到的 Hooks 了；

明白了與原因，面試中的問題也就迎刃而解了，基本思路就是先闡述在沒有 Hooks 的時候，類元件有哪些問題，函式元件有哪些不足，而 Hooks 就是解決這些問題出現的；這也就是 Hooks 出現的意義了，那麼接著，我們再來解答下一個問題，Hooks 的設計理念是什麼呢？

我們先用程式碼來模仿一個基本的 Hooks 的實現過程，重寫 useState ：

import React from ‘react’// 匯入dom，用於更新元件import ReactDom from ‘react-dom’let statefunction useState（initState） { // 判斷state 是否是初始化 state = state ？ state ： initState function setState（newState） { // 更新資料 state = newState // 呼叫函式，更新元件 render（） } return ［state， setState］}// 重新渲染元件function render（） { ReactDom。render（， document。getElementById（‘root’））}function App（） { // 使用自定義 useState const ［count， setCount］ = useState（1）； return （

Rudi Yardley 在 2018 年的時候寫過一篇文章 《React hooks： not magic， just arrays》，詳細地闡釋了它的設計原理，感興趣的話可以找來看一下，上面案例，其實就是文章中用到的，透過在函式中呼叫 useState 會返回當前狀態與更新狀態的函式。count 的初始值是 1，然後，透過 useState 賦值初始值，然後獲取當前狀態 state 與函式 setState。那麼在點選按鈕時呼叫 setCount，修改 count 的值。本質上 state hook 替代了類元件中 setState 的作用。

一般情況下，一段激情的闡述之後都是要上價值的，所以，咱也來一段；

React 團隊當然清楚，新加一個全新的概念，對我們開發者來說是一個很高的學習成本，因此官方為好奇的讀者準備了

詳細的徵求意見文件

，在文件中用更多細節深入討論了 React 推進這件事的動機，也在具體設計決策和相關先進技術上提供了額外的視角。

最重要的是，Hook 和現有程式碼可以同時工作，你可以漸進式地使用他們。 不用急著遷移到 Hook。我們建議避免任何“大規模重寫”，尤其是對於現有的、複雜的 class 元件。開始“用 Hook 的方式思考”前，需要做一些思維上的轉變。