資訊專欄INFORMATION COLUMN
摘要：更容易將組件的與狀態(tài)分離。也就是只提供狀態(tài)處理方法，不會(huì)持久化狀態(tài)。大體思路是利用共享一份數(shù)據(jù)，作為的數(shù)據(jù)源。精讀帶來的約定函數(shù)必須以命名開頭，因?yàn)檫@樣才方便做檢查，防止用判斷包裹語句。前端精讀幫你篩選靠譜的內(nèi)容。
1 引言
React Hooks 是 React 16.7.0-alpha 版本推出的新特性，想嘗試的同學(xué)安裝此版本即可。
React Hooks 要解決的問題是狀態(tài)共享，是繼 render-props 和 higher-order components 之后的第三種狀態(tài)共享方案，不會(huì)產(chǎn)生 JSX 嵌套地獄問題。
狀態(tài)共享可能描述的不恰當(dāng)，稱為狀態(tài)邏輯復(fù)用會(huì)更恰當(dāng)，因?yàn)橹还蚕頂?shù)據(jù)處理邏輯，不會(huì)共享數(shù)據(jù)本身。
不久前精讀分享過的一篇 Epitath 源碼 - renderProps 新用法 就是解決 JSX 嵌套問題，有了 React Hooks 之后，這個(gè)問題就被官方正式解決了。
為了更快理解 React Hooks 是什么，先看筆者引用的下面一段 renderProps 代碼：
function App() {
return (
{({ on, toggle }) => (
)
}
恰巧，React Hooks 解決的也是這個(gè)問題：
function App() {
const [open, setOpen] = useState(false);
return (
<>
setOpen(false)}
onCancel={() => setOpen(false)}
/>
);
}
可以看到，React Hooks 就像一個(gè)內(nèi)置的打平 renderProps 庫，我們可以隨時(shí)創(chuàng)建一個(gè)值，與修改這個(gè)值的方法。看上去像 function 形式的 setState，其實(shí)這等價(jià)于依賴注入，與使用 setState 相比，這個(gè)組件是沒有狀態(tài)的。
2 概述React Hooks 帶來的好處不僅是 “更 FP，更新粒度更細(xì)，代碼更清晰”，還有如下三個(gè)特性：
多個(gè)狀態(tài)不會(huì)產(chǎn)生嵌套，寫法還是平鋪的（renderProps 可以通過 compose 解決，可不但使用略為繁瑣，而且因?yàn)閺?qiáng)制封裝一個(gè)新對(duì)象而增加了實(shí)體數(shù)量）。
Hooks 可以引用其他 Hooks。
更容易將組件的 UI 與狀態(tài)分離。
第二點(diǎn)展開說一下：Hooks 可以引用其他 Hooks，我們可以這么做：
import { useState, useEffect } from "react";
// 底層 Hooks, 返回布爾值：是否在線
function useFriendStatusBoolean(friendID) {
const [isOnline, setIsOnline] = useState(null);
function handleStatusChange(status) {
setIsOnline(status.isOnline);
}
useEffect(() => {
ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);
return () => {
ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);
};
});
return isOnline;
}
// 上層 Hooks，根據(jù)在線狀態(tài)返回字符串：Loading... or Online or Offline
function useFriendStatusString(props) {
const isOnline = useFriendStatusBoolean(props.friend.id);
if (isOnline === null) {
return "Loading...";
}
return isOnline ? "Online" : "Offline";
}
// 使用了底層 Hooks 的 UI
function FriendListItem(props) {
const isOnline = useFriendStatusBoolean(props.friend.id);
return (
這個(gè)例子中，有兩個(gè) Hooks：useFriendStatusBoolean 與 useFriendStatusString, useFriendStatusString 是利用 useFriendStatusBoolean 生成的新 Hook，這兩個(gè) Hook 可以給不同的 UI：FriendListItem、FriendListStatus 使用，而因?yàn)閮蓚€(gè) Hooks 數(shù)據(jù)是聯(lián)動(dòng)的，因此兩個(gè) UI 的狀態(tài)也是聯(lián)動(dòng)的。
順帶一提，這個(gè)例子也可以用來理解 對(duì) React Hooks 的一些思考 一文的那句話：“有狀態(tài)的組件沒有渲染，有渲染的組件沒有狀態(tài)”：
useFriendStatusBoolean 與 useFriendStatusString 是有狀態(tài)的組件（使用 useState），沒有渲染（返回非 UI 的值），這樣就可以作為 Custom Hooks 被任何 UI 組件調(diào)用。
FriendListItem 與 FriendListStatus 是有渲染的組件（返回了 JSX），沒有狀態(tài)（沒有使用 useState），這就是一個(gè)純函數(shù) UI 組件，
利用 useState 創(chuàng)建 ReduxRedux 的精髓就是 Reducer，而利用 React Hooks 可以輕松創(chuàng)建一個(gè) Redux 機(jī)制：
// 這就是 Redux
function useReducer(reducer, initialState) {
const [state, setState] = useState(initialState);
function dispatch(action) {
const nextState = reducer(state, action);
setState(nextState);
}
return [state, dispatch];
}
這個(gè)自定義 Hook 的 value 部分當(dāng)作 redux 的 state，setValue 部分當(dāng)作 redux 的 dispatch，合起來就是一個(gè) redux。而 react-redux 的 connect 部分做的事情與 Hook 調(diào)用一樣：
// 一個(gè) Action
function useTodos() {
const [todos, dispatch] = useReducer(todosReducer, []);
function handleAddClick(text) {
dispatch({ type: "add", text });
}
return [todos, { handleAddClick }];
}
// 綁定 Todos 的 UI
function TodosUI() {
const [todos, actions] = useTodos();
return (
<>
{todos.map((todo, index) => (
{todo.text}
))}
);
}
useReducer 已經(jīng)作為一個(gè)內(nèi)置 Hooks 了，在這里可以查閱所有 內(nèi)置 Hooks。
不過這里需要注意的是，每次 useReducer 或者自己的 Custom Hooks 都不會(huì)持久化數(shù)據(jù)，所以比如我們創(chuàng)建兩個(gè) App，App1 與 App2:
function App1() {
const [todos, actions] = useTodos();
return todo count: {todos.length};
}
function App2() {
const [todos, actions] = useTodos();
return todo count: {todos.length};
}
function All() {
return (
<>
這兩個(gè)實(shí)例同時(shí)渲染時(shí)，并不是共享一個(gè) todos 列表，而是分別存在兩個(gè)獨(dú)立 todos 列表。也就是 React Hooks 只提供狀態(tài)處理方法，不會(huì)持久化狀態(tài)。
如果要真正實(shí)現(xiàn)一個(gè) Redux 功能，也就是全局維持一個(gè)狀態(tài)，任何組件 useReducer 都會(huì)訪問到同一份數(shù)據(jù)，可以和 useContext 一起使用。
大體思路是利用 useContext 共享一份數(shù)據(jù)，作為 Custom Hooks 的數(shù)據(jù)源。具體實(shí)現(xiàn)可以參考 redux-react-hook。
利用 useEffect 代替一些生命周期在 useState 位置附近，可以使用 useEffect 處理副作用：
useEffect(() => {
const subscription = props.source.subscribe();
return () => {
// Clean up the subscription
subscription.unsubscribe();
};
});
useEffect 的代碼既會(huì)在初始化時(shí)候執(zhí)行，也會(huì)在后續(xù)每次 rerender 時(shí)執(zhí)行，而返回值在析構(gòu)時(shí)執(zhí)行。這個(gè)更多帶來的是便利，對(duì)比一下 React 版 G2 調(diào)用流程：
