原文地址：https://medium.com/@ryardley/...
譯文：染陌 （Github）
譯文地址：https://github.com/answershuto/Blog
轉載請著名出處
我是一名hooks API的忠實粉絲，然而它對你的使用會有一些奇怪的約束，所以我在本文中使用一個模型來把原理展示給那些想去使用新的API卻難以理解它的規則的人。
警告：Hooks 還處於實驗階段
本文提到的 Hooks API 還處於實驗階段，如果你需要的是穩定的 React API 文檔，可以從這裏找到。
解密 Hooks 的工作方式
我發現一些同學苦苦思索新的 Hooks API 中的“魔法”，所以我打算嘗試着去解釋一下，至少從表層出發，它是如何工作的。
Hooks 的規則
React 核心團隊在Hooks的提案中提出了兩個在你使用Hooks的過程中必須去遵守的主要規則。
- 請不要在循環、條件或者嵌套函數中調用 Hooks
- 都有在 React 函數中才去調用 Hooks
後者我覺得是顯而易見的，你需要用函數的方式把行爲與組件關聯起來才能把行爲添加到組件。
然而對於前者，我認爲它會讓人產生困惑，因爲這樣使用 API 編程似乎顯得不那麼自然，但這就是我今天要套索的內容。
Hooks 的狀態管理都是依賴數組的
爲了讓大家產生一個更清晰的模型，讓我們來看一下 Hooks 的簡單實現可能是什麼樣子。
需要注意的是，這部分內容只是 API 的一種可能實現方法，以便讀者更好地趣理解它。它並不是 API 實際在內部的工作方式，而且它只是一個提案，在未來都會有可能發生變化。
我們應該如何實現“useState()”呢？
讓我們通過一個例子來理解狀態可能是如何工作的。
首先讓我們從一個組件開始：
/* 譯:https://github.com/answershuto */
function RenderFunctionComponent() {
const [firstName, setFirstName] = useState("Rudi");
const [lastName, setLastName] = useState("Yardley");
return (
<Button onClick={() => setFirstName("Fred")}>Fred</Button>
);
}Hooks API 背後的思想是你可以將一個 setter 函數通過 Hook 函數的第二個參數返回，用該函數來控制 Hook 管理的壯體。
所以 React 能用這個做什麼呢？
首先讓我們解釋一下它在 React 內部是如何工作的。在執行上下文去渲染一個特殊組件的時候，下面這些步驟會被執行。這意味着，數據的存儲是獨立於組件之外的。該狀態不能與其他組件共享，但是它擁有一個獨立的作用域，在該作用域需要被渲染時讀取數據。
（1）初始化
創建兩個空數組“setters”與“state”
設置指針“cursor”爲 0
(2)首次渲染
首次執行組件函數
每當 useState() 被調用時，如果它是首次渲染，它會通過 push 將一個 setter 方法（綁定了指針“cursor”位置）放進 setters 數組中，同時，也會將另一個對應的狀態放進 state 數組中去。
(3)後續渲染
每次的後續渲染都會重置指針“cursor”的位置，並會從每個數組中讀取對應的值。
(4)處理事件
每個 setter 都會有一個對應的指針位置的引用，因此當觸發任何 setter 調用的時候都會觸發去改變狀態數組中的對應的值。
以及底層的實現
這是一段示例代碼：
let state = [];
let setters = [];
let firstRun = true;
let cursor = 0;
function createSetter(cursor) {
return function setterWithCursor(newVal) {
state[cursor] = newVal;
};
}
/* 譯:https://github.com/answershuto */
// This is the pseudocode for the useState helper
export function useState(initVal) {
if (firstRun) {
state.push(initVal);
setters.push(createSetter(cursor));
firstRun = false;
}
const setter = setters[cursor];
const value = state[cursor];
cursor++;
return [value, setter];
}
/* 譯:https://github.com/answershuto */
// Our component code that uses hooks
function RenderFunctionComponent() {
const [firstName, setFirstName] = useState("Rudi"); // cursor: 0
const [lastName, setLastName] = useState("Yardley"); // cursor: 1
return (
<div>
<Button onClick={() => setFirstName("Richard")}>Richard</Button>
<Button onClick={() => setFirstName("Fred")}>Fred</Button>
</div>
);
}
// This is sort of simulating Reacts rendering cycle
function MyComponent() {
cursor = 0; // resetting the cursor
return <RenderFunctionComponent />; // render
}
console.log(state); // Pre-render: []
MyComponent();
console.log(state); // First-render: ['Rudi', 'Yardley']
MyComponent();
console.log(state); // Subsequent-render: ['Rudi', 'Yardley']
// click the 'Fred' button
console.log(state); // After-click: ['Fred', 'Yardley']爲什麼說順序很重要呢？
如果我們基於一些外部條件或是說組件的狀態去改變 Hooks 在渲染週期的順序，那會發生什麼呢？
讓我們做一些 React 團隊禁止去做的事情。
let firstRender = true;
function RenderFunctionComponent() {
let initName;
if(firstRender){
[initName] = useState("Rudi");
firstRender = false;
}
const [firstName, setFirstName] = useState(initName);
const [lastName, setLastName] = useState("Yardley");
return (
<Button onClick={() => setFirstName("Fred")}>Fred</Button>
);
}我們在條件語句中調用了 useState 函數，讓我們看看它對整個系統造成的破壞。
糟糕組件的首次渲染
到此爲止，我們的變量 firstName 與 lastName 依舊包含了正確的數據，讓我們繼續去看一下第二次渲染會發生什麼事情。
糟糕的第二次渲染
現在 firstName 與 lastName 這兩個變量全部被設置爲“Rudi”，與我們實際的存儲狀態不符。
這個例子的用法顯然是不正確的，但是它讓我們知道了爲什麼我們必須使用 React 團隊規定的規則去使用 Hooks。
React 團隊制定了這個規則，是因爲如果不遵循這套規則去使用 Hooks API會導致數據有問題。思考 Hooks 維護了一些列的數組，所以你不應該去違反這些規則
所以你現在應該清除爲什麼你不應該在條件語句或者循環語句中使用 Hooks 了。因爲我們維護了一個指針“cursor”指向一個數組，如果你改變了 render 函數內部的調用順序，那麼這個指針“cursor”將不會匹配到正確的數據，你的調用也將不會指向正確的數據或句柄。
因此，有一個訣竅就是你需要思考 Hooks 作爲一組需要一個匹配一致的指針“cursor”去管理的數組(染陌譯)。如果做到了這一點，那麼採用任何的寫法它都可以正常工作。
總結
希望通過上述的講解，我已經給大家建立了一個關於 Hooks 的更加清晰的思維模型，以此可以去思考新的 Hooks API 底層到底做了什麼事情。請記住，它真正的價值在於能夠關注點聚集在一起，同時小心它的順序，那使用 Hooks API 會很高的回報。
Hooks 是 React 組件的一個很有用的插件，這也佐證了爲何大家爲何對此感到如此興奮。如果你腦海中形成了我上述的這種思維模型，把這種狀態作爲一組數組的存在，那麼你就會發現在使用中不會打破它的規則。
我希望將來再去研究一下 useEffects useEffects 方法，並嘗試將其與 React 的生命週期進行比較。
這篇文章是一篇在線文檔，如果你想要參與貢獻或者有任何有誤的地方，歡迎聯繫我。
你可以在 Twitter 上面 fllow 我（Rudi Yardley）或者在Github找到我。