react Hooks（useRef、useMemo、useCallback）实现原理

已于 2023-12-09 11:40:55 修改
阅读量1k 收藏 8
点赞数 7
分类专栏： react 文章标签： react.js 前端 前端框架
于 2023-12-08 17:06:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/xbczrz/article/details/134881749
版权
本文介绍了React Hooks中的useRef、useMemo和useCallback的实现原理，它们基于Fiber架构，在commit阶段处理。useRef创建可变ref对象，useMemo缓存计算结果，useCallback缓存函数，数据存储在fiber的memoizedState链表上。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

Fiber

上篇文章fiber简单理解记录了react fiber架构，Hooks是基于fiber链表来实现的。阅读以下内容时建议先了解react fiber。

jsx -> render function -> vdom -> fiber树 -> dom

vdom 转 fiber 的过程称为 recocile。diff算法就是在recocile这个过程中实现。

经过 reconcile 生成新的fiber树。这时候还没有处理副作用（hooks、生命周期等）,这些会在reconcile 结束之后处理。

react渲染分为两个阶段：render 和 commit。

render：指 vdom -> fiber 的过程
commit: 指 fiber -> dom 具体操作dom以及执行副作用函数的过程。其包含了三个小阶段：before mutation、mutation（真实操作dom）、 layout。

Hooks

hooks是在哪个阶段处理呢？ commit fiber -> dom
hooks的数据保存在哪里呢？ fiber 的 memoizedState 链表上存取数据。
是什么时候构造这个链表呢？ 在第一次调用 useXxx 的时候

一、 useRef

语法：const refContainer = useRef(initialValue);
作用：useRef 返回一个可变的 ref 对象&

