[React]useMemoizedFn和useCallback对比

这篇具有很好参考价值的文章主要介绍了[React]useMemoizedFn和useCallback对比。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

useMemoizedFn文档地址:https://ahooks.js.org/zh-CN/hooks/use-memoized-fn

hooks组件内什么时候会更新自定义函数

在 React 中,自定义的 Hooks 内部的函数在以下常见的几种情况下会被重新赋值,导致更新引用:

  • 组件重新渲染:

    当组件重新渲染时,Hooks 内部的函数会被重新执行,从而导致函数的重新赋值和更新引用。
    这意味着每次组件重新渲染时,Hooks 内部的函数会被重新计算,返回新的函数引用。

  • 依赖项发生变化(对于使用了依赖项的 Hooks):

    对于某些 Hooks,例如 useEffect、useMemo 和 useCallback,当其依赖项发生变化时,Hooks 内部的函数也会被重新执行。
    这会导致函数的重新赋值和更新引用,以确保在依赖项发生变化时能够获得最新的函数引用。

  • 闭包内部依赖的状态发生变化:

    自定义的 Hooks 可能使用闭包内部的状态或其他上下文中的值作为依赖,如果这些依赖的状态发生变化,Hooks 内部的函数也会重新执行。这样做是为了保持函数内部依赖的状态是最新的,避免出现闭包中使用过期数据的问题。

useCallback和useMemoizedFn对比

在 React 中,useMemoizedFnuseCallback 都用于优化函数组件的性能,但它们有一些不同点。

理论上,可以使用 useMemoizedFn 完全代替 useCallback。

import React, { useState, useCallback } from 'react';
import { message } from 'antd';
import { useMemoizedFn } from 'ahooks';

export default () => {
  const [count, setCount] = useState(0);

  const callbackFn = useCallback(() => {
    message.info(`Current count is ${count}`);
  }, [count]);

  const memoizedFn = useMemoizedFn(() => {
    message.info(`Current count is ${count}`);
  });

  return (
    <>
      <p>count: {count}</p>
      <button
        type="button"
        onClick={() => {
          setCount((c) => c + 1);
        }}
      >
        Add Count
      </button>
      <div style={{ marginTop: 16 }}>
        <button type="button" onClick={callbackFn}>
          call callbackFn
        </button>
        <button type="button" onClick={memoizedFn} style={{ marginLeft: 8 }}>
          call memoizedFn
        </button>
      </div>
    </>
  );
};

在上面的示例中,callbackFn和memoizedFn效果是一样的,区别在于memoizedFn不用自己指定依赖。

useCallback:使用useMemo实现

使用 useMemo 来实现类似于 useCallback 的功能。事实上,useCallback 本质上就是使用 useMemo 来进行函数记忆化的一种简化形式。

下面是一个使用 useMemo 实现类似于 useCallback 的示例:

import React, { useState, useMemo } from 'react';

function useMyCallback(callback, deps) {
  return useMemo(() => callback, deps);
}

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

  // 使用 useMyCallback 记忆化函数
  const handleClick = useMyCallback(() => {
    console.log('Callback function called');
    setCount(count + 1);
  }, [count]);

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

在上面的示例中,我们定义了一个 useMyCallback Hook,它接受一个函数 callback 和一个依赖项列表 deps。在内部,我们使用 useMemo 将传入的 callback 进行记忆化,并返回记忆化的函数引用。

这样,当 count 不变时,handleClick 将返回相同的函数引用,避免了因为父组件重新渲染而导致的函数的频繁创建,从而实现了和 useCallback 类似的功能。

useMemoizedFn:使用useMemo实现

useMemoizedFn 是持久化 function 的 Hook,理论上,可以使用 useMemoizedFn 完全代替 useCallback。使用 useMemoizedFn,可以省略第二个参数 deps,同时保证函数地址永远不会变化

