作者：LeanCloud 江宏
2019 年 2 月發(fā)布的 React 16.8 正式引入了 hook 的功能痢站。它使得 function 組件也像 class 組件一樣能維護(hù)狀態(tài)，所有的組件都可以寫(xiě)成函數(shù)的形式呜叫，比起原有的以 class 的多個(gè)方法來(lái)維護(hù)組件生命周期的方式播玖，簡(jiǎn)化了代碼维蒙，也基本消除了因?yàn)?this 綁定的問(wèn)題造成的難以發(fā)現(xiàn)的 bug。這篇文章就介紹一下最常用的 state hook，以及在這種新的方式下怎么與后端 API 通訊舰罚。

本文以一個(gè)管理任務(wù)的 Todo list 應(yīng)用為例饼齿，可以增加新的任務(wù)吃型，點(diǎn)擊可以把任務(wù)標(biāo)記為完成。部署好的效果可以在這里看到，代碼在這個(gè) GitHub repo。這個(gè) demo 使用 LeanCloud 作為存儲(chǔ)數(shù)據(jù)的后端悠夯，用的是一個(gè) LeanCloud 開(kāi)發(fā)版應(yīng)用夕膀，所以可能遇到請(qǐng)求數(shù)超限的情況菠剩，建議在本地運(yùn)行并替換進(jìn)自己的 AppId 和 AppKey。

這個(gè)應(yīng)用只有一個(gè)叫 App 的組件：

function App() {
  const [inputValue, setInputValue] = useState('');
  const [todos, setTodos] = useState(undefined);
  const [error, setError] = useState('');

開(kāi)頭先定義了它使用的狀態(tài)。useState的參數(shù)是狀態(tài)的初始值眼五，它會(huì)返回一對(duì)結(jié)果：用來(lái)讀取這個(gè)狀態(tài)的一個(gè)只讀引用幌陕，以及一個(gè)設(shè)置狀態(tài)新值的函數(shù)。這里創(chuàng)建了三個(gè)狀態(tài)： - inputValue: 輸入新任務(wù)的 <input> 元素的當(dāng)前值 - todos: 當(dāng)前顯示的任務(wù)汽煮。這里初始值設(shè)為 undefined 表示尚未加載暇赤，而 [] 則意味著已經(jīng)加載過(guò)鞋囊，但是為空歉糜。 - error: 當(dāng)前顯示的狀態(tài)信息。

每次這個(gè)組件被重新渲染時(shí)刽酱，App() 這個(gè)函數(shù)都會(huì)被調(diào)用喳逛。每個(gè) useState 只有第一次被調(diào)用時(shí)返回的狀態(tài)是初始值润文，之后每次都會(huì)返回已經(jīng)記住的當(dāng)前值殿怜。這里有三個(gè)狀態(tài)典蝌，React 是用調(diào)用 useState 的順序來(lái)區(qū)分他們⊥访眨可以理解為 App() 的所有狀態(tài)存儲(chǔ)在一個(gè)數(shù)組里骏掀，第一個(gè) useState() 返回的是第一個(gè)狀態(tài)，第二個(gè) useState() 返回的是第二個(gè)狀態(tài)，以此類(lèi)推截驮。所以使用 hook 必須保證這個(gè)組件函數(shù)每次運(yùn)行中： 1. 對(duì) useState() 的調(diào)用次數(shù)必須是一樣的笑陈。 2. 與各狀態(tài)對(duì)應(yīng)的 useState()的調(diào)用順序是一樣的。

這就意味著 useState() 的調(diào)用不能放在條件分支或循環(huán)中葵袭。為了避免出錯(cuò)涵妥，最好把所有 useState() 調(diào)用放在函數(shù)開(kāi)頭。

接下來(lái)是添加一個(gè)任務(wù)的函數(shù) addTodo：

const addTodo = () => {
    saveTodo(inputValue).then(todo => {
      setInputValue('');
      setTodos(prev => [todo].concat(prev));
    }).catch(setError);
  };

這里 saveTodo() 是一個(gè) helper 函數(shù)坡锡，會(huì)在文末介紹蓬网。在后端保存了新任務(wù)后，會(huì)把輸入清空鹉勒，并把新的任務(wù)加到用于顯示的任務(wù)列表的前面帆锋。這里使用了設(shè)置新?tīng)顟B(tài)的兩種方式：setInputValue('')直接設(shè)置新值，setTodos(prev => [todo].concat(prev)) 是傳遞一個(gè)更新?tīng)顟B(tài)的函數(shù)贸弥。后者通常在新?tīng)顟B(tài)依賴于舊狀態(tài)的時(shí)候使用窟坐。

