React- useMemo & useCallback

在React中,useMemouseCallback 是两个非常有用的Hooks,它们可以帮助我们优化组件的性能,避免不必要的计算和函数重新定义。下面我会详细讲解它们的使用场景、如何验证效果以及避免不必要的计算。

什么时候用 useMemo

useMemo 用于缓存计算结果,当依赖项没有变化时,避免重复计算。它特别适用于以下场景:

  1. 复杂的计算 :当计算过程非常耗时或复杂时,使用 useMemo 可以缓存计算结果,避免每次渲染都重新计算。
  2. 传递给子组件的值 :如果一个计算结果被传递给子组件作为props,而子组件依赖于这个值进行渲染,使用 useMemo 可以避免子组件不必要的重新渲染。

什么时候用 useCallback

useCallback 用于缓存函数,当依赖项没有变化时,避免函数的重新定义。它特别适用于以下场景:

  1. 作为子组件的props :当一个函数被传递给子组件作为props,而子组件依赖于这个函数进行渲染,使用 useCallback 可以避免子组件不必要的重新渲染。
  2. 事件处理函数 :当一个事件处理函数依赖于某些状态或props,使用 useCallback 可以避免每次渲染都重新定义这个函数。

如何验证效果

要验证 useMemouseCallback 的效果,可以通过以下几种方式:

  1. 控制台日志:在计算函数或事件处理函数中添加控制台日志,观察它们的调用次数。
  2. React DevTools:使用React DevTools查看组件的渲染次数,观察是否减少了不必要的渲染。
  3. 性能分析工具:使用浏览器的性能分析工具,观察页面的渲染性能是否有提升。

示例代码

下面是一个更详细的示例,展示了如何使用 useMemouseCallback,以及如何验证它们的效果:

jsx 复制代码
import React, { useState, useMemo, useCallback } from 'react';

function ExpensiveCalculation({ count }) {
  console.log('ExpensiveCalculation called');
  return count * 2;
}

function ChildComponent({ handleClick }) {
  console.log('ChildComponent rendered');
  return (
    <button onClick={handleClick}>Increment</button>
  );
}

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

  const expensiveCalculation = useMemo(() => {
    console.log('ExpensiveCalculation computed');
    return ExpensiveCalculation({ count });
  }, [count]);

  const handleClick = useCallback(() => {
    console.log('handleClick called');
    setCount(count + 1);
  }, [count]);

  return (
    <div>
      <ChildComponent handleClick={handleClick} />
      <div>Result: {expensiveCalculation}</div>
    </div>
  );
}

export default ParentComponent;

验证效果

  1. 控制台日志 :在控制台中观察 ExpensiveCalculation calledChildComponent rendered 的输出次数,确保它们只在 count 变化时才被调用。
  2. React DevTools :使用React DevTools查看 ChildComponent 的渲染次数,确保它没有不必要的重新渲染。
  3. 性能分析工具:使用浏览器的性能分析工具,观察页面的渲染性能是否有提升。

通过以上方法,我们可以验证 useMemouseCallback 的效果,确保它们有效地避免了不必要的计算和函数重新定义。

相关推荐
带娃的IT创业者1 小时前
TypeScript + React + Ant Design 前端架构入门:搭建一个 Flask 个人博客前端
前端·react.js·typescript
非凡ghost2 小时前
MPC-BE视频播放器(强大视频播放器) 中文绿色版
前端·windows·音视频·软件需求
Stanford_11063 小时前
React前端框架有哪些?
前端·微信小程序·前端框架·微信公众平台·twitter·微信开放平台
洛可可白3 小时前
把 Vue2 项目“黑盒”嵌进 Vue3:qiankun 微前端实战笔记
前端·vue.js·笔记
学习同学3 小时前
从0到1制作一个go语言游戏服务器(二)web服务搭建
服务器·前端·golang
-D调定义之崽崽4 小时前
【初学】调试 MCP Server
前端·mcp
四月_h4 小时前
vue2动态实现多Y轴echarts图表,及节点点击事件
前端·javascript·vue.js·echarts
文心快码BaiduComate4 小时前
用Zulu轻松搭建国庆旅行4行诗网站
前端·javascript·后端
行者..................6 小时前
手动编译 OpenCV 4.1.0 源码,生成 ARM64 动态库 (.so),然后在 Petalinux 中打包使用。
前端·webpack·node.js
小爱同学_6 小时前
一次面试让我重新认识了 Cursor
前端·面试·程序员