function useMemoizedFn(func){
  if(typeof func !== 'function') return

  // 通过 useRef 保持其引用地址不变,并且值能够保持值最新
  const funcRef = useRef(func)
  funcRef.current = useMemo(()=>{
    return func
  }, [func])

  const memoizedFn = useRef();

  if (!memoizedFn.current) {
    // 返回的持久化函数,调用该函数的时候,调用原始的函数
    memoizedFn.current = function(...args){
      return funcRef.current.apply(this, args)
    }
  }

  return memoizedFn.current
}

ahooks源码实现如下:

import { useMemo, useRef } from 'react';
import { isFunction } from '../utils';
import isDev from '../utils/isDev';
function useMemoizedFn(fn) {
  if (isDev) {
    if (!isFunction(fn)) {
      console.error("useMemoizedFn expected parameter is a function, got ".concat(typeof fn));
    }
  }
  var fnRef = useRef(fn);
  // why not write `fnRef.current = fn`?
  // https://github.com/alibaba/hooks/issues/728
  fnRef.current = useMemo(function () {
    return fn;
  }, [fn]);
  var memoizedFn = useRef();
  if (!memoizedFn.current) {
    memoizedFn.current = function () {
      var args = [];
      for (var _i = 0; _i < arguments.length; _i++) {
        args[_i] = arguments[_i];
      }
      return fnRef.current.apply(this, args);
    };
  }
  return memoizedFn.current;
}
export default useMemoizedFn;

useMemoizedFn 的实现中使用了两个 useRef 钩子,具有不同的用途:

  1. fnRef:这个 useRef 用于存储原始函数(fn)的引用。它被初始化为传递给 useMemoizedFn 函数的 fn 参数,并且其目的是始终保持函数的最新版本。使用它的原因是确保记忆化的函数(memoizedFn)能够始终调用最新版本的原始函数 fn,即使在渲染之间 fn 发生了变化。

  2. memoizedFn:这个 useRef 用于存储将由 useMemoizedFn 钩子返回的记忆化函数。其目的是在渲染间保持记忆化函数的引用。当 memoizedFn 首次创建时,它被赋值为一个新的函数,该函数调用最新版本的 fnRef.current 并传递提供的参数。然后,这个记忆化函数被返回并在组件中使用。

这样的实现通过使用两个独立的 useRef 钩子,确保记忆化函数能够正确地引用最新版本的原始函数,同时保持记忆化函数本身的稳定引用。

使用 useMemo 更新 fnRef.current 而不是直接赋值 fnRef.current = fn,是为了确保当 fn 依赖项发生变化时,记忆化函数会被重新计算。通过在 useMemo 中使用 [fn] 作为依赖项数组,记忆化函数将始终引用 fn 的最新版本,并在 fn 发生变化时相应地更新。

这个实现旨在确保 useMemoizedFn 返回的记忆化函数保持高效,并正确地反映原始函数的最新版本和其依赖项的最新变化。

参考文章

https://juejin.cn/post/7106061970184339464#heading-6

https://ahooks.js.org/zh-CN/hooks/use-memoized-fn文章来源地址https://www.toymoban.com/news/detail-620146.html

