解析React中useMemo与useCallback的区别

useMemo

把“创建”函数和依赖项数组作为参数传⼊入useMemo，它仅会在某个依赖项改变时才重新计算memoized 值。这种优化有助于避免在每次渲染时都进⾏行行⾼高开销的计算。

importReact, { useState, useMemo } from"react";
export default functionUseMemoPage(props) {
    const [count, setCount] =useState(0);
    constexpensive=useMemo(() => {
        console.log("compute");
        let sum=0;
        for (leti=0; i<count; i++) {
            sum+=i;
        }
        return sum;//只有count变化，这⾥里里才重新执⾏行行
      }, [count]);
    const [value, setValue] =useState("");
    return (<div><h3>UseMemoPage</h3>
    <p>expensive:{expensive}</p><p>{count}</p>
　　<button onClick={() =>setCount(count+1)}>add</button>
　　<input value={value} onChange={event=>setValue(event.target.value)} /></div>  );
}

useCallback

把内联回调函数及依赖项数组作为参数传⼊入useCallback，它将返回该回调函数的 memoized 版本，该回调函数仅在某个依赖项改变时才会更更新。当你把回调函数传递给经过优化的并使⽤用引⽤用相等性去避免⾮非必要渲染（例例如shouldComponentUpdate）的⼦子组件时，它将⾮非常有⽤用

importReact, { useState, useCallback, PureComponent } from"react";
export default function UseCallbackPage(props) {
    const [count, setCount] =useState(0);
    const addClick=useCallback(() => {
    let sum=0;
    for (leti=0; i<count; i++) {
        sum+=i;
    }
    return sum;
    }, [count]);
    const [value, setValue] =useState("");
    return (
    <div><h3>UseCallbackPage</h3>
　　<p>{count}</p>
　　<buttononClick={() =>setCount(count+1)}>add</button>
　　<inputvalue={value} onChange={event=>setValue(event.target.value)} />
　　<ChildaddClick={addClick} /></div>  );
}
　　class ChildextendsPureComponent {
　　　　render() {
　　　　　　console.log("child render");
　　　　　　const { addClick } =this.props;

　　　　　　return (
　　　　　　　　<div><h3>Child</h3>
　　　　　　　　<buttononClick={() =>console.log(addClick())}>add</button></div>
　　　　 )
　　}
}

useCallback(fn, deps)相当于useMemo(() => fn, deps)。

注意依赖项数组不不会作为参数传给“创建”函数。虽然从概念上来说它表现为：所有“创建”函数中引⽤用的值都应该出现在依赖项数组中。未来编译器器会更更加智能，届时⾃自动创建数组将成为可能。

补充介绍React的memo与useMemo及useCallback

React.memo

  • 概念解析

    • 将组件在相同的情况下的渲染结果，缓存渲染结果
    • 当组件传入props相同的参数时，浅对比之后有之前的传入项，则复用缓存最近一次结果
    • 数据对比，只做浅对比。如果需要控制对比过程，需要自己写自定义比对函数。传参数置第二个参数 -请注意不要与 shouldComponetUpdate 返回值混合

类组件通过比对数据，可以控制渲染的方式？

  • React.PureComponent
  • shouldComponentUpdate

hooks的useMemo

  • 概念解析

    • 函数组件的缓存渲染结果
    • 可以将当前的组件节点颗粒化
    • 通过第二个参数去判断，是否更新useMemo的回调函数
    • 回调函数是一个必包，如果创建使用了 useState，会缓存 state 值，不会拿到实时更新的值

hooks的useCallback

  • 概念解析

    • 返回一个需要缓存的函数
    • 传递需要更新的依赖项，一般回调函数内部使用的数据，都需要添加在依赖项中
    • 避免父子之间，子级生成新的props函数，从而刷新子组件
      • 当父级组件传递给子级组件一个函数时，无状态组件每次都会重新生成新的props函数，导致子组件刷新
    • 一般联合useMemo一起使用

