bHx28資訊網——每日最新資訊28at.com

在開發過程中，我們常常會遇到這樣的場景。bHx28資訊網——每日最新資訊28at.com

有一個列表，但是我們需要根據列表的不同類型查詢并顯示對應類型的數據。如頭圖所示。這里有一個很明確的現象就是，不同的類型會對應不同的列表，但是當我們代入抽象思維思考一下就能輕易發現，除了類型不同之外，其他的所有特性都是一樣的。bHx28資訊網——每日最新資訊28at.com

一樣的接口、一樣的 UI、一樣的類型、一樣的交互。因此我們很容易會想到，把多個類型的列表當成同一個列表來處理，當 type 發生變化時去重新請求接口就可以輕松完成這個功能。bHx28資訊網——每日最新資訊28at.com

function ListPage() {  const [list, setList] = useState([])  const [loading, setLoading] = useState(true)  const [error, setError] = useState('')  const [type, setType] = useState('all')  useEffect(() => {    setLoading(true)    api.get('xxx/xxx/xxx', type).then(res => {      setList(res.data)      setLoading(false)      setError('')    })  }, [type])  return (    <>      <Tabs type={type} onChange={setType} />      <List        list={list}        loading={loading}        error={error}        renderItem={(item) => (          <div key={item} className={s.item}>{item}</div>        )}      />    </>  )}

這樣的處理是有一定合理性的，我相信很多小伙伴也會這樣處理。因為他非常符合語義。bHx28資訊網——每日最新資訊28at.com

不過 React 新官方文檔中，提出了一個更巧妙的方式來解決這個問題。bHx28資訊網——每日最新資訊28at.com

首先，我們可以將列表邏輯單獨拆分為一個子組件。該子組件接收參數 type 作為一個 propsbHx28資訊網——每日最新資訊28at.com

function ListPart({type}) {  const [list, setList] = useState([])  const [loading, setLoading] = useState(true)  const [error, setError] = useState('')  useEffect(() => {    api.get('xxx/xxx/xxx', type).then(res => {      setList(res.data)      setLoading(false)      setError('')    })  }, [])    return (    <List      list={list}      loading={loading}      error={error}      renderItem={(item) => (        <div key={item} className={s.item}>{item}</div>      )}    />  )}

然后這里的重點來了，在 ListPage 組件中，我們在剛才封裝好的子組件 ListPart 上，傳入一個 key 值。這樣，我們就能夠在不顯示監聽 type 變化的情況下，做到跟剛才一樣的效果。bHx28資訊網——每日最新資訊28at.com

function ListPage() {  const [type, setType] = useState('all')  return (    <div>      <Tabs type={type} onChange={setType} />      <ListPart type={type} key={type} />    </div>  )}

在 React 的 diff 過程中，當一個組件的 key 值發生了變化，那么該組件將會被重新創建。我們也正是巧妙的利用了這個內部邏輯，將代碼改進成現在這樣。bHx28資訊網——每日最新資訊28at.com

在 ListPart 的封裝中，我們還可以借助我們之前封裝自定義 hook 的思路，進一步簡化代碼。bHx28資訊網——每日最新資訊28at.com

function ListPart({type}) {  const { loading, list = [], error } = useFetch(api, type)    return (    <List      list={list}      loading={loading}      error={error}      renderItem={(item) => (        <div key={item} className={s.item}>{item}</div>      )}    />  )}

這里面由于自定義 hook useFetch 是提前封裝好的工具方法，List 是提前封裝好的列表組件，當我們在寫頁面頁面時，整個列表的開發工作量將會非常小。bHx28資訊網——每日最新資訊28at.com

完整代碼如下：bHx28資訊網——每日最新資訊28at.com

function ListPage() {  const [type, setType] = useState('all')  return (    <div>      <Tabs type={type} onChange={setType} />      <ListPart type={type} key={type} />    </div>  )}

function ListPart({type}) {  const { loading, list = [], error } = useFetch(api, type)    return (    <List      list={list}      loading={loading}      error={error}      renderItem={(item) => (        <div key={item} className={s.item}>{item}</div>      )}    />  )}

其他案例

給子組件傳入 key 值，當 key 值發生變化，子組件會被重置。這樣的思路還可以運用到別的類似場景。bHx28資訊網——每日最新資訊28at.com

例如，你請求了一個書籍列表，但是某一個區域只能顯示選中的書籍的部分信息與幾條用戶評價，當我們選中別的書籍時，這信息與評論都需要全部更新。bHx28資訊網——每日最新資訊28at.com

這里處理起來比較麻煩的是書籍部分信息是從父級傳遞而來，而評論信息卻是需要重新請求獲取。bHx28資訊網——每日最新資訊28at.com

不過借助這個思路，將會非常容易做到良好的解耦，我們只需要從父級通過 props 把書籍信息傳遞下來，然后在子組件內部自己去處理評論信息即可。從而斷開評論信息與書籍切換的耦合。bHx28資訊網——每日最新資訊28at.com

function BookProfile() {  ...  return (    <div>      ...      <CurrentBookPart info={infolist[i]} key={bookid} />    </div>  )}

function CurrentBookPart(props) {  const [comment, setComment] = useState()  ...}

總結

合理運用這個技巧，可以讓我們的代碼更加高效、低耦合，邏輯更加順暢。也能夠大幅度提高我們的開發效率，快快去重新查看一下你的項目，有沒有可以使用這種方式重構的地方吧。bHx28資訊網——每日最新資訊28at.com

React 新的官方文檔確實寫得非常好，提供了許多項目開發最佳實踐的思路。這些思路和實用技巧，同樣也適用于 Vue，也能夠提高我們對 Vue 的使用心得。bHx28資訊網——每日最新資訊28at.com

本文鏈接：http://www.tebozhan.com/showinfo-26-83618-0.html從 React 新官網學到的一個優秀實踐妙招

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com

上一篇： C++中的顯式虛函數重載：override與final詳解

下一篇： 要么返回錯誤值，要么輸出日志，別兩樣都做