react.callback的作用，如何配合react.memo

React中的 `useCallback` hook 用于记忆一个函数，以便在后续的渲染中避免不必要的重新创建和重新渲染。这在需要将函数作为 `props` 传递给子组件时特别有用，因为这样可以避免子组件的不必要渲染。

使用 `useCallback` 时，你需要传入一个函数和一个依赖项数组。当依赖项数组中的任何一个值发生变化时，`useCallback` 将返回一个新的记忆函数。否则，它将返回先前记忆的函数。

`React.memo` 是一个高阶组件，用于将组件包装在内，并仅在传递给组件的 `props` 发生更改时重新渲染组件。当 `props` 没有变化时，组件将从记忆中读取，并避免不必要的重新渲染。

你可以将记忆函数作为 `props` 传递给 `React.memo`，以便在 `props` 没有变化时使用记忆函数。这将避免不必要的函数重新创建和组件重新渲染，从而提高性能。

例如：

import React, { useCallback } from 'react';

const MyComponent = React.memo(({ onClick }) => {
  return <button onClick={onClick}>Click me</button>;
});

const App = () => {
  const handleClick = useCallback(() => {
    console.log('Button clicked');
  }, []);

  return <MyComponent onClick={handleClick} />;
};

在这个例子中，`handleClick` 函数被记忆了，并且只有在依赖项数组中的值发生变化时才会创建新的记忆函数。`MyComponent` 组件被包装在 `React.memo` 中，并且只有在 `onClick` `props` 发生变化时才会重新渲染。这将提高组件的性能。