Day26-useCallback

前言

在昨天我们学会使用memo去记忆我们的组件，达成避免re-render的状态。

而我们今天会学习使用useCallback，来解决reference的问题。

useCallback

syntax

useCallback(() => {
    //block
},[dependency])

我们把昨天的code改成从外部定义好函式，再传递Props。

//App.js
import React, {useState,useCallback} from 'react'
import Button from '../Components/Button'
import Button2 from '../Components/Button2'
function App() {
  const [number, setNumber] = useState(0)
  const [number2 ,setNumber2] = useState(0)

  const increase = () => {
    setNumber(number + 1)
  }

  const increase2 = () => {
    setNumber2(number2 + 1)
  }
  return (
  <div>
    <Button setNumber={increase} value={number} />
    <Button2 setNumber2={increase2} value={number2}/>
  </div>
  )
}

export default App

//Button.js
import React, {memo} from 'react'

function Button({setNumber,value}) {
  console.log('button');

  return (
    <div>
      <button onClick={setNumber}>Click</button>
      {value}
    </div>

  )
}

export default memo(Button)

这时候我们会发现memo没有办法正确的比对参考，也就是函式被重新定义，但会变成不同记忆体位置。

  console.log({} === {}) //false

这时候我们就需要useCallback来记住记忆体位址。

//App.js

import React, {useState,useCallback} from 'react'
import Button from '../Components/Button'
import Button2 from '../Components/Button2'
function App() {
  const [number, setNumber] = useState(0)
  const [number2 ,setNumber2] = useState(0)

  const increase = useCallback(() => {
    setNumber(number + 1)
  },[number, setNumber ])

  const increase2 = useCallback(() => {
    setNumber2(number2 + 1)
  },[number2, setNumber2])
  return (
  <div>
    <Button setNumber={increase} value={number} />
    <Button2 setNumber2={increase2} value={number2}/>
  </div>
  )
}

export default App

// Button.js
import React, {memo} from 'react'

function Button({setNumber,value}) {
  console.log('button');

  return (
    <div>
      <button onClick={setNumber}>Click</button>
      {value}
    </div>

  )
}

export default memo(Button)

//Button2.js
import React, {memo, useState} from 'react'

function Button2({value, setNumber2}) {
  console.log('button2')
  return (
    <div>
      <button onClick={setNumber2}>Click</button>
      {value}
    </div>
  )
}

export default memo(Button2)