>[danger]React中的useMemo和memo 在React中，`useMemo`和`memo`都是用来优化组件性能的API，但它们的使用场景和实现方式略有不同。 `useMemo`是一个React Hook，用于缓存函数执行的结果并返回该结果。它接收两个参数：一个计算函数和一个依赖项数组。当依赖项发生变化时，`useMemo`会重新执行计算函数并返回新的结果。如果依赖项没有变化，`useMemo`会直接返回缓存的结果，从而避免重复计算，提高性能。 下面是一个示例，演示如何使用`useMemo`来缓存计算结果： ```jsx function MyComponent({ a, b }) { const result = useMemo(() => { console.log("calculating..."); return a + b; }, [a, b]); return <div>Result: {result}</div>; } ``` 在上面的示例中，`useMemo`缓存了计算结果`a + b`，并且只在`a`或`b`发生变化时重新计算。因此，如果`a`或`b`没有改变，`console.log`语句也不会被触发。 另外一个用于优化组件性能的API是`memo`。它是一个高阶组件(HOC)，用于封装一个无状态组件并返回一个新的组件。`memo`通过比较当前和前一个属性(props)和状态(state)的值，确定是否需要重新渲染组件。如果属性和状态的值没有变化，`memo`会直接返回缓存的结果，从而提高性能。 下面是一个示例，演示如何使用`memo`来缓存组件的结果： ```jsx const MyComponent = memo(({ a, b }) => { console.log("rendering..."); return <div>Result: {a + b}</div>; }); ``` 在上面的示例中，`memo`封装了一个无状态组件，并缓存了其结果。如果`a`或`b`没有改变，`memo`不会重新渲染组件。 需要注意的是，`useMemo`和`memo`都是用于优化组件性能的API，但它们的使用场景略有不同。`useMemo`适用于缓存计算结果，而`memo`适用于缓存组件渲染结果。同时，`useMemo`可以在函数组件中使用，而`memo`则需要封装无状态组件。