許多人在學(xué)習(xí) React 時(shí)會(huì)有這樣一個(gè)疑問(wèn)，不斷看到 React 官方團(tuán)隊(duì)言論，或者說(shuō)各路大佬都是在說(shuō) React 是函數(shù)式編程，我們寫組件確實(shí)寫的是組件，但問(wèn)題就在于，我們寫的組件是有內(nèi)部狀態(tài)，這樣的函數(shù)就不是純函數(shù)了，這怎么能算是函數(shù)式編程呢？

想不通。

今天這篇文章，就來(lái)跟大家解釋一下，為什么 React 的函數(shù)式組件，其實(shí)就是純函數(shù)。

UI = f(state)

一、hook 的特性

我們?cè)诼暶饕粋€(gè)函數(shù)式組件時(shí)，常常會(huì)使用到 hook 來(lái)聲明一些狀態(tài)或者方法，但是我們?cè)谑褂?hook 時(shí)，你會(huì)發(fā)現(xiàn) hook 會(huì)有一些奇怪的規(guī)則，那么就是不能把 hook 放到條件判斷中去。

if (a === 1) {
  const [count, setCount] = useState(0)
}

然后有的人就很不理解這個(gè)現(xiàn)象。于是把這個(gè)情況定性為 React 的設(shè)計(jì)缺陷。但這真的是設(shè)計(jì)缺陷嗎？

我們只需要換個(gè)思路，你就能對(duì)這個(gè)現(xiàn)象豁然開(kāi)朗。

二、hook 存在哪？

在初學(xué)階段，我們會(huì)很自然的認(rèn)為，當(dāng)我們使用 useState 在函數(shù)內(nèi)部定義了一個(gè)狀態(tài)時(shí)，那么這個(gè)狀態(tài)一定是保存在這個(gè)函數(shù)內(nèi)部的。

function Demo() {
  const [count, setCount] = useState(0)
  ...
}

然后理解得多了，才發(fā)現(xiàn)并不是這樣。每一個(gè)函數(shù)的狀態(tài)都被存在了另外一個(gè)模塊里（Fiber tree）。也就是說(shuō)，只要 React 允許，我們甚至可以在別的組件訪問(wèn)到任意一個(gè)組件里的狀態(tài)。當(dāng)然 React 對(duì)這種情況做了限制，只允許通過(guò)特定的語(yǔ)法來(lái)做到這個(gè)事情。

函數(shù)組件中的所有的 hook 都是從外部傳入的。

三、state 其實(shí)是參數(shù)

我們?cè)賮?lái)看一下這個(gè)公式。

UI = f(state)

這個(gè)時(shí)候我們會(huì)恍然發(fā)現(xiàn)，雖然 state 在函數(shù)內(nèi)部定義/獲取了，但是很明顯，React 是期望大家把他當(dāng)成外部傳入的參數(shù)來(lái)理解的。

例如我們有這樣一個(gè)函數(shù)。

function Counter({x}) {
  const [count, setCount] = useState(0)
  return (
    <div>{x + count}</div>
  )
}

他可以等價(jià)于。

function Counter({x}, [count = 0, setCount]) {
  return (
    <div>{x + count}</div>
  )
}

這個(gè)時(shí)候我們就明朗了，函數(shù)，原來(lái)還是純函數(shù)。但是為什么語(yǔ)法不這樣設(shè)計(jì)呢，不是更好理解嗎？當(dāng)然是因?yàn)閰?shù)太多了寫不下了呀，因此 React 把傳參的行為，下放到了函數(shù)內(nèi)部，通過(guò) hook 的方式來(lái)實(shí)現(xiàn)。

四、重新審視 hook

如果 state 是外部傳入的參數(shù)，那么此時(shí)我們就要重新審視一下為什么不能把 hook 放到條件判斷中去了。

例如：

function Counter({x}) {
  if (a === 0) {
    const [loading, setLoading] = useState(false)  
  }
  const [count, setCount] = useState(0)
  return (
    <div>{x + count}</div>
  )
}

所以，useState 是外部傳參，那么參數(shù)本來(lái)就應(yīng)該有嚴(yán)格的順序要求，這個(gè)時(shí)候如果第一個(gè)參數(shù)因?yàn)椴环蠗l件而在代碼邏輯里消失了，那第二個(gè)參數(shù)，不就變成第一個(gè)參數(shù)了嗎？

這個(gè)時(shí)候代碼邏輯中，就會(huì)把第二個(gè)參數(shù)當(dāng)成第一個(gè)參數(shù)去使用，這不就亂了嗎？

當(dāng)我們調(diào)用 setState 時(shí)，表示入?yún)⒄诎l(fā)生變化，函數(shù)自然也會(huì)重新執(zhí)行。

五、總結(jié)

hook 存放在函數(shù)外部，因此不屬于函數(shù)內(nèi)部的狀態(tài)。我們?cè)诶斫夂瘮?shù)式組件是純函數(shù)時(shí)，應(yīng)該把 hook 當(dāng)成參數(shù)去看待，這樣很多現(xiàn)象就非常自然了。

函數(shù)式編程更加側(cè)重于把邏輯解耦拆分成不同的函數(shù)，然后通過(guò)函數(shù)組合的形式去構(gòu)建一個(gè)完整的邏輯，例如我們非常常見(jiàn)的 map 方法

function func(item) {
  return item + 1
}

var newArr = arr.map(func)

所以理解函數(shù)式編程，會(huì)對(duì)邏輯封裝解耦的能力要求比較高，在這種情況下，理解函數(shù)式編程確實(shí)會(huì)存在一定的門檻。所以最后思考一個(gè)問(wèn)題，為什么 state 一定要是不可變數(shù)據(jù)？