AVt天堂网 手机版,亚洲va久久久噜噜噜久久4399,天天综合亚洲色在线精品,亚洲一级Av无码毛片久久精品

當前位置:首頁 > 科技  > 軟件

從 React 新官網學到的一個優秀實踐妙招

來源: 責編: 時間:2024-04-15 18:11:54 156觀看
導讀在開發過程中,我們常常會遇到這樣的場景。有一個列表,但是我們需要根據列表的不同類型查詢并顯示對應類型的數據。如頭圖所示。這里有一個很明確的現象就是,不同的類型會對應不同的列表,但是當我們代入抽象思維思考一下就

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

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

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

一樣的接口、一樣的 UI、一樣的類型、一樣的交互。因此我們很容易會想到,把多個類型的列表當成同一個列表來處理,當 type 發生變化時去重新請求接口就可以輕松完成這個功能。NMR28資訊網——每日最新資訊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>        )}      />    </>  )}

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

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

首先,我們可以將列表邏輯單獨拆分為一個子組件。該子組件接收參數 type 作為一個 propsNMR28資訊網——每日最新資訊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 變化的情況下,做到跟剛才一樣的效果。NMR28資訊網——每日最新資訊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 值發生了變化,那么該組件將會被重新創建。我們也正是巧妙的利用了這個內部邏輯,將代碼改進成現在這樣。NMR28資訊網——每日最新資訊28at.com

在 ListPart 的封裝中,我們還可以借助我們之前封裝自定義 hook 的思路,進一步簡化代碼。NMR28資訊網——每日最新資訊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 是提前封裝好的列表組件,當我們在寫頁面頁面時,整個列表的開發工作量將會非常小。NMR28資訊網——每日最新資訊28at.com

完整代碼如下:NMR28資訊網——每日最新資訊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 值發生變化,子組件會被重置。這樣的思路還可以運用到別的類似場景。NMR28資訊網——每日最新資訊28at.com

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

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

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

function BookProfile() {  ...  return (    <div>      ...      <CurrentBookPart info={infolist[i]} key={bookid} />    </div>  )}
function CurrentBookPart(props) {  const [comment, setComment] = useState()  ...}

總結

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

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

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

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

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

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

標簽:
  • 熱門焦點
  • 小米降噪藍牙耳機Necklace分享:聽一首歌 讀懂一個故事

    在今天下午的小米Civi 2新品發布會上,小米還帶來了一款新的降噪藍牙耳機Necklace,我們也在發布結束的第一時間給大家帶來這款耳機的簡單分享。現在大家能見到最多的藍牙耳機
  • 7月安卓手機性能榜:紅魔8S Pro再奪榜首

    7月份的手機市場風平浪靜,除了紅魔和努比亞帶來了兩款搭載驍龍8Gen2領先版處理器的新機之外,別的也想不到有什么新品了,這也正常,通常6月7月都是手機廠商修整的時間,進入8月份之
  • 如何正確使用:Has和:Nth-Last-Child

    我們可以用CSS檢查,以了解一組元素的數量是否小于或等于一個數字。例如,一個擁有三個或更多子項的grid。你可能會想,為什么需要這樣做呢?在某些情況下,一個組件或一個布局可能會
  • 一篇聊聊Go錯誤封裝機制

    %w 是用于錯誤包裝(Error Wrapping)的格式化動詞。它是用于 fmt.Errorf 和 fmt.Sprintf 函數中的一個特殊格式化動詞,用于將一個錯誤(或其他可打印的值)包裝在一個新的錯誤中。使
  • 本地生活這塊肥肉,拼多多也想吃一口

    出品/壹覽商業 作者/李彥編輯/木魚拼多多也看上本地生活這塊蛋糕了。近期,拼多多在App首頁&ldquo;充值中心&rdquo;入口上線了本機生活界面。壹覽商業發現,該界面目前主要
  • 花7萬退貨退款無門:誰在縱容淘寶珠寶商家造假?

    來源:極點商業作者:楊銘在淘寶購買珠寶玉石后,因為保證金不夠賠付,店鋪關閉,退貨退款難、維權無門的比比皆是。&ldquo;提供相關產品鑒定證書,支持全國復檢,可以30天無理由退換貨。&
  • 機構稱Q2國內智能手機銷量同比下滑4% vivo份額重回第1

    7月29日消息,根據市場調查機構Counterpoint Research公布的最新報告,2023年第2季度中國智能手機銷量同比下降4%,創新自2014年以來第2季度銷量新低。報
  • 滴滴違法違規被罰80.26億 共存在16項違法事實

    滴滴違法違規被罰80.26億 存在16項違法事實開始于2121年7月,歷經一年時間,網絡安全審查辦公室對“滴滴出行”網絡安全審查終于有了一個暫時的結束。據“網信
  • 聯想的ThinkBook Plus下一版曝光,鍵盤旁邊塞個平板

    ThinkBook Plus 是聯想的一個特殊筆記本類別,它在封面放入了一塊墨水屏,也給人留下了較為深刻的印象。據有人爆料,聯想的下一款 ThinkBook Plus 可能更特殊,它
Top