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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

總結

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

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

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

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

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

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

標簽:
  • 熱門焦點
Top