建站
咨詢
售后
建站咨詢
新聞中心
大家好，我卡頌。
創(chuàng)新互聯(lián)主要從事網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)溧陽,十余年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):18980820575
雖然React官網(wǎng)用大量篇幅介紹最佳實(shí)踐，但因JSX語法的靈活性，所以總是會(huì)出現(xiàn)奇奇怪怪的React寫法。
本文介紹2種奇怪（但在某些場景下有意義）的React寫法。
ref的奇怪用法
這是一段初看讓人很困惑的代碼：
function App() {
const [dom, setDOM] = useState(null);
return ;
}讓我們來分析下它的作用。
首先，ref有兩種形式（曾經(jīng)有3種）：
- 形如{current: T}的數(shù)據(jù)結(jié)構(gòu)
- 回調(diào)函數(shù)形式，會(huì)在ref更新、銷毀時(shí)觸發(fā)
例子中的setDOM是useState的dispatch方法，也有兩種調(diào)用形式：
- 直接傳遞更新后的值，比如setDOM(xxx)。
- 傳遞更新狀態(tài)的方法，比如setDOM(oldDOM => return /* 一些處理邏輯 */)。
在例子中，雖然反常，但ref的第二種形式和dispatch的第二種形式確實(shí)是契合的。
也就是說，在例子中傳遞給ref的setDOM方法，會(huì)在「div對應(yīng)DOM」更新、銷毀時(shí)執(zhí)行，那么dom狀態(tài)中保存的就是「div對應(yīng)DOM」的最新值。
這么做一定程度上實(shí)現(xiàn)了「感知DOM的實(shí)時(shí)變化」，這是單純使用ref無法具有的能力。
useMemo的奇怪用法
通常我們認(rèn)為useMemo用來緩存變量props，useCallback用來緩存函數(shù)props。
但在實(shí)際項(xiàng)目中，如果想通過「緩存props」的方式達(dá)到子組件性能優(yōu)化的目的，需要同時(shí)保證：
- 所有傳給子組件的props的引用都不變（比如通過useMemo）。
- 子組件使用React.memo。
類似這樣：
function App({todos, tab}) {
const visibleTodos = useMemo(
() => filterTodos(todos, tab),
[todos, tab]);
return ;
}
// 為了達(dá)到Todo性能優(yōu)化的目的
const Todo = React.memo(({data}) => {
// ...省略邏輯
}) 既然useMemo可以緩存變量，為什么不直接緩存組件的返回值呢？類似這樣：
function App({todos, tab}) {
const visibleTodos = useMemo(
() => filterTodos(todos, tab),
[todos, tab]);
return useMemo(() => , [visibleTodos])
}
function Todo({data}) {
return {data}
;
} 如此，需要性能優(yōu)化的子組件不再需要手動(dòng)包裹React.memo，只有當(dāng)useMemo依賴變化后子組件才會(huì)重新render。
總結(jié)
除了這兩種奇怪的寫法外，你還遇到哪些奇怪的React寫法呢？
網(wǎng)頁標(biāo)題：兩個(gè)奇怪的React寫法，你還遇到哪些奇怪的React寫法呢？
標(biāo)題URL：http://fisionsoft.com.cn/article/dpdsshs.html