到此这篇关于React中useMemo与useCallback的区别的文章就介绍到这了,更多相关React useMemo与useCallback区别内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • react组件memo useMemo useCallback使用区别示例

    目录 正文 memo使用 useMemo使用 useCallback使用 正文 memo用来优化函数组件的重复渲染行为,针对的是一个组件 useMemo返回一个memoized的值 本质都是用同样的算法来判定依赖是否发生改变,继而决定是否触发memo或者useMemo中的逻辑,利用memo就可以避免不必要的重复计算,减少资源浪费 useCallback返回一个memoized的函数 useMemo和useCallback都接收两个参数,第一个参数为fn,第二个参数为[],数组中是变化依赖的参数

  • React useMemo和useCallback的使用场景

    useMemo 我们知道当父组件发生重新渲染时,其所有(状态.局部变量等)都是新的.一旦子组件依赖于父组件的某一个对象变量,那么无论对象是否发生变化,子组件拿到的都是新的对象,从而使子组件对应的 diff 失效,依旧会重新执行该部分逻辑.在下面的例子中,我们的副作用依赖项中包含了父组件传入的对象参数,每次父组件发生更新时,都会触发数据请求. function Info({ style, }) { console.log('Info 发生渲染'); useEffect(() => { consol

  • react性能优化useMemo与useCallback使用对比详解

    react性能优化useMemo与useCallback使用对比详解

    目录 引言 对比 useMemo useCallback 引言 在介绍一下这两个hooks的作用之前,我们先来回顾一下react中的性能优化.在hooks诞生之前,如果组件包含内部state,我们都是基于class的形式来创建组件.当时我们也知道,react中,性能的优化点在于: 调用setState,就会触发组件的重新渲染,无论前后的state是否不同 父组件更新,子组件也会自动的更新 基于上面的两点,我们通常的解决方案是:使用immutable进行比较,在不相等的时候调用setState:在

  • React 正确使用useCallback useMemo的方式

    目录 正确使用useCallback useMemo的姿势 useCallback useMemo 总结 正确使用useCallback useMemo的姿势 说起useCallback useMemo大家肯定在React都不陌生,但是真正了解它们的作用,还是有一部分同学对此是一知半解,只是知道用它,却不知道它真正的含义.今天带大家学习一下它们的真正蕴藏的作用.useCallback useMemo 都是记忆函数,什么是记忆函数呢?用个最简单的例子来讲 useState 也是记忆函数 细想一下以

  • 解析React中useMemo与useCallback的区别

    useMemo 把“创建”函数和依赖项数组作为参数传⼊入useMemo,它仅会在某个依赖项改变时才重新计算memoized 值.这种优化有助于避免在每次渲染时都进⾏行行⾼高开销的计算. importReact, { useState, useMemo } from"react"; export default functionUseMemoPage(props) { const [count, setCount] =useState(0); constexpensive=useMemo

  • React中useEffect 与 useLayoutEffect的区别

    目录 前置知识 useEffect commitBeforeMutationEffects commitMutationEffects commitLayoutEffects 后续阶段 useLayoutEffect 结论 前置知识 我们可以将 React 的工作流程划分为几大块: render 阶段:主要生成 Fiber节点 并构建出完整的 Fiber树 commit 阶段:在上一个render 阶段中会在 rootFiber 上生成一条副作用链表,应用的DOM操作就会在本阶段执行 commi

  • 代码解析React中setState同步和异步问题

    React起源于Facebook的内部项目.React的出现是革命性的创新,React的是一个颠覆式的前端框架.在React官方这样介绍的它:一个声明式.高效.灵活的.创建用户界面的JavaScript库,即使React的主要作用是构建UI,但是项目的逐渐成长已经使得react成为前后端通吃的WebApp解决方案. angular中用的是watcher对象,vue是观察者模式,react就是state了,他们各有各的特点,没有好坏之分,只有需求不同而选择不同. React的官方网址:https:

  • 解析React 中的Virtual DOM

    解析React 中的Virtual DOM

    React在前端界一直很流行,而且学起来也不是很难,只需要学会JSX.理解State和Props,然后就可以愉快的玩耍了,但想要成为React的专家你还需要对React有一些更深入的理解,希望本文对你有用. React在前端界一直很流行,而且学起来也不是很难,只需要学会JSX.理解State和Props,然后就可以愉快的玩耍了,但想要成为React的专家你还需要对React有一些更深入的理解,希望本文对你有用. 这是Choerodon的一个前端页面 在复杂的前端项目中一个页面可能包含上百个状态,

  • 解析php中mysql_connect与mysql_pconncet的区别详解

    说说mysql_connect与mysql_pconnect的区别,这俩函数用法上差不多,网上有说应该用pconnect的,pconnect是个 好东西:也有视pconnect如洪水猛兽的,坚决不让用pconnect的,也有态度暧昧不清的.那这个东西到底如何呢? 永久链接并不是说,服务器打开了一个连接,然后所有的人都共享这个链接.永久连接一样是每个客户端来就打开一个连接,有200人访问就有200个连接.其 实mysql_pconnect()本身并没有做太多的处理, 它唯一做的只是在php运行结束

  • 详细解析Java中抽象类和接口的区别

    在Java语言中, abstract class 和interface 是支持抽象类定义的两种机制.正是由于这两种机制的存在,才赋予了Java强大的 面向对象能力.abstract class和interface之间在对于抽象类定义的支持方面具有很大的相似性,甚至可以相互替换,因此很多开发者在进 行抽象类定义时对于abstract class和interface的选择显得比较随意.其实,两者之间还是有很大的区别的,对于它们的选择甚至反映出对 于问题领域本质的理解.对于设计意图的理解是否正确.合理

  • 全面解析Angular中$Apply()及$Digest()的区别

    $apply()和$digest()在AngularJS中是两个核心概念,但是有时候它们又让人困惑.而为了了解AngularJS的工作方式,首先需要了解$apply()和$digest()是如何工作的.这篇文章旨在解释$apply()和$digest()是什么,以及在日常的编码中如何应用它们. 1.探索$apply()和$digest() 1.1.认识双向数据绑定和$watch(); AngularJS提供了一个非常酷的特性叫做双向数据绑定(Two-way Data Binding),这个特性大

  • 解析php中die(),exit(),return的区别

    die()停止程序运行,输出内容exit是停止程序运行,不输出内容return是返回值die是遇到错误才停止exit是直接停止,并且不运行后续代码,exit()可以显示内容.return就是纯粹的返回值了,但是也不会运行后续代码exit(0):正常运行程序并退出程序:exit(1):非正常运行导致退出程序:return():返回函数,若在主函数中,则会退出函数并返回一值.详细说:  1. return返回函数值,是关键字:  exit 是一个函数.  2. return是语言级别的,它表示了调用

  • 解析mysql中max_connections与max_user_connections的区别

    在mysql的手册中已经对max_user_connections有一点说明,它是用来限制用户资源的,怎么限制用户资源呢?这里做了个小测试.首先产看该全局变量的值mysql> select @@max_user_connections;+------------------------+| @@max_user_connections |+------------------------+|                      0 |+------------------------+1

  • 解析C#中[],List,Array,ArrayList的区别及应用

    [] 是针对特定类型.固定长度的. List 是针对特定类型.任意长度的. Array 是针对任意类型.固定长度的. ArrayList 是针对任意类型.任意长度的. Array 和 ArrayList 是通过存储 object 实现任意类型的,所以使用时要转换. 应用示例 复制代码 代码如下: using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web

随机推荐