react.js - 关于React useCallback使用的问题?

Question

React中的useCallback

下面的代码中Com是父组件，Button是子组件，子组件接收父组件的count2和setCount2，子组件中使用了memo(Button)导出

function Com() {    const [count1, setCount1] = useState(0)    const [count2, setCount2] = useState(0)    const handleClick1 = () => {setCount1(i => i + 1)}    const handleClick2 = () => {setCount2(i => i + 1)}    // const callbackSetCount2 = useCallback(() => {    //     setCount2(i => i + 1)    // }, [count2])    console.log("$$ ComA render")    return (        <div className="addBorder">            <h1>this is ComA</h1>            <p>{count1}</p>            <button handleClick={() => setCount1(i => i + 1)}>count1 ++</button>            <p>count2</p>            <Button handleClick={handleClick2}>{count2}</Button>        </div>    )}

子组件Button

function Button({ handleClick, children }) {    console.log(`$$ Rendering button` + children)    return (        <div className="addBorder">            <p>this is Button.jsx</p>            <button onClick={handleClick}>{children}</button>        </div>    )}export default memo(Button)

在上面的代码中，如果点击count1++的按钮（不使用useCallback），父组件会重新渲染，但是子组件也会刷新，然而子组件中的count2依赖没有变化，所以只能是handleClick2函数变化了，这只能是因为父组件重新渲染导致了const handleClick2 = () => {setCount2(i => i + 1)}这一行重新运行。
所以我们需要使用useCallback来将handleClick2函数缓存，不会因为重新渲染而导致没有必要的刷新，这样做之后，点击count1++的按钮也不会导致子组件刷新了。
这是我对上面代码以及重新渲染机制以及useCallback的理解，这样理解对吗？

希望理解useCallback以及setState之后的更新机制，谢谢各位大佬了

Answer 1

useCallback 的核心作用就是保持函数的引用恒定，从而避免函数作为组件参数时，引用变化导致的组件重复渲染，从而影响性能。以题主的代码为例：

1、每次函数组件更新，都会重新创建一个新的函数，导致 handleClick2 的引用变更：

const handleClick2 = () => {setCount2(i => i + 1)}

2、使用 useCallback 缓存首次创建的函数，每次函数组件更新，都会返回之前函数的引用（保证引用恒定）：

const callbackSetCount2 = useCallback(() => {    setCount2(i => i + 1)}, [])

希望对你有所帮助！

Answer 2

因为

(()=>{}) !== (()=>{})

所以当prop中有函数作为依赖项的时候，React.memo会失去效果，无论你做了父组件啥都会触发更新

所以用useCallBack去封装一次函数就可以达到你要的效果

同理在useMemo也是一样的

所以在新手学习React-hook的时候官网都会强烈建议打开eslint-plugin-react-hooks

Answer 3

你的理解基本是正确的。useCallback是React的一个Hook，它返回一个记忆化的回调函数。在组件的多次渲染之间，useCallback会保持函数引用的一致性。所以，如果你在父组件中使用useCallback封装了handleClick2，那么在父组件的多次渲染中，handleClick2的引用始终保持不变。

当你在父组件中调用setCount1时，父组件会因为状态变化而重新渲染。但由于handleClick2被useCallback封装了，它的引用始终保持不变，所以子组件不会因为父组件的重新渲染而重新渲染。这样，你就可以避免子组件的不必要刷新。

另外，关于React的重新渲染机制，需要注意的是，React的重新渲染并不意味着整个组件完全重新渲染。实际上，React会进行有效的比较，只更新改变的部分。但是，如果你在一个组件中改变了状态或props，那么该组件以及所有子组件都将被重新渲染。

希望这个答案对你有所帮助！如果你还有其他问题，欢迎继续提问。