React性能优化之memo，useMemo，useCallback三大秘籍轻松搞定

2024-01-24 01:46:59

好的，以下是关于react性能优化之memo，useMemo，useCallback 的博客文章：

前言

性能优化一直是我们关心的问题，这一块也比较大，今天我们就先看一下react的一些hooks怎么来优化组件。

正文

1. memo

memo是React中常用的一个高阶组件，它可以用来优化组件的性能。memo通过比较组件的props来判断组件是否需要重新渲染。如果props没有发生变化，则组件不会重新渲染，从而提高了组件的性能。

import { memo } from 'react';

const MyComponent = memo(({ name }) => {
  console.log('MyComponent is rendering');
  return <div>Hello, {name}!</div>;
});

在上面的代码中，我们使用memo包装了MyComponent组件。当MyComponent组件的props发生变化时，memo会重新渲染组件。否则，memo将不会重新渲染组件。

2. useMemo

useMemo是React中另一个常用的hook，它可以用来优化组件的性能。useMemo通过缓存函数的结果来避免重复计算。如果函数的结果没有发生变化，则useMemo将返回缓存的结果，从而提高了组件的性能。

import { useMemo } from 'react';

const MyComponent = () => {
  const data = useMemo(() => {
    console.log('Data is being calculated');
    return calculateData();
  }, []);

  return <div>Data: {data}</div>;
};

在上面的代码中，我们使用useMemo缓存了calculateData函数的结果。当calculateData函数的结果发生变化时，useMemo将重新计算函数的结果。否则，useMemo将返回缓存的结果。

3. useCallback

useCallback是React中另一个常用的hook，它可以用来优化组件的性能。useCallback通过缓存函数的引用来避免重复创建函数。如果函数的引用没有发生变化，则useCallback将返回缓存的函数，从而提高了组件的性能。

import { useCallback } from 'react';

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

  return <button onClick={handleClick}>Click me</button>;
};