举个useMemo和useCallback的例子

当我们需要根据输入的数据计算结果时，可以使用 useMemo 来缓存计算结果，避免重复计算。

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

const ExampleComponent = () => {
  const [input, setInput] = useState('');
  
  // 使用 useMemo 缓存计算结果，只在 input 发生变化时重新计算
  const computedResult = useMemo(() => {
    // 执行一些需要缓存的计算
    console.log('Calculating result...');
    return input.length > 0 ? `Result: ${input.toUpperCase()}` : 'No input';
  }, [input]);

  return (
    <div>
      <input value={input} onChange={(e) => setInput(e.target.value)} />
      <p>{computedResult}</p>
    </div>
  );
};

export default ExampleComponent;

在上面的代码中，我们使用 useMemo 缓存了根据输入数据计算出的结果。只有当输入数据发生变化时，才会重新计算结果。这样，在每次渲染时，如果输入数据没有发生变化，就可以直接使用缓存的结果，提高性能。

另一个常见的场景是在将回调函数传递给子组件时，使用 useCallback 缓存函数引用，避免函数的重复创建。

import React, { useCallback } from 'react';
import ChildComponent from './ChildComponent';

const ExampleComponent = () => {
  const handleClick = useCallback(() => {
    // 执行一些点击事件处理逻辑
    console.log('Button clicked!');
  }, []);

  return (
    <div>
      <ChildComponent onClick={handleClick} />
    </div>
  );
};

export default ExampleComponent;

在上面的代码中，我们使用 useCallback 缓存了 handleClick 函数的引用。由于 useCallback 的依赖项数组为空，所以 handleClick 函数只会在组件首次渲染时创建一次，并且不会随着组件的重新渲染而重新创建。这样可以避免每次重新渲染时都创建一个新的函数，提高性能。