useMemo实例

useMemo实例：

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

function Example() {
  const [number, setNumber] = useState(0);

  function fibonacci(n) {
    if (n <= 1) {
      return n;
    }

    return fibonacci(n - 1) + fibonacci(n - 2);
  }

  const memoizedFibonacci = useMemo(() => fibonacci(number), [number]);

  return (
    <div>
      <h1>Calculate Fibonacci sequence</h1>
      <input type="number" value={number} onChange={(e) => setNumber(e.target.value)} />
      <p>The {number}th number in the Fibonacci sequence is {memoizedFibonacci}</p>
    </div>
  );
}

export default Example;

在这个示例中，我们首先定义了一个 useState 钩子来存储要计算的斐波那契数列的数字。然后，我们定义了一个递归函数 fibonacci 来计算斐波那契数列。

接下来，我们使用 useMemo 钩子来记忆斐波那契数列的计算结果。每次 number 改变时，useMemo 将重新计算 fibonacci(number)，并将其结果缓存起来以便下一次调用。

最后，在页面上展示输入框和计算结果。由于我们使用了 useMemo，所以在每次输入框改变时，只会重新计算必要的部分，避免了不必要的重复计算。