到了这里,关于[React]useMemoizedFn和useCallback对比的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 理解 React 中的 useEffect、useMemo 与 useCallback

    先理解 useEffect 有助于学习 useMemo 和 useCallback。因为 useMemo 和 useCallback 的实现实际上都是基于 useEffect 的。 useEffect 是 React 中的一个很重要的 Hook,用于执行副作用操作。什么是副作用?简单来说,就是那些会改变函数外部变量或有外部可观察影响的操作。useEffect 允许你在函

    2024年02月03日
    浏览(44)
  • 7.react useCallback与useMemo函数使用与常见问题

    useCallback返回一个 可记忆的函数 ,useMemo返回一个 可记忆的值 ,useCallback只是useMemo的一种特殊形式。 那么这到底是什么意思呢?实际上我们在父子通信的时候,有可能传递的值是一样的,但是传递的内存地址可能是不一样的,那么在React眼里是会对组件进行重新执行的。 1

    2024年02月15日
    浏览(58)
  • React与Vue性能对比:两大前端框架的性能

    React和Vue是当今最流行的两个前端框架,它们在性能方面都有着出色的表现。 React的加载速度: 初次加载:由于React使用了虚拟DOM(Virtual DOM)技术,它可以通过比较虚拟DOM树与实际DOM树的差异来进行高效的重绘。这使得React在初次加载时相对较快,因为它只会更新需要修改的

    2024年02月03日
    浏览(52)
  • 前端(十一)——Vue vs. React:两大前端框架的深度对比与分析

    😊博主:小猫娃来啦 😊文章核心: Vue vs. React:两大前端框架的深度对比与分析 在当今快速发展的前端领域中,Vue和React作为两个备受瞩目的前端框架,已经成为许多开发者的首选。这两个框架凭借其出色的设计和强大的功能,在构建现代化、高效性能的Web应用方面扮演着

    2024年02月14日
    浏览(55)
  • Vue VS React:两大前端框架的对比与分析

    Vue和React是当前最流行的前端框架之一,它们都有着广泛的应用和开发者社区。下面是Vue和React之间的深度对比与分析: 学习曲线: Vue:Vue拥有简单直观的API和文档,对初学者友好。Vue的设计初衷是逐步增强的,可以从小规模项目逐渐扩展到大规模应用。 React:React的学习曲

    2024年02月14日
    浏览(46)
  • 【1024用代码改变世界】useMemo 和 useCallback|React.memo使用场景

    欢迎来到我的博客 📔博主是一名大学在读本科生,主要学习方向是前端。 🍭目前已经更新了 【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏 🛠目前正在学习的是🔥 R e a c t / 小程序 React/小程序 R e a c t / 小程序 🔥,中间穿插了一些基础知识的回顾 🌈博客主

    2024年02月02日
    浏览(51)
  • JavaScript 框架比较:Angular、React、Vue.js

    在 Web 开发领域,JavaScript 提供大量技术栈可供选择。其中最典型的三套组合,分别是 MERN、MEAN 和 MEVN。这些首字母相同的选项各自代表不同的技术加工具组合。为了在这些技术栈中做出明智选择,让我们先从核心组件聊起,再对各自前端框架(React、Angular 和 Vue)进行简化比

    2024年01月20日
    浏览(59)
  • 从javascript到vue再到react:前端开发框架的演变

    目录 JavaScript: 动态语言的基础 JavaScript:Web开发的起点 Vue.js: 渐进式框架的兴起 Vue.js:简洁、高效的前端框架 React.js: 声明式UI的革新 React.js:强大、灵活的前端框架 演变之路与未来展望 演变过程 当提到前端开发中的框架时,JavaScript、Vue.js和React.js是三个最常见的名词。它

    2024年02月07日
    浏览(53)
  • JavaScript框架 Angular、React、Vue.js 的全栈解决方案比较

    在 Web 开发领域,JavaScript 提供大量技术栈可供选择。其中最典型的三套组合,分别是 MERN、MEAN 和 MEVN。前端框架(React、Angular 和 Vue)进行简化比较。 MERN 技术栈包含四大具体组件: MongoDB:一款强大的 NoSQL 数据库,以灵活的 JSON 格式存储数据。 Express.js:一套极简但强大的

    2024年02月03日
    浏览(58)
  • 2023年最佳JavaScript框架:React、Vue、Angular和Node.js的比较

    🎉欢迎来到Java学习路线专栏~探索2023年最佳JavaScript框架:React、Vue、Angular和Node.js的比较 ☆* o(≧▽≦)o *☆嗨~我是IT·陈寒🍹 ✨博客主页:IT·陈寒的博客 🎈该系列文章专栏:Java学习路线 📜其他专栏:Java学习路线 Java面试技巧 Java实战项目 AIGC人工智能 🍹文章作者技术和水

    2024年02月11日
    浏览(49)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包