React源码分析之useCallback与useMemo及useContext详解

目录
  • 热身准备
  • 初始化mount
    • mountCallback
  • 更新 update
  • 使用场景
  • 总结
  • 热身准备
    • createContext
    • Provider
    • Consumer
    • useContext
    • 初始化mount&更新update
  • 总结

热身准备

useCallbackuseMemo是一样的东西,只是入参有所不同。

useCallback缓存的是回调函数,如果依赖项没有更新,就会使用缓存的回调函数;

useMemo缓存的是回调函数的return,如果依赖项没有更新,就会使用缓存的return

官网有这样一段描述useCallback(fn, deps)相当于useMemo(() => fn, deps)

所以这里,只以useCallback为例进行分析。

初始化mount

mountCallback

如果各位看官是系列文章第一篇开始看的,看到这里估计就无压力,mountCallback就这几行代码,笔者没有做精简。

function mountCallback(callback, deps) {
  // 初始化hook结构
  var hook = mountWorkInProgressHook();
  // 使用者传进来的依赖数组
  var nextDeps = deps === undefined ? null : deps;
  // 以数组的形式将回调和依赖数组存储到对应fiber.memoizedState.hook.moeoizedState
  hook.memoizedState = [callback, nextDeps];
  return callback;
}

更新 update

function updateCallback(callback, deps) {
  var hook = updateWorkInProgressHook();
  var nextDeps = deps === undefined ? null : deps;
  var prevState = hook.memoizedState;
  if (prevState !== null) {
    if (nextDeps !== null) {
      var prevDeps = prevState[1];
      if (areHookInputsEqual(nextDeps, prevDeps)) {
        return prevState[0];
      }
    }
  }
  hook.memoizedState = [callback, nextDeps];
  return callback;
}

updateCallback就这几行代码,没有删减,代码意图也很简单,如果依赖数组deps没有变化,或者deps=[]的情况下,会返回之前缓存的回调函数,否则就更新对应fiber.memoizedState.hook.memoizedState并返回新的回调函数。

使用场景

就笔者的所见所闻,存在两种极端情况,一种开发者在开发时,不管什么函数,什么数据都喜欢使用useCallbackuseMemo进行一层包裹。还有一种开发者不管什么情况都不会考虑使用useCallbackuseMemo

不用说,这两种做法都是有问题的。第一种做法,还不知道是之所以会出现这样的问题,根本原因还是很多开发者并不明白这两个hook的原理和使用场景。

首先,我们要明确函数组件在每一次更新时,都会执行函数组件,函数组件内部的所有方法,所有值都会重新声明,重新计算。这两个hook的出现就是为了优化这种情况,避免不必要的浪费。而这两个hook的做法就是通过将函数或者值存储在对应的fiber.memoizedState.hook.memoizedState上,在下次更新时,根据依赖项是否变化来决定是否要用缓存值,还是新的传进来的值。

这时候可能有人疑惑既然都会更新,那我全部包裹起来有什么不好?笔者认为都进行包裹主要的问题是,如果一个函数足够简单,从新声明可能性能消耗会比包裹后存储在hook.memoizedState的消耗更小。

这里,笔者根据自己看源码的心得,列举下这两个hook的使用场景:

  • 如果子组件比较复杂,可以考虑使用useCallback进行包裹;
  • 如果函数组件中某个值需要大量的计算才能得出,可以考虑使用useMemo进行包裹;
  • 如果某个函数是子组件的props,可以考虑使用useCallback进行包裹(配合React.memo使用);
  • 自定义hooks中复杂逻辑可以考虑使用useCallbackuseMemo进行包裹;

相关参考视频讲解:传送门

总结

这两个hook原理还是很简单的,因为是系列文章,很多内容和前面文章都重复了,所以导致这篇都没啥能写的了。总结下原理:

这两个hook的做法就是通过将函数或者值存储在对应的fiber.memoizedState.hook.memoizedState上,在下次更新时,根据依赖项是否变化来决定是要用缓存值,还是新的传进来的值。

虽然useCallbackuseMemo是为了优化性能出现的,但是各位看官也不要盲目使用,毕竟这两个hook本身也会带来开销。

看完这篇文章, 我们可以弄明白下面这几个问题:

  • useCallbackuseMemo的区别?
  • useCallbackuseMemo的使用场景有哪些?
  • useCallbackuseMemo是做什么的?
  • useCallbackuseMemo是怎么实现优化性能的?

热身准备

useContext可以帮助我们跨越组件层级直接传递变量,避免了在每一个层级手动的传递 props 属性,实现共享,要配合createContext使用。

createContext

