记录react 使用 useCallback, useEffect，useMemo

最新推荐文章于 2024-11-22 18:25:10 发布

原创最新推荐文章于 2024-11-22 18:25:10 发布 · 3.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#react #hooks

本文详细介绍了React Hooks中的useCallback、useMemo和useEffect。useCallback用于记忆化回调函数，避免因组件更新导致的不必要的重新创建；useMemo则在依赖未变化时提供缓存结果，提高性能；而useEffect结合了组件生命周期的多个阶段，用于处理副作用。通过合理使用这三个Hooks，可以优化React应用的性能和代码组织。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

useCallback：接收一个内联回调函数和一个依赖数组，返回一个记忆版本的回调函数。如果第二个参数没有指定改变值的情况，它只会在第一次时进行该值闭包缓存，不再更新

import React, { useState, useCallback } from 'react';

const [getImageUrl, setImageUrl] = useState<string>("");

const [getUrlLoading, setUrlLoading] = useState<boolean>(false);

const handleChange: (info: UploadChangeParam<any>) => void = useCallback(info => {
            if (info.file.status === "uploading") {
                setUrlLoading(true);
                return;
            }
            if (info.file.status === "done") {
                getBase64(info.file.originFileObj, (imageUrl: any) => {
                    setImageUrl(imageUrl);
                    setUrlLoading(false);
                });
            }
    }, [setImageUrl, setUrlLoading]);

useMemo：当依赖没有发生变化时，不执行计算，直接返回缓存结果（有点像 vue 的计算属性）。使用useMemo，然后给她传递第二个参数，参数匹配成功，才会执行

import React, { useState, useMemo } from 'react';
const [count, setCount] = useState(0);

  //第一个参数是要执行的函数
  //第二个参数是执行函数依赖的变量组成的数据
  //这里只有count发生变化double才会重新计算
  const double = useMemo(() => {
    return count * 2;
  }, [count])
  // 下面为第二个参数满足条件再执行
const double = useMemo(() => {
    return count * 2;
  }, [count===3])

useEffect：可以把 useEffect 看做 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合。

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const id = setInterval(() => {
      setCount(c => c + 1);
    }, 1000);
    return () => clearInterval(id);
  }, []);

  return <h1>{count}</h1>
}

注释：useEffect使用中，你可以通知 React 跳过对 effect 的调用，只要传递数组作为 useEffect 的第二个可选参数即可，如果想执行只运行一次的 effect（仅在组件挂载和卸载时执行），可以传递一个空数组（[]）作为第二个参数。这就告诉 React 你的 effect 不依赖于 props 或 state 中的任何值，所以它永远都不需要重复执行。