React中使用usePrevious的意义是什么,为啥要用它

usePrevious钩子

c 复制代码
export function usePrevious<T>(value: T): T | undefined {
  const ref = useRef<T>();

  useEffect(() => {
    ref.current = value;
  }, [value]);

  return ref.current;
}

注:更多好用的性能钩子网站推荐:https://react-hooks-library.vercel.app/core/usePrevious

原因

usePrevious 是一个自定义 Hook,用于记录上一次的状态,以便在下一次渲染时进行比较。使用 usePrevious 可以提升性能,并确保在每次渲染时都有上一次的状态值可供比较。这对于需要比较前后值的场景非常有用,例如图表的更新和事件监听器的添加。

举例说明

c 复制代码
  // 使用 usePrevious 钩子函数来记录上一次的 option 和 onClick 值
  const prevOption = usePrevious(option);
  const prevClickEvent = usePrevious(onClick);
    useEffect(() => {
      // ...省略部分逻辑   
      let chartInstance: ECharts | null = null;
      // 如果 option 或 onClick 值发生变化,则重新渲染
      try {
        if (!isDeepEqual(prevOption, option, ["formatter"])) {
          chartInstance.setOption(option);
        }
        if (onClick && typeof onClick === "function" && onClick !== prevClickEvent) {
          chartInstance.on("click", onClick);
        }
      } catch (error) {
        chartInstance && chartInstance.dispose();
      }
    }
  }, [option, onClick, prevOption, prevClickEvent]);

如上面代码,prevOption 和 prevClickEvent 使用 usePrevious 自定义 Hook 来存储前一个值的变量,作用是比较当前的 option 和 onClick 值与上一次的值是否相等。如果相等,则表示没有发生改变,不需要更新图表。通过比较前后值,可以避免不必要的更新和重复渲染,提高代码的性能和效率。

相关推荐
Java水解5 分钟前
一文了解Blob文件格式,前端必备技能之一
前端
用户38022585982426 分钟前
vue3源码解析:响应式机制
前端·vue.js
bo5210028 分钟前
浏览器渲染机制详解(包含渲染流程、树结构、异步js)
前端·面试·浏览器
普通程序员34 分钟前
Gemini CLI 新手安装与使用指南
前端·人工智能·后端
FairyDiana34 分钟前
从 "等一下" 到 "马上说":React 牵手 DeepSeek 玩转文本大模型
react.js·ai编程
山有木兮木有枝_36 分钟前
react受控模式和非受控模式(日历的实现)
前端·javascript·react.js
流口水的兔子38 分钟前
作为一个新手,如果让你去用【微信小程序通过BLE实现与设备通讯】,你会怎么做,
前端·物联网·微信小程序
多啦C梦a41 分钟前
🪄 用 React 玩转「图片识词 + 语音 TTS」:月影大佬的 AI 英语私教是怎么炼成的?
前端·react.js
呆呆的心41 分钟前
大厂面试官都在问的 WEUI Uploader,源码里藏了多少干货?🤔
前端·微信·面试
heartmoonq43 分钟前
深入理解 Vue 3 响应式系统原理:Proxy、Track 与 Trigger 的协奏曲
前端