createContext主要功能是创建一个context,提供ProviderConsumerProvider主要将context内容暴露出来,Consumer可以拿到对应contextProvider暴露的内容使用。

示例代码:

export const Context = createContext(null)
<Context.Provider value='initialValue'>
  <Context.Consumer>
    {(v) => {      return <h2>{v}</h2>
    }}  </Context.Consumer>
</Context.Provider>

Provider

<Context.Provider>在渲染时,beginWork阶段,会执行

pushProvider(workInProgress, newValue);

它会将Providerprop上的value字段存到context._currentValue中。

Consumer

<Context.Consumer>在渲染时,beginWork阶段,会执行

prepareToReadContext(workInProgress, renderLanes);
var newValue = readContext(context, newProps.unstable_observedBits);

通过上面代码可以拿到Providerprop上的value

值得注意的是, Consumer标签下包裹的必须是一个函数,如果不是函数会报错。 Consumer会将拿到的value作为函数的参数传入函数中去使用。如同上面示例代码中获取到的v

useContext

useContext需要将createContext创建的Context作为参数进行调用。

值得一提的是,前面讲的hook在初始化和更新时会有两套不同函数执行。但是在useContext只有一个,也就是useContext在初始化和更新时执行的是一套代码。

初始化mount&更新update

useContextmount时主要会调用readContext函数:

function readContext(context, observedBits) {
  var contextItem = {
    context: context,  // 传入的context
    observedBits: resolvedObservedBits,  // 观察范围(默认全部update)
    next: null
  };
  lastContextDependency = contextItem;
  currentlyRenderingFiber.dependencies = {
    lanes: NoLanes,
    firstContext: contextItem,
    responders: null
  };
  } else {
    // Append a new context item.    lastContextDependency = lastContextDependency.next = contextItem;
  }
  return  context._currentValue ;
}

精简了下代码,可以看到,readContext会创建一个contextItem并以链表的结构记录在对应fiber.dependencies上,最后将Providerprop上的value返回。

总结

useContext的原理类似于观察者模式。Provider是被观察者, ConsumeruseContext是观察者。当Provider上的值发生变化, 观察者是可以观察到的,从而同步信息给到组件。

主要使用场景就是多层级组件值的传递,如果值较多可以考虑配合useReducer使用。

看完这篇文章, 我们可以弄明白下面这个问题:

useContext的原理是什么?

