首先useMemo它使用来做缓存用的，只有当一个依赖项改变的时候才会发生变化，否则拿缓存的值，就不用在每次渲染的时候再做计算

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

export default function Detail(props) {
  const [count, setCount] = useState(0);

  const xxx = useMemo(() => {
    console.log('useMemo');
    let sum = 0;
    for (let i = 0; i < 10000; i++) {
      sum += i;
    }
    return sum;
  }, []);

  function fn() {
    console.log('fn');
    let sum = 0;
    for (let i = 0; i < 10000; i++) {
      sum += i;
    }
    return sum;
  }

  return (
    <div>
      <p>xxx: {xxx}</p>
      <p>fn: {fn()}</p>
      <p>count: {count}</p>

      <button onClick={() => setCount(count + 1)}>点击</button>
    </div>
  );
}