從 React 新官網學到的一個優秀實踐妙招
在開發過程中，我們常常會遇到這樣的場景。
有一個列表，但是我們需要根據列表的不同類型查詢并顯示對應類型的數據。如頭圖所示。這里有一個很明確的現象就是，不同的類型會對應不同的列表，但是當我們代入抽象思維思考一下就能輕易發現，除了類型不同之外，其他的所有特性都是一樣的。
一樣的接口、一樣的 UI、一樣的類型、一樣的交互。因此我們很容易會想到，把多個類型的列表當成同一個列表來處理，當 type 發生變化時去重新請求接口就可以輕松完成這個功能。
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>
)}
/>
</>
)
}這樣的處理是有一定合理性的，我相信很多小伙伴也會這樣處理。因為他非常符合語義。
不過 React 新官方文檔中，提出了一個更巧妙的方式來解決這個問題。
首先，我們可以將列表邏輯單獨拆分為一個子組件。該子組件接收參數 type 作為一個 props
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 變化的情況下，做到跟剛才一樣的效果。
function ListPage() {
const [type, setType] = useState('all')
return (
<div>
<Tabs type={type} onChange={setType} />
<ListPart type={type} key={type} />
</div>
)
}在 React 的 diff 過程中，當一個組件的 key 值發生了變化，那么該組件將會被重新創建。我們也正是巧妙的利用了這個內部邏輯，將代碼改進成現在這樣。
在 ListPart 的封裝中，我們還可以借助我們之前封裝自定義 hook 的思路，進一步簡化代碼。
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 是提前封裝好的列表組件，當我們在寫頁面頁面時，整個列表的開發工作量將會非常小。
完整代碼如下：
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 值發生變化，子組件會被重置。這樣的思路還可以運用到別的類似場景。
例如，你請求了一個書籍列表，但是某一個區域只能顯示選中的書籍的部分信息與幾條用戶評價，當我們選中別的書籍時，這信息與評論都需要全部更新。
這里處理起來比較麻煩的是書籍部分信息是從父級傳遞而來，而評論信息卻是需要重新請求獲取。
不過借助這個思路，將會非常容易做到良好的解耦，我們只需要從父級通過 props 把書籍信息傳遞下來，然后在子組件內部自己去處理評論信息即可。從而斷開評論信息與書籍切換的耦合。
function BookProfile() {
...
return (
<div>
...
<CurrentBookPart info={infolist[i]} key={bookid} />
</div>
)
}function CurrentBookPart(props) {
const [comment, setComment] = useState()
...
}總結
合理運用這個技巧，可以讓我們的代碼更加高效、低耦合，邏輯更加順暢。也能夠大幅度提高我們的開發效率，快快去重新查看一下你的項目，有沒有可以使用這種方式重構的地方吧。
React 新的官方文檔確實寫得非常好，提供了許多項目開發最佳實踐的思路。這些思路和實用技巧，同樣也適用于 Vue，也能夠提高我們對 Vue 的使用心得。
