廢話少說，這三種方式分別是：render props、高階組件和自定義Hook。下面依次演示
假設有一個TimeOnPage組件專門用來記錄用戶在當前頁面停留時間，像這樣：
|
1
2
3
4
5
6
7
8
9
10
11
12
|
const TimeOnPage = () => { const [second, setSecond] = useState(0); useEffect(() => { setTimeout(() => { setSecond(second + 1); }, 1000); }, [second]); return ( <div>停留時間：{second}秒</div> );} |
如果另一個組件需要復用這個功能，我們能否封裝一下，以便輕松地與其它組件共享？
一般很自然地想到子組件嵌套的方式，利用props傳參
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
const Child = (props) => { return <div>stayTime: {props.stayTime}s</div>;};const TimeOnPage = () => { const [second, setSecond] = useState(0); useEffect(() => { setTimeout(() => { setSecond(second + 1); }, 1000); }, [second]); return ( <div> <Child stayTime={second} /> </div> );} |
這屬于在 TimeOnPage組件內部硬編碼，還沒有達到封裝復用的目標。看看render props怎么做？
render props
“render prop” 是指一種在 React 組件之間使用一個值為函數的 prop 共享代碼的簡單技術
接上文，在TimeOnPage里定義一個值為函數的prop，想渲染什么組件，在函數里返回即可，函數的參數就是想要共享的state。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
const Child = (props) => { return <div>stayTime: {props.stayTime}s</div>;};const TimeOnPage = (props) => { const [second, setSecond] = useState(0); useEffect(() => { setTimeout(() => { setSecond(second + 1); }, 1000); }, [second]); return <div>{props.render(second)}</div>;};<TimeOnPage render={(stayTime) => <Child stayTime={stayTime} /> |
其實，render prop 就是一個用于告知組件需要渲染什么內容的函數prop。
React Router也用到了這項技術。
|
1
2
3
|
<Router> <Route path="/home" render={() => <div>Home</div>} /></Router> |
高階組件
高階組件（HOC）是 React 中用于復用組件邏輯的一種高級技巧。HOC 自身不是 React API 的一部分，它是一種基于 React 的組合特性而形成的設計模式。
高階組件是一個函數，參數是一個需要被復用的組件A，返回值是一個新的組件N。新組件N是在組件A的基礎上做了一些加工，但不會修改組件A本身，只是功能增強。
假設有一個新聞列表組件長這樣：
|
1
2
3
4
5
6
7
8
9
10
|
const NewList = () => { return ( <div> <ul> <li>news item</li> <li>news item</li> </ul> </div> );} |
想要在新聞列表加載期間顯示loading動畫組件 <Loading />，通常會這么做
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
const Loading = () => { // loading動畫}const NewList = ({ isLoading }) => { return isLoading ? ( <Loading /> ) : ( <div> <ul> <li>news item</li> <li>news item</li> </ul> </div> );}; |
假設現在Table組件也要在加載數據期間顯示loading動畫組件，遵循類似的模式
|
1
2
3
4
5
6
7
8
9
10
|
const Loading = () => { // loading動畫}const DataList = ({ isLoading, ...props }) => { return isLoading ? ( <Loading /> ) : ( <Table {...props} /> );}; |
以上，你會發現DataList和NewList結構極度相似，如果還有第三個、第四個組件要加loading，繼續照這個模式重復第三次、第四次嗎？這不是最理想的做法，更好的做法是，使用高階組件把這個模式抽象出來：
|
1
2
3
4
5
|
const WithLoading = (WrappedComponent) => { return ({isLoading, ...props}) => { return isLoading ? <Loading /> : <WrappedComponent {...props} />; }}; |
然后就可以在不修改NewList和DataList的情況下分別給他們增加loading
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
const NewList = () => { return ( <div> <ul> <li>news item</li> <li>news item</li> </ul> </div> );};const DataList = (props) => { return <Table {...props} />};const WithLoading = (WrappedComponent) => { return ({isLoading, ...props}) => { return isLoading ? <Loading /> : <WrappedComponent {...props} />; }};// 帶loading的NewListconst WithLoadingNewList = WithLoading(<NewList />)// 帶loading的DataListconst WithLoadingDataList = WithLoading(<DataList />) |
自定義Hook
Hook 是 React 16.8 的新增特性。它可以讓你在不編寫 class 的情況下使用 state 以及其他的 React 特性。
React Hook有useState、useEffect等，它們都是函數，自定義Hook也是一個函數，它的名稱同樣以use開頭，函數內部可以調用其它Hook。與React組件不同的是，自定義Hook可以沒有返回值。與普通函數不同的是，自定義Hook內部可以調用其它Hook，而普通函數則不行。
在寫業務邏輯過程中，一般會將一些可重用的的方法定義成工具函數，然后就可以到處復用。同樣，通過自定義 Hook，可以將組件邏輯提取到可重用的函數中。到底選擇自定義Hook還是工具函數，取決于要提取的組件邏輯需不需要用到其他Hook，如果需要，就選擇自定義Hook，否則用工具函數即可。
回到本文第一個 TimeOnPage組件，改成自定義Hook的形式
|
1
2
3
4
5
6
7
8
9
10
|
const useTimeOnPage = () => { const [second, setSecond] = useState(0); useEffect(() => { setTimeout(() => { setSecond(second + 1); }, 1000); }, [second]); return second;} |
使用方法
|
1
2
3
4
|
const Demo = () => { const stayTime = useTimeOnPage(); return <div>當前頁面停留時間：{stayTime}秒</div>} |
總結
三種共享組件邏輯的方式有各自的適用場景：
render props適合共享那些有不同子組件/子元素的父組件，子組件/子元素的“坑位”已經定義好了，只能渲染在指定位置；
高階組件適合在不修改原有組件的基礎上對組件進行擴展；
自定義Hook能做的，純函數基本上也能做，只是有時候用自定義Hook實現會更方便快捷。
本文鏈接：Github
到此這篇關于詳解React中共享組件邏輯的三種方式的文章就介紹到這了,更多相關React 共享組件邏輯內容請搜索服務器之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持服務器之家！
原文鏈接：https://juejin.cn/post/6905229862856818695
