useCallback - 技术栈

深入理解 React useCallback Hook 的使用场景与优化原理

引言

在 React 开发中，性能优化是一个重要的话题。useCallback 是 React 提供的一个重要 Hook，用于优化函数组件的性能。本文将通过一个实际案例来深入理解 useCallback 的使用方法和优化原理。

完整案例代码分析

主组件代码

javascript 复制代码

 import {useCallback, useState} from "react";
 import Input from "./component/input";
 import One from "./component/one";
 
 export default function UseCallbackHook() {
     const [count, setCount] = useState(0)
     const [title, setTitle] = useState('react')
     const changeValue = useCallback(value => { console.info(value) }, [])
     return (
         <div>
             <Input onChange={changeValue} />
             <One title={title} />
             <button onClick={() => { setCount(count +1) }}>{count}</button>
             <button onClick={() => { setTitle(title+count) }}>sayHello</button>
         </div>
     )
 }

子组件 Input 代码

可以尝试去除 memo 包裹，查看组件渲染次数

javascript 复制代码

 import {memo} from "react";
 
 const Input = memo(function ({onChange}) {
     console.info('input组件渲染了')
     return (
         <div>
             <input type="text" onChange={e => onChange(e.target.value)} />
         </div>
     )
 })
 export default Input

子组件 One 代码

javascript 复制代码

 import {memo} from "react";
 
 const One = function ({ title }) {
     console.info('one组件渲染了')
     return (
         <div>
             <h1>one：{title}</h1>
         </div>
     )
 }
 export default memo(One)

useCallback 的作用与实现原理

useCallback 主要用于缓存函数引用，避免在每次组件重新渲染时创建新的函数实例。在这个案例中：

javascript 复制代码

 const changeValue = useCallback(value => { console.info(value) }, [])

这里的 changeValue 函数会被缓存，只有当依赖项数组（第二个参数）中的值发生变化时，才会重新创建函数。

为什么需要 useCallback？

避免子组件不必要的重新渲染
- 当将函数作为 props 传递给子组件时，如果函数引用发生变化，即使函数逻辑相同，子组件也会重新渲染
- 使用 useCallback 可以保持函数引用一致，配合 React.memo 实现更好的性能优化
优化 Context 中的函数传递
- 当函数通过 Context 传递时，函数引用的变化会导致所有消费该 Context 的组件重新渲染

案例中的关键点分析

1. 函数缓存的实现

javascript 复制代码

 const changeValue = useCallback(value => { console.info(value) }, [])

空的依赖数组 [] 表示这个函数只在组件首次渲染时创建一次
后续的每次渲染都会返回同一个函数引用

2. 子组件的优化处理

在 Input 和 One 组件中都使用了 React.memo：

scss 复制代码

 // Input组件
 export default memo(Input)
 
 // One组件
 export default memo(One)

这使得当 props 没有变化时，组件不会重新渲染。

3. 与子组件的交互

ini 复制代码

 <Input onChange={changeValue} />
 <One title={title} />

Input 组件接收 changeValue 作为 onChange prop
One 组件接收 title 作为 prop

4. 状态更新机制

scss 复制代码

 <button onClick={() => { setCount(count +1) }}>{count}</button>
 <button onClick={() => { setTitle(title+count) }}>sayHello</button>

这两个按钮用于更新组件状态，触发重新渲染，从而展示 useCallback 的效果。

实际效果演示

当点击按钮更新 count 或 title 状态时：

主组件会重新渲染
由于 changeValue 使用了 useCallback 且依赖数组为空，其引用保持不变
Input 组件因为 onChange prop 引用未变且其他 props 未变，不会重新渲染（得益于 React.memo）
One 组件因为 title prop 发生变化，会重新渲染

最佳实践建议

合理使用依赖项

javascript 复制代码

 // 当需要依赖其他状态时
 const handleChange = useCallback((value) => {
   console.log(value, count); // 使用外部变量
 }, [count]); // 将count添加到依赖数组中

配合 React.memo 使用

javascript 复制代码

 // 在子组件中
 const Input = React.memo(({ onChange }) => {
   // 组件内容
 });

避免过度使用
- 不是所有函数都需要使用 useCallback
- 只有在函数作为 props 传递给子组件，或者作为其他 Hook 的依赖时才需要考虑使用（重要）

总结

useCallback 是 React 性能优化的重要工具，通过缓存函数引用，可以有效避免不必要的组件重新渲染。在实际开发中，需要根据具体场景合理使用，配合 React.memo 和其他优化手段，才能发挥最大的效果。

通过这个完整的案例，我们可以看到 useCallback 的基本用法和实际应用场景。理解并正确使用 useCallback，是提升 React 应用性能的关键技能之一。

本文章由AI总结~