当前位置：首页 > news >正文

React hooks——useCallback

news 2025/7/18 5:34:29

一、简介

useCallback 是 React 提供的一个 Hook，用于缓存函数引用，避免在组件重新渲染时创建新的函数实例，从而优化性能。

1.1 基本语法

const memoizedCallback = useCallback(() => {// 函数逻辑},[dependencies] // 依赖项数组
);

第一个参数：要缓存的函数
第二个参数：依赖项数组，只有当依赖项变化时，才会重新创建函数

1.2 主要特点

✅ 缓存函数：避免每次渲染时都创建新的函数
✅ 优化子组件渲染：配合 React.memo 使用，防止因父组件更新导致子组件不必要的重新渲染
✅ 依赖项控制：只有依赖项变化时，才会重新生成函数

二、代码实现

import { memo, useState, useCallback } from "react";// 子组件
const Input = memo(({ onChange }) => {console.log("子组件重新渲染了");return (<div><input type="text" onChange={(e) => onChange(e.target.value)}></input></div>);
});export default function App() {// 触发父组件渲染的函数const [count, setCount] = useState(0);const [count2, setCount2] = useState(0);// 传给子组件的函数const changeHandler = useCallback((value) => console.log(value), [count2]);return (<div><Input onChange={changeHandler}></Input><button onClick={() => setCount(count + 1)}>点我 子组件不会重新渲染</button><button onClick={() => setCount2(count2 + 1)}>点我 子组件重新渲染</button></div>);
}

查看全文

http://www.dtcms.com/a/283718.html