日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

關于?React?中?useEffect?使用問題淺談_React

作者：dxh_hxd ? 更新時間： 2022-08-19 編程語言

前言

最近看了一下 ant-design 中的 tree 組件源碼時發現 useEffect 中根據 props 來計算當前函數組件的 state 的，感到好奇，因為這樣會導致應用重新繪制一次，這樣才復雜場景下會對應用有一定的性能影響。為了驗證自己猜想是否正確做了一下實踐。這里的 React 是官方 16.12.0的源碼。

優化前

import * as React from './react-source/packages/react'
import * as ReactDOM from './react-source/packages/react-dom'

const root = document.getElementById('root');

function Foo({number}) {
  const [number2, setNumber2] = React.useState(0);
  React.useEffect(() => {
    setNumber2( number + 1)
  }, [number])
  return <div>
   {number2 % 2 === 0 && <div>{number2}</div>}
    <button onClick={() => setNumber2(number2 + 1)}>更新 number2</button>
  </div>
}

function App() {
  const [number1,setNumber1] = React.useState(1);
  return <>
   {number1 % 2 === 0  &&  <div>{number1}</div>}
    <Foo number={number1}/>
    <button onClick={() => setNumber1(number1 + 1)}>更新 number1</button>
  </>
} 
ReactDOM.render(<App/>, root)

這里有兩個組件， APP 函數組件有一個 number1 的 state,并作用 Foo 函數組件的 number props傳遞給子組件。Foo 子組件在 useEffect 中 依賴 number 的變化來更新該組件的 number2 state。

為了監聽 root 節點變化的情況我使用了 MutationObserver API 來看看監聽回調函數執行了多少次，所以在測試代碼中增加了如下代碼

const root = document.getElementById('root');
const observer = new MutationObserver(mutations =&gt; {
  console.log(mutations)
} )
observer.observe(root, {
  childList: true,
  subtree: true
})

來看一下第一渲染時界面輸出的效果

可以看到 MutationObserver 回調被執行了兩次， mutations 中有兩項新增記錄，對應 root 的新增兩個子節點。現在再看看我點【更新number1】按鈕之后的結果

可以看到 MutationObserver 這個回調被執行了兩次，也就是但這個按鈕的時候頁面繪制了兩次。

優化后

import * as React from './react-source/packages/react'
import * as ReactDOM from './react-source/packages/react-dom'

const root = document.getElementById('root');
const observer = new MutationObserver(mutations => {
  console.log(mutations)
} )
observer.observe(root, {
  childList: true,
  subtree: true
})


function Foo({number2,setNumber2}) {
  return <div>
   {number2 % 2 === 0 && <div>{number2}</div>}
    <button onClick={() => setNumber2(number2 + 1)}>更新 number2</button>
  </div>
}

function App() {
  const [number1,setNumber1] = React.useState(1);
  /**
   *  這里例子可能不太好，因為但從這里例子來看 number 沒必要再調用 
   *  useState，實際項目應用場景中有的比較復雜的邏輯，狀態之間有關聯是
   *  比較常見的
   */
  const [number2, setNumber2] = React.useState(0);
  return <>
   {number1 % 2 === 0  &&  <div>{number1}</div>}
    <Foo number2={number2} setNumber2={setNumber2}/>
    <button onClick={() => {
        let newNumber1 = number1 + 1
       setNumber1(newNumber1)
       setNumber2(newNumber1 + 1)
    }}>更新 number1</button>
  </>
} 
ReactDOM.render(<App/>, root)

優化有的代碼就是把 Foo 狀態提升到父組件中，然后把狀態以及更新函數傳給子組件就行。這樣我們再來看一下點擊【更新number1】之后的效果圖

可以看看到這次 MutationObserver 的回調只被執行了一次。

總結

項目中還是盡量減少應用的重復繪制次數，不然會影響用戶的交互體驗，最差的情況可能還會看到每次繪制的中間狀態，視覺上給人一種很卡的感覺。雖然性能提升上去了，但是代碼的可維護性變差了，這種的就看你怎么平衡了，如果性能如果能接受的話，個人還是感覺代碼的可維護性重要些。實踐的時候還發現了一個 MutationObserver 的一個問題，就是我對 DOM 節點的文本進行修改的時候，MutationObserver 的回調居然沒有執行讓我有些意外。

原文鏈接：https://juejin.cn/post/7113519924479262757

欄目分類
最近更新