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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • pubsub-js在react中的使用教程

    pubsub-js在react中的使用教程

    pubsub-js 是一个用于实现发布-订阅模式的 JavaScript 库,可以用于不同组件之间的通信,在 React 中,可以使用 pubsub-js 来实现组件之间的通信,本篇文章给大家讲解pubsub-js在react中的使用,感兴趣的朋友一起看看吧
    2023-10-10
  • React useEffect异步操作常见问题小结

    React useEffect异步操作常见问题小结

    本文主要介绍了React useEffect异步操作常见问题小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-06-06
  • react实现路由拦截的示例代码

    react实现路由拦截的示例代码

    这篇文章主要介绍react实现路由拦截的,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2024-02-02
  • 解决React报错Property 'X' does not exist on type 'HTMLElement'

    解决React报错Property 'X' does not 

    这篇文章主要为大家介绍了解决React报错Property 'X' does not exist on type 'HTMLElement',有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12
  • React中多语言的配置方式

    React中多语言的配置方式

    这篇文章主要介绍了React中多语言的配置方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-06-06
  • React Native 启动流程详细解析

    React Native 启动流程详细解析

    这篇文章主要介绍了React Native 启动流程简析,文以 react-native-cli 创建的示例工程(安卓部分)为例,给大家分析 React Native 的启动流程,需要的朋友可以参考下
    2021-08-08
  • react-routerV6版本和V5版本的详细对比

    react-routerV6版本和V5版本的详细对比

    React-Router5是React-Router6的前一个版本,它已经被React-Router6取代,React-Router 6是一次较大的重大更新,本文就来介绍一下react-routerV6版本和V5版本的详细对比,感兴趣的可以了解一下
    2023-12-12
  • React中如何设置自定义滚动条样式

    React中如何设置自定义滚动条样式

    这篇文章主要介绍了React中如何设置自定义滚动条样式问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-11-11
  • 详解React组件卸载怎么中止递归方法

    详解React组件卸载怎么中止递归方法

    最近在处理项目代码的时候,出现了一个bug,组件中的方法在组件卸载后仍然在执行,代码片段发给我看,但是变量的用意我也不懂,只看到有方法调用自身方法,这不就是递归嘛,所以本文详细给大家介绍了React组件卸载怎么中止递归方法,需要的朋友可以参考下
    2024-01-01
  • TypeScript在React项目中的使用实践总结

    TypeScript在React项目中的使用实践总结

    这篇文章主要介绍了TypeScript在React项目中的使用总结,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-04-04

最新评论