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;