最低0.47元/天 解锁文章
05｜深入理解useRef
小陈的博客
09-22 2296
OK，这一节我们结合useState，useEffect来讲useRef。主要讲了如下内容1.介绍了useRef的使用场景2.跨组件需要配合forwardRef来传递ref3.父组件想要调用子组件内部的数据需要子组件通过来暴露。4.通过分析一个面试题来解决问题，最后还将其封装成了一个自定义hook为大家准备了一个前端资料包。包含54本，2.57G的前端相关电子书，《前端面试宝典（附答案和解析）》，难点、重点知识视频教程（全套）。有需要的小伙伴，可以点击下方卡片领取，无偿分享。
react中的useCallback、useMemo、useRef 和 useContext
最新发布
huhudeni的博客
08-23 1278
上一个文章中我们讲述了useState 和 useEffect 这两个最为核心的 Hooks 的用法。理解了它们，基本上就掌握了 React 函数组件的开发思路。在 React 函数组件中，每一次 UI 的变化，都是通过重新执行整个函数来完成的，这和传统的 Class 组件有很大区别：函数组件中并没有一个直接的方式在多次渲染之间维持一个状态。在第 2 节课中你已经知道了，React 组件之间的状态传递只有一种方式，那就是通过 props。这就意味着这种传递关系只能在父子组件之间进行。
浅谈React中useRef的原理及实现
大口喝脉动的博客
12-08 2591
useRef的用法 初始化：constcount=useRef(0) 读取：count.current 特点：useRef返回一个可变的ref对象（每次渲染时都会返回一个相同的引用，引用地址不会发生变化），其.current属性被初始化为传入的参数（initialValue）。返回的ref对象在组件的整个生命周期内保持不变。 useRef能够拿到最新的.current里的值。我们举个例子来看一下。 import { u...
React中useCallback和useMemo的原理
attengtiong的博客
03-02 1262
为了减少组件渲染，我们可以优化，设置组件的属性变了才重新渲染，如果没变则不渲染。 useMemo 减少对象创建的次数 useCallback 减少函数创建的次数 useCallback 的原理 function Child(props) { console.log('Child'); return ( <button onClick={props.handle}>子：</button> ) } // memo：如果你想让一个函数组件有一个功能，如果属性不变.
使用 useMemo,useCallback，Reat.memo() 处理不必要的子组件渲染，以及它的实现原理
冲锋
06-24 1057
场景1- 演示一个子组件更新 父组件中一个输入框， 输入值，父组件更新， 同时引入子组件，但子组件也会跟着更新 import React, { useState } from "react"; import ReactDOM from "react-dom"; // 子组件 function Bpp() { console.log("%c Bpp render", "color:green"); return ( <> <div&g
【React Hooks原理 - useRef】
weixin_44273311的博客
07-12 1386
从基本使用、使用场景、原理分析，根据源码一步一步介绍了useRef的原理
React Hook 入门到精通（ useState | useReduce、useEffect、useContext、useRef、useCallback | useMemo ）
weixin_38300263的博客
09-12 1680
Hook是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。 useState | useReduce 的使用 import React, { useState, useReducer } from 'react' // 创建reduce const ageReduce = (state, action) => { switch (action.type) { case 'add': retur.
浅析React Hooks原理
weixin_50964668的博客
08-22 2869
React Hooks 简介 React Hooks 是 React 16.8 以及之后版本的产物，React Hooks 就是一堆钩子函数，不同的钩子函数提供了不同的功能，React 通过这些钩子函数对函数型组件进行增强。Hooks 允许你在不编写 class 的情况下使用状态(state)和其他 React 特性。 你还可以构建自己的 Hooks, 跨组件共享可重用的有状态逻辑。 践行代数效应 React 核心成员 Sebastian Markbåge (Hooks 的发明者)曾说：我们在 React
React.useMemo、React.useCallback 配合实现性能优化
显磊的博客
11-03 1420
React.useMemo、React.useCallback 配合实现性能优化   我想,用 React 写项目的程序员都明白实现 React 性能优化的一大方式就是减少不必要的组件更新,在 Class 组件里面减少不必要的组件更新方式之一就是利用 shouldComponentUpdate 钩子函数。而在 React hooks 里面并没有此类函数,要想实现类似的功能,就需要 useMemo 和 useCallback 配合来实现。 ...
第七章 React Hooks之useRef、useMemo、useCallback
Etc.End的博客
12-07 1453
useRef、useMemo、useCallback这些React Hook在我们开发过程中都具有重要的意义。useRef是一个用于保存组件内部可变数据的Hook。通过使用useRef，我们可以在组件渲染周期内保存数据，并在组件重新渲染时保持数据不变。这在一些场景中非常有用，例如记录上一次渲染的一些值，或者在组件生命周期中保持一些状态的不变性。useMemo是一个用于优化性能的Hook。在复杂的React应用中，我们可能会遇到组件频繁重新渲染的情况，这可能会导致应用性能下降。
浅谈useMemo、useCallbac的原理及实现
大口喝脉动的博客
12-08 3157
在我理解useMemo和useCallback是负责缓存优化的。 我最开始讲到react组件有个机制：当父组件任何变动的情况下，子组件都会被重新渲染，即使prop所依赖的值没有发生变化。 在类组件中，我们通常在shouldComponentUpdate中进行判断是否更新。但是在函数组件中没有shouldComponentUpdate。这意味着函数组件的每一次调用都会执行其内部的所有逻辑，那么会带来较大的性能损耗。因此useMemo和useCallback就是...
useCallback详解
liangzhenmeng的博客
03-21 7443
首先，useCallback适用于纯函数，即函数的输入和输出完全确定，不会受到外部环境的影响。最后，使用useCallback时，需要确保缓存的函数能够在组件的生命周期内保持稳定。而使用useCallback来缓存状态更新函数，可以确保在多次更新时，只需调用一次缓存内的函数，从而提高性能。最后，在使用useCallback时，需要确保缓存的函数能够在组件的生命周期内保持稳定，否则可能会导致意外的行为。在React中，useCallback是一个强大的Hook，它允许我们在组件中缓存函数，从而提高性能。
【React Hooks原理 - useCallback、useMemo】
weixin_44273311的博客
07-05 1926
从源码出发结合图文梳理了useCallback、useMemo这两个hook的基本原理和使用，以及解决了什么类型的问题
浅谈useCallback函数
庸人方自扰，自在就好
06-07 9232
useCallback 是 React 提供的一个 Hook 函数，用于缓存需要在组件中多次调用的回调函数。它接受两个参数：回调函数和依赖数组。当依赖数组中的任何一个值发生变化时，useCallback 将会返回一个新的回调函数，否则将会返回之前缓存的回调函数。这样可以避免在每次渲染时都重新生成回调函数，从而提高组件的性能。useCallback 是 React 中一个非常有用的 Hook 函数，可以帮助我们缓存需要在组件中多次调用的回调函数。
react Hooks 之 useRef
见贤思齐
03-27 1726
1.useRef是什么 2.为什么要用useRef（为什么重要） 3.useRef如何使用 4.什么情况下可以使用useRef 5.useRef使用到什么程度就可以了
React 的源码与原理解读（十三）：Hooks解读之二 useRef
weixin_46463785的博客
05-12 2203
这个章节主要讲解React 的 useRef 这个 api，我们将从使用和源码两个角度来讲它，介绍它作为组件的全局变量和 DOM 引用两个场景下的使用和源码挂载，以及 React 一个和引用相关的 api —— forwardRef
useMemo
楠姐的博客
10-31 448
简介 优化函数组件的重渲染问题，是判断组件中的函数逻辑是否重新执行，用来优化性能。 function Parent({ a, b }) { // 只有 a 变化的时候 child1 才会重新渲染 const child1 = useMemo(() => <Child1 a={a} />, [a]); // 只有 b 变化的时候 child2 才会重新渲染 const child2 = useMemo(() => <Child2 b={b} />, [b
react中useRef详细总结
热门推荐
aliven1的博客
09-17 2万+
一、什么是useRef const refContainer = useRef(initialValue); 1 返回一个可变的 ref 对象，该对象只有个 current 属性，初始值为传入的参数( initialValue )。返回的 ref 对象在组件的整个生命周期内保持不变当更新 current 值时并不会 re-render ，这是与 useState 不同的地方更新 useRef 是 side effect (副作用)，所以一般写在 useEffect 或 event handler 里us
react的hooks之useCallback与useMemo
usernameID007的博客
07-22 431
react性能优化，常用的hooks，useCallBack，useMemo，组件优化
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值