如何手写useMemo

`useMemo` 是一个 React Hooks，用于优化组件的性能。它接收两个参数：一个是计算函数，另一个是依赖项数组。在计算函数中，我们可以进行一些昂贵的计算，然后将计算结果缓存起来，以便在依赖项没有变化时重复使用。这样可以避免不必要的计算，从而提高组件的性能。

下面是一个手写的 `useMemo` 的示例代码：

import { useState, useEffect } from 'react';

function useMemo(callback, dependencies) {
  const [value, setValue] = useState(callback());

  useEffect(() => {
    setValue(callback());
  }, dependencies);

  return value;
}

这个 `useMemo` 函数接收两个参数：`callback` 和 `dependencies`。`callback` 是用于计算结果的函数，`dependencies` 是一个数组，包含了所有需要监视的依赖项。在函数体中，我们使用 `useState` 来保存计算结果，然后使用 `useEffect` 监视依赖项的变化，如果依赖项发生了变化，就重新计算结果并更新状态。最后，返回缓存的结果。

使用这个手写的 `useMemo` 函数，可以像下面这样在组件中使用：

function MyComponent(props) {
  const expensiveValue = useMemo(() => {
    // 进行一些昂贵的计算
    const result = ...
    return result;
  }, [props.dependency1, props.dependency2]);

  // 使用 expensiveValue 来渲染组件
  return ...
}

在这个示例中，我们使用 `useMemo` 来缓存一个昂贵的计算结果 `expensiveValue`，并将 `props.dependency1` 和 `props.dependency2` 添加到依赖项数组中。这样，只有当这些依赖项发生变化时，才会重新计算 `expensiveValue`。这可以帮助我们避免不必要的计算，提高组件的性能。