廢話少說，這三種方式分別是：render props、高階元件和自定義Hook。下面依次演示

假設有一個TimeOnPage元件專門用來記錄使用者在當前頁面停留時間，像這樣：

const TimeOnPage = () => {
 const [second,setSecond] = useState(0);

 useEffect(() => {
  setTimeout(() => {
   setSecond(second + 1);
  },1000);
 },[second]);
 return (
  <div>停留時間：{second}秒</div>
 );
}

如果另一個元件需要複用這個功能，我們能否封裝一下，以便輕鬆地與其它元件共享？

一般很自然地想到子元件巢狀的方式，利用props傳參

const Child = (props) => {
 return <div>stayTime: {props.stayTime}s</div>;
};

const TimeOnPage = () => {
 const [second,[second]);
 return (
  <div>
   <Child stayTime={second} />
  </div>
 );
}

這屬於在 TimeOnPage元件內部硬編碼，還沒有達到封裝複用的目標。看看render props怎麼做？

render props

“render prop” 是指一種在 React 元件之間使用一個值為函式的 prop 共享程式碼的簡單技術

接上文，在TimeOnPage裡定義一個值為函式的prop，想渲染什麼元件，在函式裡返回即可，函式的引數就是想要共享的state。

const Child = (props) => {
 return <div>stayTime: {props.stayTime}s</div>;
};

const TimeOnPage = (props) => {
 const [second,[second]);
 return <div>{props.render(second)}</div>;
};

<TimeOnPage render={(stayTime) => <Child stayTime={stayTime} />

其實，render prop 就是一個用於告知元件需要渲染什麼內容的函式prop。
React Router也用到了這項技術。

<Router>
 <Route path="/home" render={() => <div>Home</div>} />
</Router>

高階元件

高階元件（HOC）是 React 中用於複用元件邏輯的一種高階技巧。HOC 自身不是 React API 的一部分，它是一種基於 React 的組合特性而形成的設計模式。

高階元件是一個函式，引數是一個需要被複用的元件A，返回值是一個新的元件N。新元件N是在元件A的基礎上做了一些加工，但不會修改元件A本身，只是功能增強。

假設有一個新聞列表元件長這樣：

const NewList = () => {
 return (
  <div>
   <ul>
    <li>news item</li>
    <li>news item</li>
   </ul>
  </div>
 );
}

想要在新聞列表載入期間顯示loading動畫元件 <Loading />，通常會這麼做

const Loading = () => {
 // loading動畫
}
const NewList = ({ isLoading }) => {
 return isLoading ? (
  <Loading />
 ) : (
  <div>
   <ul>
    <li>news item</li>
    <li>news item</li>
   </ul>
  </div>
 );
};

假設現在Table元件也要在載入資料期間顯示loading動畫元件，遵循類似的模式

const Loading = () => {
 // loading動畫
}
const DataList = ({ isLoading,...props }) => {
 return isLoading ? (
  <Loading />
 ) : (
  <Table {...props} />
 );
};

以上，你會發現DataList和NewList結構極度相似，如果還有第三個、第四個元件要加loading，繼續照這個模式重複第三次、第四次嗎？這不是最理想的做法，更好的做法是，使用高階元件把這個模式抽象出來：

const WithLoading = (WrappedComponent) => {
 return ({isLoading,...props}) => {
  return isLoading ? <Loading /> : <WrappedComponent {...props} />;
 }
};

然後就可以在不修改NewList和DataList的情況下分別給他們增加loading

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的NewList
const WithLoadingNewList = WithLoading(<NewList />)
// 帶loading的DataList
const 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的形式

const useTimeOnPage = () => {
 const [second,[second]);
 return second;
}

使用方法

const Demo = () => {
 const stayTime = useTimeOnPage();
 return <div>當前頁面停留時間：{stayTime}秒</div>
}

總結

三種共享元件邏輯的方式有各自的適用場景：
render props適合共享那些有不同子元件/子元素的父元件，子元件/子元素的“坑位”已經定義好了，只能渲染在指定位置；
高階元件適合在不修改原有元件的基礎上對元件進行擴充套件；
自定義Hook能做的，純函式基本上也能做，只是有時候用自定義Hook實現會更方便快捷。
本文連結：Github

到此這篇關於詳解React中共享元件邏輯的三種方式的文章就介紹到這了,更多相關React 共享元件邏輯內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！