当前位置：首页 > 文章列表 > 文章 > 前端 > useMemo 与 useCallback

useMemo 与 useCallback

来源：dev.to 2024-12-03 16:46:10 0浏览收藏

怎么入门文章编程？需要学习哪些知识点？这是新手们刚接触编程时常见的问题；下面golang学习网就来给大家整理分享一些知识点，希望能够给初学者一些帮助。本篇文章就来介绍《useMemo 与 useCallback》，涉及到，有需要的可以收藏一下

简介

react 提供了广泛的钩子来帮助我们高效地构建动态应用程序。在这些钩子中，usememo和usecallback是提高组件性能的重要工具。尽管两者都有相似的目的——防止不必要的重新计算或函数重新创建——但它们适用于不同的场景。

在本文中，我们将探讨 usememo 和 usecallback 之间的区别、它们为何有用，以及如何在项目中有效地使用它们。

1. usememo 是什么？

usememo 钩子用于记忆昂贵计算的结果并且仅在其依赖项发生变化时才重新计算它。它可以帮助您避免不必要的重新计算值，这对于计算成本较高的操作特别有用。

语法

const memoizedvalue = usememo(() => computeexpensivevalue(a, b), [a, b]);

用法示例

import react, { usememo } from 'react';

function example({ items }) {
  const total = usememo(() => {
    return items.reduce((acc, item) => acc + item.price, 0);
  }, [items]);

  return <div>total price: {total}</div>;
}

这里，usememo只会在项目发生变化时重新计算总计，如果项目是静态的或很少更新，则可以节省资源。

1.什么是 usecallback？

usecallback 钩子用于记忆函数。与 usememo 一样，它仅在依赖项发生变化时重新计算函数。 usecallback 对于防止在每次渲染时重新创建函数特别有用，这在将回调传递给依赖于引用相等性的优化子组件时可以提高性能。

语法

const memoizedcallback = usecallback(() => {
  dosomething(a, b);
}, [a, b]);

用法示例

import React, { useCallback } from 'react';

function ParentComponent() {
  const handleClick = useCallback(() => {
    console.log('Button clicked!');
  }, []);

  return <ChildComponent onClick={handleClick} />;
}

这里，usecallback 确保handleclick 保持相同的函数实例，除非依赖项发生变化，从而有助于防止 childcomponent 中不必要的重新渲染。