到此这篇关于React源码分析之useCallback与useMemo及useContext详解的文章就介绍到这了,更多相关React useCallback useMemo useContext内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 解析React中useMemo与useCallback的区别

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

  • React useCallback详细使用教程

    目录 一.useCallback的作用 二.useRef解决方案 三.useReducer解决方案 四.usePersistFn解决方案 一.useCallback的作用 usecallback不是用来解决组件中有过多内部函数导致的性能问题: 1.我们要知道,js创建一个函数的成本是非常小的,这点计算对于计算机来说是小case 2.其实使用useCallback会产成额外的性能:对deps的判断 3.其实每次组件重新渲染时,都无所谓避免重新创建内部函数,因为即使useCallback的deps没

  • 关于react中useCallback的用法

    目录 基础用法 父组件 子组件 useCallback是react中比较重要的一个hook useCallback 用来返回一个函数,在父子组件传参或者通用函数封装中,起到举足轻重的作用. 基础用法 useCallback的用法与useState的用法基本一致,但最后会返回一个函数,用一个变量保存起来. 返回的函数a会根据b的变化而变化,如果b始终未发生变化,a也不会重新生成,避免函数在不必要的情况下更新. 记得子组件导出时使用memo包裹一下,其作用是对组件前后两次进行浅对比,阻止不必要的更新

  • React 正确使用useCallback useMemo的方式

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

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

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

  • React源码分析之useCallback与useMemo及useContext详解

    目录 热身准备 初始化mount mountCallback 更新 update 使用场景 总结 热身准备 createContext Provider Consumer useContext 初始化mount&更新update 总结 热身准备 useCallback和useMemo是一样的东西,只是入参有所不同. useCallback缓存的是回调函数,如果依赖项没有更新,就会使用缓存的回调函数: useMemo缓存的是回调函数的return,如果依赖项没有更新,就会使用缓存的return:

  • jQuery源码分析之jQuery中的循环技巧详解

    jQuery的源码中有很多值得学习借鉴的技巧,本文即收集了jQuery中出现的各种遍历技巧和场景.具体分析如下: // 简单的for-in(事件) for ( type in events ) { } // 缓存length属性,避免每次都去查找length属性,稍微提升遍历速度 // 但是如果遍历HTMLCollection时,性能提升非常明显,因为每次访问HTMLCollection的属性,HTMLCollection都会内部匹配一次所有的节点 for ( var j = 0, l = ha

  • CentOS 6.6 源码编译安装MySQL 5.7.18教程详解

    一.添加用户和组 1.添加mysql用户组 # groupadd mysql 2.添加mysql用户 # useradd -g mysql -s /bin/nologin mysql -M 二.查看系统中是否安装mysql,如果安装需要卸载 # rpm -qa | grep mysql mysql-libs-5.1.73-3.el6_5.x86_64 # rpm -e mysql-libs-5.1.73-3.el6_5.x86_64 --nodeps 三.安装所需依赖包 # yum -y ins

  • Android源码中常用的接口传参实例详解

    Android源码中常用的接口传参实例详解 把MyCclass中的参数传到MyDclass /*接口传参例子2 * MyCclass.java发送MyDclass.java接收 * 原理和MyAclass.java发送MyDclass.java接收完全一样 * */ public class MyCclass { public void getEditext(GetMyFragmentData myFragmentData){ String edStr="人的生命是有限的,可是为人民服务是无限的

  • Apache源码安装和虚拟主机配置的教程详解

    源码安装Apache 1.上传Apache源码安装所需软件包 2.安装: 安装顺序 apr->apr-util->pcre->httpd 安装编译环境 yum -y install gcc gcc-c++ apr 编译安装 tar xzf apr-1.4.6.tar.gz cd apr-1.4.6 ./configure --prefix=/usr/local/apr make && make install apr-util 编译安装 tar xzf apr-util-

  • Go源码字符串规范检查lint工具strchecker使用详解

    目录 1.背景 2.strchecker介绍 3.结论 1.背景 在大型项目开发过程中,经常会遇到打印大量日志,输出信息和在源码中写注释的情况.对于软件开发来说,我们一般都是打印输出英文的日志(主要考虑软件在各种环境下的兼容性,如果打印中文日志可能会出现乱码,另外英文日志更容易搜索,更容易后续做国际化),但是对于我们中国人来说,很容易就把中文全角的中文标点符号一不注意就写到日志中了.不过源码中的注释因为是完全面向开发者的,不会面向客户,所以如果研发团队全是中国人,那么代码注释用中文就更有效率.

  • 深入解析Vue源码实例挂载与编译流程实现思路详解

    在正文开始之前,先了解vue基于源码构建的两个版本,一个是 runtime only ,另一个是 runtime加compiler 的版本,两个版本的主要区别在于后者的源码包括了一个编译器. 什么是编译器,百度百科上面的解释是 简单讲,编译器就是将"一种语言(通常为高级语言)"翻译为"另一种语言(通常为低级语言)"的程序.一个现代编译器的主要工作流程:源代码 (source code) → 预处理器 (preprocessor) → 编译器 (compiler) →

  • Laravel源码解析之路由的使用和示例详解

    前言 我的解析文章并非深层次多领域的解析攻略.但是参考着开发文档看此类文章会让你在日常开发中更上一层楼. 废话不多说,我们开始本章的讲解. 入口 Laravel启动后,会先加载服务提供者.中间件等组件,在查找路由之前因为我们使用的是门面,所以先要查到Route的实体类. 注册 第一步当然还是通过服务提供者,因为这是laravel启动的关键,在 RouteServiceProvider 内加载路由文件. protected function mapApiRoutes() { Route::pref

  • Swoole源码中如何查询Websocket的连接问题详解

    问题 我们项目的 Websocket Server 使用的 Swoole,最近在搭建 beta 环境的时候发现 Websocket 协议虽然升级成功了,但是会出现定时重连,心跳.数据也一直没有发送.项目的生产环境和 beta 一致,但是生产环境确没有这个问题. 定位问题 为了方便调试 Swoole,以下测试是在本地环境下进行. 查看 PHP 日志 在 PHP 日志里,发现一条错误日志: ErrorException: Swoole\WebSocket\Server::push(): the co

  • ASM源码学习之ClassReader、ClassVisitor与ClassWriter详解

    ASM ASM是Java中比较流行的用来读写字节码的类库,用来基于字节码层面对代码进行分析和转换.在读写的过程中可以加入自定义的逻辑以增强或修改原来已编译好的字节码,比如CGLIB用它来实现动态代理.ASM被设计用于在运行时对Java类进行生成和转换,当然也包括离线处理.ASM短小精悍.且速度很快,从而避免在运行时动态生成字节码或转换时对程序速度的影响,又因为它体积小巧,可以在很多内存受限的环境中使用. ASM的主要优势包括如下几个方面: 1. 它又一个很小,但设计良好并且模块化的API,且易于

随机推荐