再下一步檢查任務(wù)列表有沒(méi)有初始化過(guò)，如果沒(méi)有的話绵疲，就查詢后端數(shù)據(jù)把它初始化：

if (todos === undefined) {
    loadTodos().then(setTodos).catch(setError);
  }

然后是定義如何切換任務(wù)的完成狀態(tài)：

const toggle = item => {
    item.set('finished', !item.get('finished'));
    item.save()
      .then(() => setTodos(prev => prev.slice(0)))
      .catch(setError);
  };

這里值得注意的是在設(shè)置 todos 的新值的時(shí)候用 prev.slice(0) 把這個(gè)數(shù)組復(fù)制了一份哲鸳。這是因?yàn)榍袚Q一個(gè)任務(wù)的狀態(tài)只是這個(gè)數(shù)組中一個(gè)元素的一個(gè)屬性發(fā)生了改變。在使用 hook 更新?tīng)顟B(tài)時(shí)盔憨，作為一個(gè)優(yōu)化徙菠，React 會(huì)用 Object.is() 比較新老狀態(tài)，如果在這個(gè)語(yǔ)義下它們相等郁岩，React 會(huì)認(rèn)為狀態(tài)沒(méi)有改變而不重新渲染這個(gè)組件婿奔。Object.is() 認(rèn)為滿足以下條件之一的兩個(gè)值相等： - 兩個(gè)都是 undefined - 兩個(gè)都是 null - 兩個(gè)都是 true 或者都是 false - 兩個(gè)都是字符串并且有相同的長(zhǎng)度，相同的字符以相同的順序出現(xiàn) - 兩個(gè)是同一個(gè)對(duì)象 - 兩個(gè)都是數(shù)字并且： - 都是 +0 - 都是 -0 - 都是 NaN - 都不是零或 NaN 并有相同的值问慎。

這對(duì)于數(shù)字萍摊、布爾、字符串這樣 immutable 的簡(jiǎn)單類(lèi)型來(lái)說(shuō)不是問(wèn)題如叼，但是對(duì)于數(shù)組和對(duì)象來(lái)說(shuō)冰木，就意味著只有傳遞一個(gè)新的對(duì)象才會(huì)觸發(fā)渲染蝇闭。好在這里 slice(0) 只是做一個(gè)淺拷貝噪奄，沒(méi)有復(fù)制數(shù)組引用的對(duì)象，所以代價(jià)是比較低的权纤。

最后是把上面的一切放到渲染結(jié)果里：

return (
    <div className={AppStyles.app}>
      <div className={AppStyles.error}>{error.toString()}</div>
      <div className={AppStyles.add}>
        <input placeholder="What to do next?" value={inputValue}
               onChange={e => setInputValue(e.target.value)}
               onKeyUp={e => { if (e.keyCode === 13) addTodo(); } } />
        <input type="button" value="?" />
      </div>
      <ul>
        {todos && todos.map(item =>
                   <li key={item.getObjectId()}
                       onClick={() => toggle(item)}
                       data-finished={item.get('finished')}>
                     {item.get('content')}
                   </li> )}
      </ul>
    </div>
  );
}

下面兩個(gè)函數(shù)是 App() 里用到的從 LeanCloud 更新和加載數(shù)據(jù)的 saveTodo() 和 loadTodos()社证。

function saveTodo(content) {
  const Todo = LC.Object.extend('Todo');
  const todo = new Todo();
  todo.set('content', content);
  todo.set('finished', false);
  return todo.save();
}
?
function loadTodos() {
  const query = new LC.Query('Todo');
  query.equalTo('finished', false);
  query.limit(20);
  query.descending('createdAt');
  return query.find();
}

有的人認(rèn)為 React 的 hook 讓 React 變得更加「函數(shù)式」了逼龟。我的看法恰恰相反。把什么都變成了 JavaScript 的 function 并不意味著程序更 functional 了追葡。在有 hook 之前腺律，React 的組件分為 class 組件和 function 組件奕短，本來(lái) function 組件可以看作是純函數(shù)，傳遞進(jìn)去的 props 能決定渲染結(jié)果匀钧，是 functional 的篡诽。有了 hook 之后 function 也可以有狀態(tài)了，所以變成了披著 function 外衣的 object榴捡。如果不仔細(xì)了解實(shí)現(xiàn)機(jī)制的話，很容易產(chǎn)生一些微妙的 bug朱浴。不過(guò)也不可否認(rèn)吊圾，使用 hook 開(kāi)發(fā)簡(jiǎn)化了組件生命周期的概念，減少了代碼量翰蠢，在開(kāi)發(fā)者熟悉了這個(gè)新模式之后项乒，還是一個(gè)很有價(jià)值的改變。