从React最基础开始，它们分别解决了什么问题？

在React中，函数式编程是构建组件的常用方法。函数式组件具有更好的可测试性和可维护性，并且更容易理解和调试。然而，在某些情况下，使用函数式组件可能会导致性能问题。

useCallback

useCallback的作用是避免每次函数组件重新渲染时，重新创建函数。这对于经常被调用的函数非常有用，因为它可以节省创建函数的开销。例如，如果我们在函数组件中使用了一个计时器，那么每次组件重新渲染时，计时器都会被重新创建。这可能会导致性能问题，因为创建计时器需要花费时间。为了避免这种情况，我们可以使用useCallback来缓存计时器函数，这样它只会被创建一次。

useMemo

useMemo的作用是避免每次函数组件重新渲染时，重新计算值。这对于经常被计算的值非常有用，因为它可以节省计算值的时间。例如，如果我们在函数组件中使用了一个复杂的对象，那么每次组件重新渲染时，对象都会被重新计算。这可能会导致性能问题，因为计算对象需要花费时间。为了避免这种情况，我们可以使用useMemo来缓存对象，这样它只会被计算一次。

总结

useCallback和useMemo都是非常有用的React Hooks，它们可以帮助我们优化应用程序的性能。useCallback用于缓存函数，useMemo用于缓存值。通过使用这些Hooks，我们可以避免在每次函数组件重新渲染时，重新创建函数或重新计算值，从而提高应用程序的性能。

示例

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

const MyComponent = () => {
  const [count, setCount] = useState(0);

  // 创建一个计时器函数
  const timer = useCallback(() => {
    console.log(`当前时间：${new Date().toLocaleTimeString()}`);
  }, []);

  // 创建一个复杂的对象
  const object = useMemo(() => {
    return {
      name: 'John Doe',
      age: 30,
      city: 'New York'
    };
  }, []);

  return (
    <div>
      <h1>计数：{count}</h1>
      <button onClick={() => setCount(count + 1)}>增加计数</button>
      <button onClick={timer}>显示当前时间</button>
      <pre>{JSON.stringify(object, null, 2)}</pre>
    </div>
  );
};

export default MyComponent;

在这个示例中，我们使用useCallback来缓存计时器函数，使用useMemo来缓存对象。这样，当组件重新渲染时，计时器函数和对象都不会被重新创建或重新计算，从而提高了应用程序的性能。