react寫法實例代碼分析

這篇文章主要介紹“react寫法實例代碼分析”，在日常操作中，相信很多人在react寫法實例代碼分析問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”react寫法實例代碼分析”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

ref的奇怪用法

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

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

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

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

• 形如{current: T}的數據結構

• 回調函數形式，會在ref更新、銷毀時觸發

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

• 直接傳遞更新后的值，比如setDOM(xxx)

• 傳遞更新狀態的方法，比如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寫法實例代碼分析”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！