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