React 中的 &#useCallback&# 是什么？-js教程-PHP中文网

React 中的 &#useCallback&# 是什么？

聖光之護

发布： 2024-12-25 09:15:10

原创

1070人浏览过

react 中的

React 的 useCallback 钩子用于优化组件性能。它通过记忆化回调函数，确保函数引用在渲染之间保持不变，除非其依赖项发生变化。这对于将函数作为 prop 传递给子组件尤其有用，可以避免子组件不必要的重新渲染或副作用执行。

为什么使用 `useCallback`？

避免不必要重新渲染: 如果将回调函数作为 prop 传递给子组件，该函数会在每次父组件渲染时重新创建。这会导致子组件也重新渲染，即使其内部状态未发生变化。
保持函数引用稳定: 如果子组件使用 useEffect 且依赖于从父组件传递的回调函数，不稳定的函数引用会导致 useEffect 不必要地重复执行。
提升性能: useCallback 避免了频繁重新创建相同函数的开销，尤其是在计算密集型函数中，能显著提高性能。

语法

<code class="javascript">const memoizedCallback = useCallback(
  (参数) => {
    // 函数逻辑
  },
  [依赖项1, 依赖项2, ...] // 依赖项数组
);</code>

登录后复制

回调函数: 需要记忆化的函数。
依赖项数组: 函数依赖的值。只有当这些依赖项发生变化时，useCallback 才会重新创建函数。空数组 [] 表示函数永远不会重新创建。

`useCallback` 使用示例

没有 useCallback 的情况:

<code class="javascript">import React, { useState, useEffect } from "react";

const Child = ({ callback }) => {
  useEffect(() => {
    callback(); // 每次父组件渲染，此函数都会执行
  }, [callback]);

  return <div>Child Component</div>;
};

const Parent = () => {
  const [count, setCount] = useState(0);
  const callback = () => {
    console.log("Callback called");
  };

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <Child callback={callback} />
    </div>
  );
};

export default Parent;</code>

登录后复制

每次点击按钮，Parent 组件重新渲染，callback 函数也被重新创建，导致 Child 组件的 useEffect 重新执行。

牛NIUCMS本地O2O系统

牛NIUCMS本地O2O系统是一个以php+mysql进行开发的o2o网站系统。NIUCMS是一款强大的网站管理系统。支持智慧城市、智慧小区、智慧乡村、本地生活门户、本地O2O平台的构建。请注意以下几点：1、这套源码必须要服务器支持伪静态，是支持.htaccess规则的伪静态，一般Apache服务器支持，别搞的下载回去以后说什么缺少文件，其实源码并非缺少文件。2、这套源码请在php 5.4环境下

查看详情

使用 useCallback 的情况:

<code class="javascript">import React, { useState, useEffect, useCallback } from "react";

const Child = ({ callback }) => {
  useEffect(() => {
    callback(); // 只有当 callback 引用发生变化时才会执行
  }, [callback]);

  return <div>Child Component</div>;
};

const Parent = () => {
  const [count, setCount] = useState(0);
  const callback = useCallback(() => {
    console.log("Callback called");
  }, []); // 空数组，callback 只创建一次

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <Child callback={callback} />
    </div>
  );
};

export default Parent;</code>

登录后复制

现在，callback 函数只在第一次渲染时创建，即使 count 变化，Child 组件的 useEffect 也不会重新执行，提高了性能。