大家好，我卡頌。

雖然React官網用大量篇幅介紹最佳實踐，但因JSX語法的靈活性，所以總是會出現奇奇怪怪的React寫法。

本文介紹2種奇怪（但在某些場景下有意義）的React寫法。

ref的奇怪用法

這是一段初看讓人很困惑的代碼：

function App() {
  const [dom, setDOM] = useState(null);
 
  return <div ref={setDOM}></div>;
}

讓我們來分析下它的作用。

首先，ref有兩種形式（曾經有3種）：

1. 形如{current: T}的數據結構
2. 回調函數形式，會在ref更新、銷毀時觸發

例子中的setDOM是useState的dispatch方法，也有兩種調用形式：

1. 直接傳遞更新后的值，比如setDOM(xxx)。
2. 傳遞更新狀態的方法，比如setDOM(oldDOM => return /* 一些處理邏輯 */)。

在例子中，雖然反常，但ref的第二種形式和dispatch的第二種形式確實是契合的。

也就是說，在例子中傳遞給ref的setDOM方法，會在「div對應DOM」更新、銷毀時執行，那么dom狀態中保存的就是「div對應DOM」的最新值。

這么做一定程度上實現了「感知DOM的實時變化」，這是單純使用ref無法具有的能力。

useMemo的奇怪用法

通常我們認為useMemo用來緩存變量props，useCallback用來緩存函數props。

但在實際項目中，如果想通過「緩存props」的方式達到子組件性能優化的目的，需要同時保證：

• 所有傳給子組件的props的引用都不變（比如通過useMemo）。
• 子組件使用React.memo。

類似這樣：

function App({todos, tab}) {
    const visibleTodos = useMemo(
      () => filterTodos(todos, tab),
    [todos, tab]);
    
    return <Todo data={visibleTodos}/>;
}

// 為了達到Todo性能優化的目的
const Todo = React.memo(({data}) => {
  // ...省略邏輯
})

既然useMemo可以緩存變量，為什么不直接緩存組件的返回值呢？類似這樣：

function App({todos, tab}) {
  const visibleTodos = useMemo(
      () => filterTodos(todos, tab),
  [todos, tab]);
  
  return useMemo(() => <Todo data={visibleTodos}/>, [visibleTodos])
}

function Todo({data}) {
  return <p>{data}</p>;
}

如此，需要性能優化的子組件不再需要手動包裹React.memo，只有當useMemo依賴變化后子組件才會重新render。

總結

除了這兩種奇怪的寫法外，你還遇到哪些奇怪的React寫法呢？