react.memo和usememo

当你在使用React时，你可能会经常遇到需要优化组件性能的情况。React.memo和useMemo都是React提供的两种优化性能的方式。

React.memo是一个高阶组件（Higher Order Component），它可以优化组件的性能，使得组件只有在它的props发生改变时才会重新渲染。这种优化是通过比较前一次和当前props的浅层比较来实现的。使用React.memo时，需要将组件作为React.memo函数的参数传递，例如：

import React from 'react';

const MyComponent = React.memo(props => {
  // 组件代码
});

export default MyComponent;

useMemo是一个React的hook函数，它可以缓存组件中的一些计算结果，以避免重复计算。useMemo接收两个参数：一个计算函数和一个依赖数组。当依赖数组中的任何一个值发生改变时，useMemo会重新计算并返回新的值。如果依赖数组中的任何一个值都没有发生改变，则会返回上一次缓存的值。使用useMemo时，需要将计算函数作为useMemo的第一个参数传递，依赖数组作为第二个参数传递，例如：

import React, { useMemo } from 'react';

const MyComponent = props => {
  const expensiveCalculation = useMemo(() => {
    // 计算代码
  }, [props.dependency]);

  // 组件代码
};

export default MyComponent;

需要注意的是，React.memo和useMemo都只是对组件性能进行优化的工具，并不是适用于所有情况的万能解决方案。在使用它们时，需要谨慎考虑依赖项和是否真的需要进行性能优化。