react useCallback 和 useMemo的区别

不同点：

• useCallback - 缓存的是函数
• useMemo - 缓存的是返回值

相同点：

都是用于缓存数据，优化性能，两者接收的参数都是一样的

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

  const isEvenNumber = useMemo(() => {
    return count % 2 === 0;
  }, [count]);

  const onClick = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  return (
    <div>
      <div>{count} is {isEvenNumber ? '偶数':'基数'} number</div>
      <button onClick={onClick}>点击</button>
    </div>
  );
};

应用场景：

useMemo：数据的过滤、排序等操作，可以使用useMemo缓存计算结果，避免重复计算

useCallback：会被多次调用的回调函数，通过useCallback将其缓存，避免过度渲染。

注意点：

useCallback和useMemo需要在项目实践中花时间去思考性能优化的点。 不能盲目地使用useCallback和useMemo，因为两者都需要内存去缓存，过多的非必要的使用也是不利于应用的性能的。