React中useCallback useMemo到底该怎么用

 更新时间:2023年02月06日 14:55:43   作者:碰磕  
在React函数组件中,当组件中的props发生变化时,默认情况下整个组件都会重新渲染。换句话说,如果组件中的任何值更新,整个组件将重新渲染,包括没有更改values/props的函数/组件。在react中,我们可以通过memo,useMemo以及useCallback来防止子组件的rerender

useCallback记忆函数

前言

使用缘由:

防止因为组件重新渲染,导致方法被重新创建,起到缓存作用

类似监听器…监听更新然后执行操作

介绍

防止因为组件重新渲染,导致方法被重新创建,起到缓存作用

使用

/**
 * useCallback记忆函数
 */
 import React, { useState, useCallback, useEffect } from 'react';
 const set = new Set();
 export default function Parent() {
   const [count, setCount] = useState(1);
   const callback = useCallback(() => {
     console.log(count);
     return count
   }, [count]); //count更新时执行
   return (
   <div>
     <h4>parent count:{count}</h4>
     <div>
       <button onClick={() => setCount(count + 1)}>+</button>
     </div>
     <Child callback={callback} />
   </div>
   )
 }
 const Child = ({callback}) =>{
   const [count,setCount] = useState(0);
   useEffect(()=>{
     setCount(callback())
   },[callback]) //当callback更新时执行callback函数,得到parent组件最新的count
   return <child>
     count:{count}
   </child>
 } 

useMemo记忆组件

两者区别

与useCallback的区别

  • useCallback不会执行第一个参数函数,而是将它返回给你,而useMemo会执行第一个函数并且将函数执行结果返回给你
  • 类似监听器…监听更新然后执行操作

使用

/**
 * useMemo记忆组件
 */
 import React, { useState, useMemo } from 'react';
 export default function Memos() {
   const [count, setCount] = useState(1);
   const memo = useMemo(() => {
     console.log("count更新了"+count);
     return count
   }, [count]); //count更新时执行
   return <div>
     <h4>{count}</h4>
     <div>
       <button onClick={() => setCount(count + 1)}>+</button>
     </div>
   </div>;
 }

到此这篇关于React中useCallback useMemo到底该怎么用的文章就介绍到这了,更多相关React useCallback与useMemo内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • React Fiber原理深入分析

    React Fiber原理深入分析

    Fiber可以理解为一个执行单元,每次执行完一个执行单元,React Fiber就会检查还剩多少时间,如果没有时间则将控制权让出去,然后由浏览器执行渲染操作,这篇文章主要介绍了React Fiber架构原理剖析,需要的朋友可以参考下<BR>
    2023-01-01
  • react-redux中connect()方法详细解析

    react-redux中connect()方法详细解析

    connect()是React-redux中的核心方法之一,它将react组件预redux中的Store真正连接在一起,下面这篇文章主要给大家介绍了react-redux中connect()方法的相关资料,文中介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。
    2017-05-05
  • React18使用Echarts和MUI实现一个交互性的温度计

    React18使用Echarts和MUI实现一个交互性的温度计

    这篇文章我们将结合使用React 18、Echarts和MUI(Material-UI)库,展示如何实现一个交互性的温度计,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-01-01
  • React.memo 实现原理解析

    React.memo 实现原理解析

    React.memo通过props浅比较或自定义函数,结合Fiber优化机制,跳过组件渲染及副作用,下面就来详细的介绍一下,感兴趣的可以了解一下
    2025-09-09
  • React Hooks - useContetx和useReducer的使用实例详解

    React Hooks - useContetx和useReducer的使用实例详解

    这篇文章主要介绍了React Hooks - useContetx和useReducer的基本使用,本文通过实例代码给大家讲解的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-11-11
  • JS中使用react-tooltip插件实现鼠标悬浮显示框

    JS中使用react-tooltip插件实现鼠标悬浮显示框

    前段时间遇到的一个需求,要求鼠标悬停显示使用描述, 用到了react-tooltip插件,今天写一个总结,感兴趣的朋友跟随小编一起看看吧
    2019-05-05
  • React框架快速实现简易的Markdown编辑器

    React框架快速实现简易的Markdown编辑器

    这篇文章主要为大家介绍了使用React框架实现简易的Markdown编辑器,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-04-04
  • 详解react关于事件绑定this的四种方式

    详解react关于事件绑定this的四种方式

    这篇文章主要介绍了详解react关于事件绑定this的四种方式,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • react 页面加载完成后自动执行标签的点击事件的两种操作方法

    react 页面加载完成后自动执行标签的点击事件的两种操作方法

    这篇文章主要介绍了react 页面加载完成后自动执行标签的点击事件,本文给大家分享两种操作方法结合示例代码给大家讲解的非常详细,需要的朋友可以参考下
    2022-12-12
  • react实现浏览器自动刷新的示例代码

    react实现浏览器自动刷新的示例代码

    这篇文章主要介绍了react实现浏览器自动刷新的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-04-04

最新评论