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弹窗使用方式NiceModal重新思考

    React弹窗使用方式NiceModal重新思考

    这篇文章主要为大家介绍了React弹窗使用方式NiceModal重新思考分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • 使用useImperativeHandle时父组件第一次没拿到子组件的问题

    使用useImperativeHandle时父组件第一次没拿到子组件的问题

    这篇文章主要介绍了使用useImperativeHandle时父组件第一次没拿到子组件的问题及解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • Zustand介绍与使用 React状态管理工具的解决方案

    Zustand介绍与使用 React状态管理工具的解决方案

    本文主要介绍了Zustand,一种基于React的状态管理库,Zustand以简洁易用、灵活性高及最小化原则等特点脱颖而出,旨在提供简单而强大的状态管理功能
    2024-10-10
  • react源码层探究setState作用

    react源码层探究setState作用

    写react的时候,踩了几次坑发现setstate之后state不会立刻更新,于是判定setstate就是异步的方法,但是直到有一天,我想立刻拿到更新的state去传参另一个方法的时候,才问自己,为什么setstate是异步的?准确地说,在React内部机制能检测到的地方,setState就是异步的
    2022-10-10
  • react脚手架如何配置less和ant按需加载的方法步骤

    react脚手架如何配置less和ant按需加载的方法步骤

    这篇文章主要介绍了react脚手架如何配置less和ant按需加载的方法步骤,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • React tabIndex使非表单元素支持focus和blur事件

    React tabIndex使非表单元素支持focus和blur事件

    这篇文章主要为大家介绍了React使用tabIndex使非表单元素支持focus和blur事件实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-11-11
  • React中this丢失的四种解决方法

    React中this丢失的四种解决方法

    这篇文章主要给大家介绍了关于React中this丢失的四种解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者使用React具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-03-03
  • ReactRouter的实现方法

    ReactRouter的实现方法

    这篇文章主要介绍了ReactRouter的实现,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-01-01
  • Redux中间件的使用方法教程

    Redux中间件的使用方法教程

    中间件就是一个函数,对store.dispatch方法进行了改造,在发出 Action 和执行 Reducer 这两步之间,添加了其他功能,要理解中间件,关键点是要知道,这个中间件是连接哪些部分的软件,它在中间做了什么事,提供了什么服务
    2023-01-01
  • 在React 组件中使用Echarts的示例代码

    在React 组件中使用Echarts的示例代码

    本篇文章主要介绍了在React 组件中使用Echarts的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11

最新评论