react useCallback

useCallback 是 React 提供的一个 Hook,用于缓存函数引用。它可以确保在组件的多次渲染中,只有当依赖项发生变化时,才会重新创建函数。这在一些特定场景下非常有用,比如在传递函数给子组件时,避免不必要的重新渲染。

基本语法

jsx 复制代码
import React, { useCallback } from'react';

const MyComponent = () => {
  const myFunction = useCallback(() => {
    // 函数逻辑
    console.log('This is my function');
  }, []); // 依赖项数组

  return (
    <div>
      <button onClick={myFunction}>Click me</button>
    </div>
  );
};

export default MyComponent;

useCallback 接收两个参数:

  1. 要缓存的函数:一个 JavaScript 函数。
  2. 依赖项数组 :一个数组,包含了函数内部使用的所有外部变量。只有当这些依赖项中的任何一个发生变化时,useCallback 才会返回一个新的函数引用。如果依赖项数组为空 [],那么函数只会在组件首次渲染时创建一次,之后不会再重新创建。

避免子组件不必要的重新渲染

在 React 中,当父组件重新渲染时,即使子组件的 props 没有变化,子组件也可能会因为引用类型的 props 变化而重新渲染。useCallback 可以帮助我们解决这个问题。

jsx 复制代码
import React, { useCallback } from'react';

// 子组件
const ChildComponent = ({ onClick }) => {
  console.log('ChildComponent rendered');
  return <button onClick={onClick}>Click me in child</button>;
};

// 父组件
const ParentComponent = () => {
  const [count, setCount] = React.useState(0);
  const handleClick = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <ChildComponent onClick={handleClick} />
    </div>
  );
};

export default ParentComponent;

在这个例子中,ParentComponent 有一个 count 状态和一个 handleClick 函数。handleClick 函数使用 useCallback 进行了缓存,依赖项为 [count]。只有当 count 发生变化时,handleClick 的引用才会改变。

ChildComponent 接收 onClick 属性作为一个函数。当 ParentComponent 重新渲染时,如果 count 没有变化,handleClick 的引用不会改变,ChildComponent 就不会因为 props 的引用变化而重新渲染。

依赖项的注意事项

  • 正确设置依赖项:确保依赖项数组包含了函数内部使用的所有外部变量。如果遗漏了某个依赖项,函数可能不会在需要的时候更新,导致逻辑错误。
jsx 复制代码
import React, { useCallback, useState } from'react';

const MyComponent = () => {
  const [text, setText] = useState('');
  const [count, setCount] = useState(0);

  // 错误示例:遗漏了依赖项 text
  const handleClick = useCallback(() => {
    console.log(text);
    setCount(count + 1);
  }, [count]); 

  return (
    <div>
      <input value={text} onChange={(e) => setText(e.target.value)} />
      <button onClick={handleClick}>Click me</button>
      <p>Count: {count}</p>
    </div>
  );
};

export default MyComponent;

在这个错误示例中,handleClick 函数使用了 text 变量,但依赖项数组中没有包含 text。这意味着即使 text 发生了变化,handleClick 函数的引用也不会更新,函数内部的 text 可能不是最新的值。

  • 使用 useMemo 替代 useCallback :如果需要缓存的是函数的返回值而不是函数本身,可以使用 useMemouseMemo 接收一个创建函数和依赖项数组,它会在依赖项变化时重新计算返回值。
jsx 复制代码
import React, { useMemo } from'react';

const MyComponent = () => {
  const [count, setCount] = React.useState(0);

  const expensiveValue = useMemo(() => {
    // 一些复杂的计算
    let result = 0;
    for (let i = 0; i < 1000000; i++) {
      result += i;
    }
    return result;
  }, [count]);

  return (
    <div>
      <p>Expensive Value: {expensiveValue}</p>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

export default MyComponent;

在这个例子中,expensiveValue 使用 useMemo 进行了缓存,只有当 count 发生变化时才会重新计算。

useCallback 是 React 中一个强大的工具,能够帮助我们优化组件性能,避免不必要的重新渲染。在使用时,要正确设置依赖项,以确保函数的行为符合预期。

相关推荐
三月的一天15 分钟前
在 React Three Fiber 中实现 3D 模型点击扩散波效果
前端·react.js·前端框架
爱敲代码的小冰15 分钟前
npm 切换 node 版本 和npm的源
前端·npm·node.js
DoraBigHead20 分钟前
🧠【彻底读懂 reduce】acc 是谁?我是谁?我们要干嘛?
前端·javascript·面试
future141232 分钟前
项目开发日记
前端·学习·c#·游戏开发
汪子熙40 分钟前
CSS 中 td:last-child a 选择器详解
前端·javascript
q567315231 小时前
Koa+Puppeteer爬虫教程页面设计
javascript·css·爬虫
北北~Simple1 小时前
第一次搭建数据库
服务器·前端·javascript·数据库
GanGuaGua1 小时前
Vue3常用指令
前端·javascript·vue.js
欧阳天风1 小时前
录音实时上传
前端·javascript
江号软件分享1 小时前
从DNS到防火墙:NetDisabler多策略断网方法详解
前端