当前位置：首页 > 文章列表 > 文章 > 前端 > useMemo Hook Explained

useMemo Hook Explained

来源：dev.to 2024-10-19 18:46:00 0浏览收藏

推广推荐

支持 PC / 移动端，安全直达

一分耕耘，一分收获！既然都打开这篇《useMemo Hook Explained》，就坚持看下去，学下去吧！本文主要会给大家讲到等等知识点，如果大家对本文有好的建议或者看到有不足之处，非常欢迎大家积极提出！在后续文章我会继续更新文章相关的内容，希望对大家都有所帮助！

usememo hook 是 react hooks api 的一部分，在 react 16.8 中引入，旨在通过记住昂贵计算的结果来优化性能。详细解释如下：

什么是 usememo？

usememo 是一个返回记忆值的钩子。它允许您缓存计算结果，以便不必在每次渲染时重新计算，除非其依赖项发生变化。这可以帮助防止不必要的重新渲染并提高 react 应用程序的性能。

句法

const memoizedvalue = usememo(() => {
  // computation or expensive calculation
  return value;
}, [dependencies]);

参数

函数（回调）：返回要记住的值的函数。
依赖项数组：依赖项数组，当更改时，将导致重新计算记忆值。如果此数组为空，则该值只会计算一次（如 componentdidmount）。

它是如何运作的

在初始渲染时，usememo 将运行提供的函数并返回其结果，该结果存储在 memoizedvalue 中。
在后续渲染中，react 将检查是否有任何依赖项发生更改。如果没有，它将返回缓存的值而不是重新计算它。
如果任何依赖项发生变化，react 将再次执行该函数，更新缓存值，并返回新值。

例子

这是一个简单的例子来说明 usememo：

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

const ExpensiveComponent = ({ number }) => {
  const computeFactorial = (n) => {
    console.log('Calculating factorial...');
    return n <= 0 ? 1 : n * computeFactorial(n - 1);
  };

  // Use useMemo to memoize the factorial calculation
  const factorial = useMemo(() => computeFactorial(number), [number]);

  return (
    <div>
      <h1>Factorial of {number} is {factorial}</h1>
    </div>
  );
};

const App = () => {
  const [num, setNum] = useState(0);

  return (
    <div>
      <button onClick={() => setNum(num + 1)}>Increase Number</button>
      <ExpensiveComponent number={num} />
    </div>
  );
};

export default App;