React性能debug場(chǎng)景解決記錄

更新時(shí)間：2023年05月25日 08:31:43 作者：Grewer

這篇文章主要為大家介紹了React性能debug場(chǎng)景解決記錄，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

前言

之前開發(fā)重構(gòu)項(xiàng)目的時(shí)候，遇到了一些問(wèn)題，如 hooks 的性能問(wèn)題和 quill 的重載問(wèn)題。本文就是記錄這些問(wèn)題的解決過(guò)程。

場(chǎng)景

在基于富文本的輸入場(chǎng)景中，我們發(fā)現(xiàn)在輸入回車后會(huì)出現(xiàn)明顯的卡頓現(xiàn)象。為了更好地展示此類場(chǎng)景，這里使用了一個(gè)簡(jiǎn)單的例子展示。

function App() {
    const [value, setValue] = useState('');
    // mock 調(diào)用多次 hooks
    const hook1 = useHooks();
    //...
    const hook20 = useHooks();
    const modules = useMemo(() => ({
        toolbar: {
            container: '#toolbar',
            handlers: {
            },
        },
    }), []);
    return (<div className={'container'}>
        <CustomToolbar/>
        <ReactQuill ref={editorRef} theme="snow" value={value} modules={modules} onChange={setValue}/>
        <form className="todo-list">
            {/* ... */}
        </form>
    </div>)
}

這是頁(yè)面的主要結(jié)構(gòu), 內(nèi)容分別是一堆 hooks + quill + 其他操作(這里用一個(gè) TODO list 來(lái)替代)

性能監(jiān)控

既然是卡頓,那當(dāng)然屬于性能方面的問(wèn)題 ,這里就輪到 Chrome 的性能監(jiān)控出場(chǎng)了: 重復(fù)步驟, 最后縮短監(jiān)控范圍, 點(diǎn)擊卡頓的任務(wù)

再來(lái)看下調(diào)用樹:

很明顯, 光看這里很難發(fā)現(xiàn)是頁(yè)面那個(gè)地方的問(wèn)題, 都是 react 的源碼執(zhí)行函數(shù)

最關(guān)鍵的點(diǎn)在于自上而下那一欄:

從這里, 我們很明顯的就能看到是這個(gè) hooks - useI18n 影響到了

因?yàn)檫@是一個(gè)多語(yǔ)言 hooks, 所以它的引用范圍特別廣

因?yàn)椴环奖阃嘎对创a, 大概的邏輯是這樣的:

const useHooks = () => {
  const {lang, handle:langHandle} = useContext(myContext);
  const handle = (number) => {
    langHandle();
  }
  return {
    value: lang,
    setValue: handle
  }
}

解決方案

這里我嘗試加上 react 的性能優(yōu)化 useMemo:

const useHooks = () => {
  const {lang, handle:langHandle} = useContext(myContext);
  const handle = (number) => {
    langHandle();
  }
  return useMemo(() => ({
    value: lang,
    setValue: handle
  }), [lang, handle])
}

再通使用 Chrome 的性能監(jiān)控, 發(fā)現(xiàn)問(wèn)題已經(jīng)緩解

由此可得出結(jié)論, 在多場(chǎng)景使用的 hooks 中, 可通過(guò)在返回值中加上 useMemo 來(lái)提高性能

當(dāng)然, 除了 hooks 的優(yōu)化, 阻止其他組件的重渲染, 也可以緩解一定的渲染性能問(wèn)題

這里又回到了我們老生常談的 react 性能優(yōu)化那一套, 就不贅述了

quill.js 的重渲染

在 function 組件中添加 quill.js 富文本的時(shí)候, 會(huì)經(jīng)常出現(xiàn)重復(fù)渲染導(dǎo)致編輯器加載出現(xiàn)問(wèn)題的場(chǎng)景, 報(bào)錯(cuò)如圖:

一般來(lái)說(shuō)都是因?yàn)?nbsp;quill 的 modules 對(duì)象指向改變了, 這一點(diǎn)在 hooks 組件中會(huì)經(jīng)常遇到:

function App(){
  const modules = {
    toolbar: {
      container: '#toolbar',
      handlers: {
        handleClick
      },
    },
  }
  return (
    <ReactQuill ref={editorRef} theme="snow" value={value} modules={modules} onChange={setValue}/>
  )
}

如上述的代碼, 由于 react 的機(jī)制問(wèn)題, 在每次 render 時(shí), 都會(huì)觸發(fā) reRender, 重新聲明一個(gè) modules, 造成 react-quill 中的傳值問(wèn)題

常見的解決方案就是萬(wàn)能的 useRef 了:

function App(){
  const modulesRef = useRef({
    toolbar: {
      container: '#toolbar',
      handlers: {
        handleClick
      },
    },
  })
  return (
    <ReactQuill ref={editorRef} theme="snow" value={value} modules={modulesRef.current} onChange={setValue}/>
  )
}

在 react 的 hooks 中, useRef 反而是一個(gè)比較 OOP 的函數(shù), 因?yàn)樵O(shè)置之后, 不管 render 幾次, 他的對(duì)象引用都不會(huì)變化;

就像是 class 中構(gòu)造函數(shù)里設(shè)置了 this.query = {}, 在 render 過(guò)程中 query 值引用都是不變的

由此, 很多自定義 hooks, 都用上了他

比如最常見的 useUpdateEffect:

const createUpdateEffect = (hook) => (effect, deps) => {
    const isMounted = useRef(false);
    // for react-refresh
    hook(() => {
      return () => {
        isMounted.current = false;
      };
    }, []);
    hook(() => {
      if (!isMounted.current) {
        isMounted.current = true;
      } else {
        return effect();
      }
    }, deps);
  };
useUpdateEffect = createUpdateEffect(useEffect)

代碼來(lái)源于 ahooks, 使用 ref 的值來(lái)標(biāo)記一個(gè)私有化值

原理都是很簡(jiǎn)單的，但是在開發(fā)中想要得心應(yīng)手，還需要更多的練習(xí)。