react useCallback的常規使用方式?

怎么使用好useCallback，來達到減少render次數的效果

react優化方式

1. 減少render次數
2. 減少計算量

• 下面的代碼，當handleClick1時間觸發時，PageB組件也會重新渲染

import React, { memo, useCallback, useState } from 'react'

function PageA (props) {
  const { onClick, children } = props
  console.log(111, props)
  return <div onClick={onClick}>{children}</div>
}

function PageB ({ onClick, name }) {
  console.log(222)
  return <div onClick={onClick}>{name}</div>
}

function UseCallback() {
  const [a, setA] = useState(0)
  const [b, setB] = useState(0)

  const handleClick1 = () => {
    setA(a + 1)
  }

  const handleClick2 =() => {
    setB(b + 1)
  }

  return (
    <>
      <PageA onClick={handleClick1}>{a}</PageA>
      <PageB onClick={handleClick2} name={b} />
    </>
  )
}

export default UseCallback

• 使用useCallback進行處理

1. 點擊事件handleClick1觸發時，PageB組件也會重新渲染，當PageB組件比較耗時時，就會造成新能問題
2. PageB組件重新渲染的原因在於每次重新渲染，onClick都會重新定義，即上次的與這次的不一致
3. 思路：通過useCallback包裹onClick來達到緩存的效果，即useCallback的依賴項不變時不重新生成
4. 用過memo方法包裹PageB組件，並且通過useCallback包裹PageB組件的onClick方法，memo與PureComponent比較類似，前者是對Function Component的優化，后者是對Class Component的優化，都會對傳入組件的數據進行淺比較，useCallback則會保證handleClick2不會發生變化

import React, { memo, useCallback, useState } from 'react'

function PageA (props) {
  const { onClick, children } = props
  console.log(111, props)
  return <div onClick={onClick}>{children}</div>
}

function PageB ({ onClick, name }) {
  console.log(222)
  return <div onClick={onClick}>{name}</div>
}

const PageC = memo(PageB)

function UseCallback() {
  const [a, setA] = useState(0)
  const [b, setB] = useState(0)

  const handleClick1 = () => {
    setA(a + 1)
  }

  const handleClick2 = useCallback(() => {
    setB(b + 1)
  }, [b])

  return (
    <>
      <PageA onClick={handleClick1}>{a}</PageA>
      <PageC onClick={handleClick2} name={b} />
    </>
  )
}

export default UseCallback