useCallback()

官网直达：https://zh-hans.react.dev/reference/react/useCallback

点击按钮，子组件会重新渲染

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

const Child = (props) => {
  console.log('我是子组件！我在渲染呢！！！')
  return (
    <>
      <div>我是子组件</div>
    </>
  )
}

const Parent = () => {
  console.log('我是父组件！我在渲染呢！！！')
  const [p1, setP1] = useState(0)
  const p2 = 'hello';
  const p3 = 'world';
  return (
    <>
      <div>我是父组件，p1：{p1}</div>
      <button onClick={() => {
        setP1(p1 + 1);
      }}>点我p1加1</button>
      <Child p2={p2} p3={p3} />
    </>
  )
}

export default Parent;

点击父组件的按钮，子组件也跟着渲染

使用memo（）包裹子组件，如下

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

const Child = memo((props) => {
  console.log('我是子组件！我在渲染呢！！！')
  return (
    <>
      <div>我是子组件</div>
    </>
  )
});

const Parent = () => {
  console.log('我是父组件！我在渲染呢！！！')
  const [p1, setP1] = useState(0)
  const p2 = 'hello';
  const p3 = 'world';
  return (
    <>
      <div>我是父组件，p1：{p1}</div>
      <button onClick={() => {
        setP1(p1 + 1);
      }}>点我p1加1</button>
      <Child p2={p2} p3={p3} />
    </>
  )
}

export default Parent;

这样父组件里的state变换就不会再渲染子组件了

使用memo()后会对props进行浅比较，如果props没有变化，则不会重新渲染子组件

现在要给子组建要传入一个函数p4，如下

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

const Child = memo((props) => {
  console.log('我是子组件！我在渲染呢！！！')
  return (
    <>
      <div>我是子组件</div>
    </>
  )
});

const Parent = () => {
  console.log('我是父组件！我在渲染呢！！！')
  const [p1, setP1] = useState(0)
  const p2 = 'hello';
  const p3 = 'world';
  const p4 = () => {
    console.log(p2, p3)
  }
  return (
    <>
      <div>我是父组件，p1：{p1}</div>
      <button onClick={() => {
        setP1(p1 + 1);
      }}>点我p1加1</button>
      <Child p2={p2} p3={p3} p4={p4} />
    </>
  )
}

export default Parent;

现在添加p4，发现父组件的state变换，子组件也会重新渲染

说明p4变化了

这是因为p4是一个函数，每次渲染都会生成一个新的函数，导致props变化，从而触发子组件重新渲染

所以需要使用useCallback来缓存函数，确保是同一个函数

useCallback接受两个参数，第一个参数是函数，第二个参数是依赖项数组如下

同时在包裹函数的时候要在useCallback里传入函数所依赖的参数，

否则useCallback会认为函数没有依赖项，每次都会生成一个新的函数

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

const Child = memo((props) => {
  console.log('我是子组件！我在渲染呢！！！')
  return (
    <>
      <div>我是子组件</div>
    </>
  )
});

const Parent = () => {
  console.log('我是父组件！我在渲染呢！！！')
  const [p1, setP1] = useState(0)
  const p2 = 'hello';
  const p3 = 'world';
  const p4 = useCallback(() => {
    console.log(p2, p3)
  }, [p2, p3])
  return (
    <>
      <div>我是父组件，p1：{p1}</div>
      <button onClick={() => {
        setP1(p1 + 1);
      }}>点我p1加1</button>
      <Child p2={p2} p3={p3} p4={p4} />
    </>
  )
}

export default Parent;

哎，这样就可以了，子组建没有重新渲染

来看下回调函数执行完之后会是怎样的一个结果

子组建执行props.p4()

如果回调里面要把p1log出来，会出现什么问题

只有第一次才会输出，p1改变不执行

应为函数p4被缓存了起来

依赖项是p2和p3，p1改变，不会触发p4重新生成

添加依赖项p1，p4重新生成，p1改变，p4重新执行

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

const Child = memo((props) => {
  console.log('我是子组件！我在渲染呢！！！')
  props.p4()
  return (
    <>
      <div>我是子组件</div>
    </>
  )
});

const Parent = () => {
  console.log('我是父组件！我在渲染呢！！！')
  const [p1, setP1] = useState(0)
  const p2 = 'hello';
  const p3 = 'world';
  const p4 = useCallback(() => {
    console.log(p2, p3, p1)
  }, [p2, p3, p1])
  return (
    <>
      <div>我是父组件，p1：{p1}</div>
      <button onClick={() => {
        setP1(p1 + 1);
      }}>点我p1加1</button>
      <Child p2={p2} p3={p3} p4={p4} />
    </>
  )
}

export default Parent;