欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

關(guān)于?React?中?useEffect?使用問題淺談

 更新時間:2022年06月27日 15:56:40   作者:dxh_hxd  
本文主要介紹了關(guān)于React中useEffect使用問題淺談,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

前言

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

優(yōu)化前

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 函數(shù)組件有一個 number1 的 state,并作用 Foo 函數(shù)組件的 number props傳遞給子組件。Foo 子組件在 useEffect 中 依賴 number 的變化來更新該組件的 number2 state。

為了監(jiān)聽 root 節(jié)點變化的情況我使用了 MutationObserver API 來看看監(jiān)聽回調(diào)函數(shù)執(zhí)行了多少次,所以在測試代碼中增加了如下代碼

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

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

可以看到 MutationObserver 回調(diào)被執(zhí)行了兩次, mutations 中有兩項新增記錄,對應(yīng) root 的新增兩個子節(jié)點?,F(xiàn)在再看看我點【更新number1】按鈕之后的結(jié)果

可以看到 MutationObserver 這個回調(diào)被執(zhí)行了兩次,也就是但這個按鈕的時候頁面繪制了兩次。

優(yōu)化后

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 沒必要再調(diào)用 
   *  useState,實際項目應(yīng)用場景中有的比較復(fù)雜的邏輯,狀態(tài)之間有關(guān)聯(lián)是
   *  比較常見的
   */
  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)

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

可以看看到這次 MutationObserver 的回調(diào)只被執(zhí)行了一次。

總結(jié)

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

到此這篇關(guān)于關(guān)于 React 中 useEffect 使用問題淺談的文章就介紹到這了,更多相關(guān)React useEffect 使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • React-Hooks之useImperativeHandler使用介紹

    React-Hooks之useImperativeHandler使用介紹

    這篇文章主要為大家介紹了React-Hooks之useImperativeHandler使用介紹,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-07-07
  • 利用CDN加速react webpack打包后的文件詳解

    利用CDN加速react webpack打包后的文件詳解

    下面小編就為大家分享一篇利用CDN加速react webpack打包后的文件詳解,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-02-02
  • React使用highlight.js Clipboard.js實現(xiàn)代碼高亮復(fù)制

    React使用highlight.js Clipboard.js實現(xiàn)代碼高亮復(fù)制

    這篇文章主要為大家介紹了React使用highlight.js Clipboard.js實現(xiàn)代碼高亮復(fù)制功能示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-04-04
  • 詳解React項目的服務(wù)端渲染改造(koa2+webpack3.11)

    詳解React項目的服務(wù)端渲染改造(koa2+webpack3.11)

    本篇文章主要介紹了詳解React項目的服務(wù)端渲染改造(koa2+webpack3.11),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-03-03
  • React常見跨窗口通信方式實例詳解

    React常見跨窗口通信方式實例詳解

    這篇文章主要為大家介紹了React常見跨窗口通信方式實例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-10-10
  • React useMemo與useCallabck有什么區(qū)別

    React useMemo與useCallabck有什么區(qū)別

    useCallback和useMemo是一樣的東西,只是入?yún)⒂兴煌?,useCallback緩存的是回調(diào)函數(shù),如果依賴項沒有更新,就會使用緩存的回調(diào)函數(shù);useMemo緩存的是回調(diào)函數(shù)的return,如果依賴項沒有更新,就會使用緩存的return
    2022-12-12
  • ReactJS實現(xiàn)表單的單選多選和反選的示例

    ReactJS實現(xiàn)表單的單選多選和反選的示例

    本篇文章主要介紹了ReactJS實現(xiàn)表單的單選多選和反選的示例,非常具有實用價值,需要的朋友可以參考下
    2017-10-10
  • React腳手架config-overrides.js文件的配置方式

    React腳手架config-overrides.js文件的配置方式

    這篇文章主要介紹了React腳手架config-overrides.js文件的配置方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • 淺談React 的引入

    淺談React 的引入

    React相比于Vue,更注重對JS的掌握,Vue把能做的都做了,只剩下最簡單的讓開發(fā)者使用,開發(fā)者需要記憶Vue的特定指令后就可很輕松地開發(fā)。相反,React是提供了一種思路和方式,沒有過多的限制,但要求會相對高些,需要開發(fā)者對JS達(dá)到精通的地步才能真正運(yùn)用好React。
    2021-05-05
  • react native之ScrollView下拉刷新效果

    react native之ScrollView下拉刷新效果

    這篇文章主要為大家詳細(xì)介紹了react native之ScrollView下拉刷新效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-09-09

最新評論