react 之 useMemo 、useCallBack、memo 的用法

一、useMemo

概念：useMemo 主要用于性能優化，減少不必要的計算，返回一個計算結果（一般情況下會是非常耗性能的復雜計算，有點像vue 里的 computed 計算屬性）

用法：

const mapResult = useMemo(()=>{
    return (
        Arr.map(item => item*2)
    )
},[Arr])

useMemo接受兩個參數
參數1：計算方法
參數2：計算方法所依賴的項
在依賴項 Arr 不變的情況下，這個計算方法就不會執行，如果依賴項發生變化，計算方法就會執行
如果沒有依賴項，跟useEffect一樣，只會在初始化的時候執行

二、useCallBack

概念：useCallBack 也是主要用于性能優化，但是它返回的是一個完整方法（函數體），因為方法或者函數也是對象的一種，在渲染的時候都會重復創建這個函數體（方法）的內存指向，用 useCallBack 包裹就能防止函數體在渲染的時候重復創建

用法：

const mapFunc = useCallBack(() =>{
    return new Array(Arr.length).map(item => item*2)
},[Arr])

useCallBack接受兩個參數
參數1：計算方法
參數2：計算方法所依賴的項
在依賴項 Arr 不變的情況下，這個計算方法就不會執行，如果依賴項發生變化，計算方法就會執行
如果沒有依賴項，跟useEffect一樣，只會在初始化的時候執行

三：memo

在 react 中，父組件渲染會造成子組件也跟著渲染，這樣就會造成不必要的性能開銷

解決方案：使用 memo 高階組件，memo 會對比組件當前prop值和之前prop值，如果prop值有變化，則重新渲染，如果prop值沒有變化，則不渲染

用法：

const parent = () =>{
    const [til,setTil] = useState('黃大仙')
    const [name,setName] = useState('李二朗')

    // setName 會更新 name 父組件會重新渲染，但是此時子組件Child不會渲染，因為傳的props值沒變
    const chengeP = () =>{
        setName('李大朗') 
    }
　　// setTil 更新 til ，這個時候就會讓Child子組件更新，因為傳的值props變化了
    const chengeC = () =>{
        setTil('黃小仙')
    }

    return <div>
              <button onClick={chengeP}>改父組件名</button>
              <button onClick={chengeC}>改子組件名</button>

              <div>{name}</div>
              <Child til={til}/>
      </div>
}


const Child = memo((props) =>{
    return <div>
                我是子組件-{props.til}
          </div>
})

posted @ 2024-09-19 10:57 尼古拉斯-富貴閱讀(1219) 評論(0) 收藏舉報

刷新頁面返回頂部

尼古拉斯-富貴

學不動了

react 之 useMemo 、useCallBack、memo 的用法

公告