【React】试用了useCallback和useMemo只需要一个选项

1 年 ago

逸, 科

1 minute

useCallback 和 useMemo 的使用方法

在开发React应用时，性能优化非常重要。React Hooks 提供了两个钩子函数useCallback和useMemo。它们可以记忆函数或计算结果，避免每次重新渲染时生成新的函数或值。本文将重点介绍useCallback和useMemo的基本使用方法。

使用useCallback的方法。

useCallback钩子将指定的回调函数进行记忆化。这样一来，就可以防止组件每次重新渲染时生成新的函数。这在将回调函数作为属性传递给子组件时特别有用。

import React, { useCallback } from "react";

const MyComponent: React.FC = () => {
  const handleClick = useCallback(() => {
    console.log("Button Clicked!");
  }, []);

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

export default MyComponent

在上述的例子中，handleClick函数在每次重新渲染时都使用相同的函数。由于依赖数组为空，所以不需要在每次重新渲染时生成新的函数。

使用useMemo的方法

useMemo钩子用于对指定的函数计算结果进行记忆化。这样可以避免在重新渲染时重复执行相同的计算。当在组件内执行复杂的计算时，这将非常有用。

import React, { useMemo } from 'react';

const MyComponent: React.FC = () => {
  const expensiveCalculation = useMemo(() => {
    // 重い計算
    let result = 0;
    for (let i = 0; i < 1000000; i++) {
      result += i;
    }
    return result;
  }, []); // 依存配列が空なので、再レンダリングごとに同じ計算結果が使用される

  return (
    <div>{expensiveCalculation}</div>
  );
};

export default MyComponent

在上述的例子中，expensiveCalculation的计算结果会在每次重新渲染时被重复使用。由于依赖数组为空，所以不需要每次重新渲染时都重新执行计算。

总结

useCallback和useMemo是提高React应用性能的重要工具。通过将回调函数和计算结果进行记忆化，可以避免不必要的重新计算和重新生成，提高组件的效率。通过适当使用这些钩子，可以构建更舒适和高效的React应用程序。