React中共享組件邏輯的方式有哪些？很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

站在用戶的角度思考問題，與客戶深入溝通，找到潯陽網(wǎng)站設(shè)計(jì)與潯陽網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：網(wǎng)站設(shè)計(jì)、成都網(wǎng)站設(shè)計(jì)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名注冊(cè)、雅安服務(wù)器托管、企業(yè)郵箱。業(yè)務(wù)覆蓋潯陽地區(qū)。

假設(shè)有一個(gè)TimeOnPage組件專門用來記錄用戶在當(dāng)前頁面停留時(shí)間，像這樣：

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

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

如果另一個(gè)組件需要復(fù)用這個(gè)功能，我們能否封裝一下，以便輕松地與其它組件共享？

一般很自然地想到子組件嵌套的方式，利用props傳參

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組件內(nèi)部硬編碼，還沒有達(dá)到封裝復(fù)用的目標(biāo)?？纯磖ender props怎么做？

render props

“render prop” 是指一種在 React 組件之間使用一個(gè)值為函數(shù)的 prop 共享代碼的簡單技術(shù)

接上文，在TimeOnPage里定義一個(gè)值為函數(shù)的prop，想渲染什么組件，在函數(shù)里返回即可，函數(shù)的參數(shù)就是想要共享的state。

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} />

其實(shí)，render prop 就是一個(gè)用于告知組件需要渲染什么內(nèi)容的函數(shù)prop。
React Router也用到了這項(xiàng)技術(shù)。

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

高階組件

高階組件（HOC）是 React 中用于復(fù)用組件邏輯的一種高級(jí)技巧。HOC 自身不是 React API 的一部分，它是一種基于 React 的組合特性而形成的設(shè)計(jì)模式。

高階組件是一個(gè)函數(shù)，參數(shù)是一個(gè)需要被復(fù)用的組件A，返回值是一個(gè)新的組件N。新組件N是在組件A的基礎(chǔ)上做了一些加工，但不會(huì)修改組件A本身，只是功能增強(qiáng)。

假設(shè)有一個(gè)新聞列表組件長這樣：

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

想要在新聞列表加載期間顯示loading動(dòng)畫組件 <Loading />，通常會(huì)這么做

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

假設(shè)現(xiàn)在Table組件也要在加載數(shù)據(jù)期間顯示loading動(dòng)畫組件，遵循類似的模式

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

以上，你會(huì)發(fā)現(xiàn)DataList和NewList結(jié)構(gòu)極度相似，如果還有第三個(gè)、第四個(gè)組件要加loading，繼續(xù)照這個(gè)模式重復(fù)第三次、第四次嗎？這不是最理想的做法，更好的做法是，使用高階組件把這個(gè)模式抽象出來：

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

然后就可以在不修改NewList和DataList的情況下分別給他們?cè)黾觢oading

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等，它們都是函數(shù)，自定義Hook也是一個(gè)函數(shù)，它的名稱同樣以u(píng)se開頭，函數(shù)內(nèi)部可以調(diào)用其它Hook。與React組件不同的是，自定義Hook可以沒有返回值。與普通函數(shù)不同的是，自定義Hook內(nèi)部可以調(diào)用其它Hook，而普通函數(shù)則不行。

在寫業(yè)務(wù)邏輯過程中，一般會(huì)將一些可重用的的方法定義成工具函數(shù)，然后就可以到處復(fù)用。同樣，通過自定義 Hook，可以將組件邏輯提取到可重用的函數(shù)中。到底選擇自定義Hook還是工具函數(shù)，取決于要提取的組件邏輯需不需要用到其他Hook，如果需要，就選擇自定義Hook，否則用工具函數(shù)即可。

回到本文第一個(gè) TimeOnPage組件，改成自定義Hook的形式

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

 useEffect(() => {
  setTimeout(() => {
   setSecond(second + 1);
  }, 1000);
 }, [second]);
 return second;
}

使用方法

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

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對(duì)創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，的支持。

網(wǎng)站題目：React中共享組件邏輯的方式有哪些-創(chuàng)新互聯(lián)
網(wǎng)頁地址：http://aaarwkj.com/article40/gpdho.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供面包屑導(dǎo)航、營銷型網(wǎng)站建設(shè)、品牌網(wǎng)站設(shè)計(jì)、動(dòng)態(tài)網(wǎng)站、網(wǎng)站內(nèi)鏈、App開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)