React Hooks 在螞蟻金服的實(shí)踐
一個(gè) React 項(xiàng)目，是由無數(shù)個(gè)大大小小的組件組合而成的。在 React 的世界中，組件是一等公民。而我們平時(shí)拆分組件的依據(jù)無非是：盡量的復(fù)用代碼。
組件是 UI + 邏輯的復(fù)用，你不能將 UI 和邏輯拆開。比如 antd 的?Cascader 級(jí)聯(lián)選擇?組件，內(nèi)置了樣式和級(jí)聯(lián)選擇的邏輯，用戶使用的時(shí)候相當(dāng)于一個(gè)黑盒，只管用就行了。但是有一個(gè)很現(xiàn)實(shí)的問題，當(dāng)該組件的樣式不能滿足我們需求的時(shí)候，我們需要從 0 重新實(shí)現(xiàn)一個(gè)組件，重寫 UI + 邏輯，哪怕邏輯真的一模一樣。組件的邏輯復(fù)用能力等于 0。我可以想到一個(gè)可怕的事實(shí)，社區(qū)上的同類組件，大部分的邏輯都是可以復(fù)用的，只是在樣式上有差異，但邏輯共享在社區(qū)上并沒有很流行。
HOC 與 Render Props
HOC 與 Render Props 可以把邏輯抽出來復(fù)用，但并沒有讓邏輯復(fù)用流行起來。
當(dāng)然，我上面說的不能復(fù)用有點(diǎn)夸張，React 提供了 HOC 與 Render Props 兩種方式來解決邏輯復(fù)用的問題。比如下面的監(jiān)聽鼠標(biāo)位置的邏輯，我們就可以通過 Render Props 來復(fù)用。
(position)=>
同類邏輯包括監(jiān)聽 window size，監(jiān)聽 scroll 位置等等。但是我們一般很少用 render props 來封裝邏輯，更少去和其它項(xiàng)目去共享邏輯。為什么呢？想想多個(gè)邏輯復(fù)用會(huì)怎么樣，你就知道多可怕了。
(size)=> ( (position)=> )
嵌套地獄的代碼是我們不能忍受的，同時(shí) HOC 也存在類似的問題，這可能是導(dǎo)致邏輯復(fù)用不能流行起來的一個(gè)重要原因。
React Hooks
React Hooks 很好的解決了邏輯復(fù)用的問題，同時(shí)社區(qū)中誕生了一批比較好的 React Hooks 庫(kù)。
React Hooks 是今年 React 的一個(gè)重磅炸彈，在社區(qū)引起了激烈的回響。隨著 Hooks 的誕生，我們可以通過 Custom Hooks 很方便的封裝邏輯，邏輯共享也成為了潮流。比如上面的例子，我們就可以通過?react-use?很方便的實(shí)現(xiàn)。
import {useMouse, useWindowSize, useScroll} from 'react-use'
function Demo(){
const mousePosition = useMouse();
const windowSize = useWindowSize();
}
react-use 是社區(qū)中比較優(yōu)秀的 Hooks 庫(kù)，封裝了很多常用的基礎(chǔ)邏輯，在日常開發(fā)中必不可少。但是只用 react-use 就夠了嗎？顯然不是。react-use 中的 Hooks 粒度比較小，類似于工具庫(kù)。
而在中臺(tái)產(chǎn)品中，有很多特定的場(chǎng)景邏輯，需要多個(gè) Hooks 進(jìn)行組合，或者定制特定的邏輯。在螞蟻內(nèi)部，有非常多的中臺(tái)應(yīng)用，開發(fā)者在各自項(xiàng)目中沉淀了各種好用的 custom Hooks，我們把這些好用的邏輯拿出來，創(chuàng)建了?@umijs/hooks?，定位為為中臺(tái)場(chǎng)景服務(wù)的 Hooks 庫(kù)。
@umijs/hooks
@umijs/hooks?是面向中臺(tái)應(yīng)用場(chǎng)景的 Hooks 庫(kù)，封裝了中臺(tái)常見場(chǎng)景的邏輯，讓中臺(tái)開發(fā)變得超級(jí)簡(jiǎn)單。@umijs/hooks 已經(jīng)在螞蟻金服多個(gè)產(chǎn)品中落地，口碑很好，提效明顯。當(dāng)然，你可能不信，口說無憑，那就用例子來說話。
useAntdTable
中臺(tái)開發(fā)中，table 頁面應(yīng)該算最多的一個(gè)了，我們一般會(huì)使用 antd 的?Table?組件來搭建，但是其中還是有很多邏輯，我們是無法避免的。
- page，pageSize管理
- page，pageSize 變化時(shí)重新進(jìn)行異步請(qǐng)求
- 篩選條件變化時(shí)，重置 page，并重新請(qǐng)求數(shù)據(jù)
- 異步請(qǐng)求的 loading 處理
- 異步請(qǐng)求的競(jìng)態(tài)處理
- 組件卸載時(shí)丟棄進(jìn)行中的異步請(qǐng)求（很多人通常不處理，在某些情況會(huì)報(bào)警告）
上面的邏輯，我們?cè)趲缀跛械?table 頁是必須要處理的，想想都可怕。useAntdTable 至少封裝了上面 6 個(gè)邏輯，一行代碼封裝所有邏輯，列表頁開發(fā)從未變得如此簡(jiǎn)單。
const { tableProps } = useAntdTable(asyncFn);
const columns = [];
return (
useSearch
常見的異步搜索場(chǎng)景，我們一般要處理：
- 防抖
- 異步請(qǐng)求的 loading 處理
- 異步請(qǐng)求的請(qǐng)求時(shí)序控制
- 組件卸載時(shí)取消防抖及異步請(qǐng)求等邏輯
現(xiàn)在一切變得如此簡(jiǎn)單：
const { data, loading, onChange } = useSearch(asyncFn);
更多的 Custom Hooks
當(dāng)然，我們還有更多極大提效的 Custom Hooks，你能想象不用寫一行邏輯，就能實(shí)現(xiàn)異步 loadmore 功能嗎？(useLoadMore)
你能想象不用寫一行邏輯，就能實(shí)現(xiàn)動(dòng)態(tài)增刪，排序的表單嗎？(useDynamicList)
各種常見場(chǎng)景，通通不用寫邏輯，通通不用寫邏輯。你可以在?@umijs/hooks?發(fā)現(xiàn)更多好用的 Hooks。
基礎(chǔ) Hooks
react-use 應(yīng)該是目前發(fā)展最好的 Hooks 庫(kù)，但是我們正在逐漸放棄它，最大的原因是版本升級(jí)太快，你能想象幾個(gè)月之前我項(xiàng)目中用的是 v9，現(xiàn)在已經(jīng)是 v13 了嗎？我已經(jīng)不知道怎么去升級(jí)了。
為了解決這個(gè)問題，@umijs/hooks 也沉淀了日常工作中頻繁使用的基礎(chǔ) Hooks，包括常用的 useAsync，useDebounce，useBoolean，useMouse 等等，并且還在不斷發(fā)展。也許只用 umi hooks 就夠了。