React学习手册
文章平均质量分 92
优价实习
开发工程师,各种求职技巧分享与你!
展开
-
【React 源码】如何以及为什么React Fiber使用链表遍历组件树
正文。原创 2022-09-14 10:26:14 · 415 阅读 · 1 评论 -
【React源码】(十八)React 算法之调和算法
本节介绍了 React 源码中,fiber构造循环阶段用于生成下级子节点的函数(函数中的算法被称为调和算法), 并演示了可迭代节点比较的图解示例. 该算法十分巧妙, 其核心逻辑把newChildren序列分为 2 步遍历, 先遍历公共序列, 再遍历非公共部分, 同时复用oldFiber序列中的节点....原创 2022-08-26 16:47:23 · 302 阅读 · 0 评论 -
【React源码】(十七)React 算法之深度优先遍历
由于react内部使用了和fiber两大树形结构, 所以有不少关于节点访问的逻辑.本节主要介绍了DFS的概念和它在react源码中的使用情况. 其中fiber树的DFS遍历, 涉及到的代码多, 分布广, 涵盖了reconciler阶段的大部分工作, 是reconciler阶段工作循环的核心流程.除了DFS之外, 源码中还有很多逻辑都是查找树中的节点(如: 向上查找父节点等). 对树形结构的遍历在源码中的比例很高, 了解这些算法技巧能够更好的理解react源码....原创 2022-08-26 16:43:08 · 490 阅读 · 0 评论 -
【React源码】(十六)React 合成事件
从架构上来讲,打通了从外部原生事件到内部fiber树的交互渠道, 使得react能够感知到浏览器提供的原生事件, 进而做出不同的响应, 修改fiber树, 变更视图等.监听原生事件: 对齐DOM元素和fiber元素收集listeners: 遍历fiber树, 收集所有监听本事件的listener函数.派发合成事件: 构造合成事件, 遍历listeners进行派发....原创 2022-08-26 16:40:18 · 385 阅读 · 1 评论 -
【React 源码】(十五)React Context 原理
Context的实现思路还是比较清晰, 总体分为 2 步.在消费状态时,节点调用获取最新状态.在更新状态时, 由节点负责查找所有节点, 并设置消费节点的父路径上所有节点的, 保证消费节点可以得到更新.原创 2022-08-26 16:25:57 · 626 阅读 · 0 评论 -
【React源码】(十四)Hook 原理(副作用 Hook)
本节分析了副作用Hook从创建到销毁的全部过程, 在react内部, 依靠和effect.tag实现了对effect的精准识别. 在commitRoot阶段, 对不同类型的effect进行处理, 先后调用和。原创 2022-08-26 16:22:53 · 463 阅读 · 0 评论 -
【React源码】(十三)Hook 原理(状态 Hook)
本节深入分析状态Hook即useState的内部原理, 从同步,异步更新理解了update对象的合并方式, 最终结果存储在供给function使用.原创 2022-08-25 15:20:09 · 890 阅读 · 0 评论 -
【React源码】(十三) Hook 原理(概览)
本节首先引入了官方文档上对于Hook的解释, 了解Hook的由来, 以及Hook相较于class的优势. 然后从fiber视角分析了fiber与hook的内在关系, 通过函数, 把Hook链表挂载到了之上. 利用fiber树内部的双缓冲技术, 实现了Hook从current到转移, 进而实现了Hook状态的持久化.原创 2022-08-25 15:16:09 · 1041 阅读 · 0 评论 -
【React源码】(十二)Hook源码分析 状态与副作用
本节从fiber视角出发, 总结了fiber节点中可以影响最终渲染结果的 2 类属性(状态和副作用).并且归纳了class和function组件中, 直接或间接更改fiber属性的常用方式. 最后从fiber树构造和渲染的角度对class的生命周期函数与function的Hooks函数进行了比较.原创 2022-08-25 15:10:51 · 328 阅读 · 0 评论 -
【React源码】(十一)fiber 树渲染
本节分析了fiber 树渲染的处理过程, 从宏观上看fiber 树渲染位于reconciler 运作流程中的输出阶段, 是整个reconciler 运作流程的链路中最后一环(从输入到输出). 本节根据源码, 具体从渲染前, 渲染, 渲染后三个方面分解了函数. 其中最核心的渲染逻辑又分为了 3 个函数, 这 3 个函数共同处理了有副作用fiber节点, 并通过渲染器react-dom把最新的 DOM 对象渲染到界面上.原创 2022-08-25 15:08:11 · 466 阅读 · 0 评论 -
【React源码】(十)fiber 树构造(对比更新)
本节演示了更新阶段fiber树构造(对比更新)的全部过程, 跟踪了创建过程中内存引用的变化情况. 与初次构造最大的不同在于fiber节点是否可以复用, 其中bailout逻辑是fiber子树能否复用的判断依据.原创 2022-08-24 11:30:11 · 394 阅读 · 0 评论 -
【react 源码】(九)fiber 树构造(初次创建) 难 难 难
本节演示了初次创建fiber树的全部过程, 跟踪了创建过程中内存引用的变化情况.fiber树构造循环负责构造新的fiber树, 构造过程中同时标记, 最终把所有被标记的fiber节点收集到一个副作用队列中, 这个副作用队列被挂载到根节点上(). 此时的fiber树和与之对应的DOM节点都还在内存当中, 等待commitRoot阶段进行渲染.原创 2022-08-24 11:21:29 · 508 阅读 · 0 评论 -
【React 源码】(八)fiber 树构造(基础准备)
本节是fiber树构造的准备篇, 首先在宏观上从不同的视角(任务调度循环,fiber树构造循环)介绍了fiber树构造在React体系中所处的位置, 然后深入包分析fiber树构造过程中需要使用到的全局变量, 并解读了双缓冲技术和优先级(车道模型)的使用, 最后解释栈帧管理的实现细节. 有了这些基础知识,fiber树构造的具体实现过程会更加简单清晰.原创 2022-08-24 11:07:09 · 541 阅读 · 0 评论 -
【React源码】(七)React 调度原理(scheduler)
本节主要分析了scheduler包中调度原理, 也就是React两大工作循环中的任务调度循环. 并介绍了时间切片和可中断渲染等特性在任务调度循环中的实现.scheduler包是React运行时的心脏, 为了提升调度性能, 注册task之前, 在包中做了节流和防抖等措施.原创 2022-08-23 14:55:17 · 868 阅读 · 0 评论 -
【React源码】(六)React 中的优先级管理
本文介绍了 react 源码中有关优先级的部分, 并梳理了 3 种优先级之间的区别和联系. 它们贯穿了reconciler 运作流程中的 4 个阶段, 在 react 源码中所占用的代码量比较高, 理解它们的设计思路, 为接下来分析调度原理和fiber构造打下基础.原创 2022-08-23 14:46:06 · 802 阅读 · 0 评论 -
【React 源码】(五)React 应用的启动过程
本章节介绍了react应用的 3 种启动方式. 分析了启动后创建了 3 个关键对象, 并绘制了对象在内存中的引用关系. 启动过程最后调用进入包,进而调用函数, 与reconciler运作流程中的输入阶段相衔接.原创 2022-08-22 15:55:54 · 1250 阅读 · 0 评论 -
【React 源码】(四)reconciler 运作流程
本节从宏观上分析了reconciler 运作流程, 并将其分为了 4 个步骤, 基本覆盖了包的核心逻辑.原创 2022-08-22 15:49:57 · 356 阅读 · 0 评论 -
【react源码】(三)React 应用中的高频对象
本章主要浏览了 react 运行链路中出现的高频对象, 并对它们的数据结构做出了单独解释. 提前了解这些对象的数据结构, 更加有利于之后对 react 源码的深入分析. 在后续对整个运行核心的解读中会多次引用到这些对象, 并对其在运行时的具体作用深入解读....原创 2022-08-19 10:11:23 · 529 阅读 · 0 评论 -
【React源码】(二)React 工作循环 (workLoop)
本节从宏观角度描述了react源码中的两大工作循环. 通过这两个大循环概括出react运行的主干逻辑.和Scheduler包代码量多且逻辑复杂, 但实际上大部分都是服务于这个主干. 了解这两大循环, 更容易理解react的整体运行链路....原创 2022-08-19 10:04:02 · 433 阅读 · 0 评论 -
【React源码】(一)React 应用的宏观包结构(web 开发)
React 工程目录的 packages 下包含 35 个包(@17.0.2版本). 其中与web开发相关的核心包共有 4 个, 本系列近 20 篇文章, 以这 4 个包为线索进行展开, 深入理解 react 内部作用原理.原创 2022-08-17 20:10:06 · 470 阅读 · 1 评论 -
useState 原理详解
useState 的原理一点也不复杂,我也会努力,让只要使用过 React 的人,就能看明白。Anyway,今天就让我来带大家阅读一下它的源码,一块梳理一下 useState 的原理吧!原创 2022-08-16 17:41:54 · 2993 阅读 · 3 评论 -
react-useMemo/useCallback/memo使用
react提供useMemo/useCallback/memo方法,提高页面刷新效率。若组件依赖的属性没有发送变化,组件可以不刷新。以下提供两个场景的具体使用单组件内使用使用语法import React, { useMemo } from 'react'useMemo(() => {}, [] ) 1.useMemo第一个参数是函数,第二个参数是数组 2.如果第二个参数不传递,与useEffect类似,意味着每次都会执行第一个函数参数,则使用useMem就毫无意义 3.如果第原创 2021-11-12 17:24:38 · 1732 阅读 · 0 评论 -
代码格式化工具:具体访问:
前端代码格式化实践 eslint + prettier:优加实习需求背景多人合作开发需要对代码格式进行规范,为了方便和统一我们可以借助前端代码格式化工具,可以借助eslint来规定代码规范,prettier进行代码格式化。实践(vue项目)vscode配置setting.json文件,写入下面规则,在保存代码时自动格式化代码 { "editor.formatOnSave": true } 复制代码安装相关依赖(具体用处之后补充)npm i eslint es原创 2021-09-15 14:21:59 · 287 阅读 · 0 评论 -
代码规范工具ESlint你必须知道!
什么是 ESLint ?ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具,它的目标是保证代码的一致性和避免错误。在许多方面,它和 JSLint、JSHint 相似,除了少数的例外:ESLint 使用 Espree 解析 JavaScript。 ESLint 使用 AST 去分析代码中的模式 ESLint 是完全插件化的。每一个规则都是一个插件并且你可以在运行时添加更多的规则。以上来自官网。不想再说下去,反正就是一个代码风格检测工具就对了如何原创 2021-09-15 14:15:53 · 630 阅读 · 0 评论 -
React&&Vue 怎么正确使用Key
在开发react程序时我们经常会遇到这样的警告,然后就会想到:哦!循环子组件忘记加key了~出于方便,有时候会不假思索的使用循环的索引作为key,但是这样真的好吗?什么样的值才是key的最佳选择?为了弄明白,本文将从三个方面来分析"key":1.为什么要使用key2.使用index做key存在的问题3.正确的选择key1.为什么要使用keyreact官方文档是这样描述key的:Keys可以在DOM中的某些元素被增加或删除的时候帮助React识别哪些元素发...原创 2021-09-15 10:56:32 · 162 阅读 · 0 评论 -
三.React之组件 & Props
组件 & Props组件允许你将 UI 拆分为独立可复用的代码片段,并对每个片段进行独立构思。本指南旨在介绍组件的相关理念。你可以参考详细组件 API。组件,从概念上类似于 JavaScript 函数。它接受任意的入参(即 “props”),并返回用于描述页面展示内容的 React 元素。函数组件与 class 组件定义组件最简单的方式就是编写 JavaScript 函数:function Welcome(props) { return <h1>Hello, {原创 2021-07-08 17:00:15 · 250 阅读 · 0 评论 -
一.React之 JSX简介
为什么使用 JSX?React 认为渲染逻辑本质上与其他 UI 逻辑内在耦合,比如,在 UI 中需要绑定处理事件、在某些时刻状态发生变化时需要通知到 UI,以及需要在 UI 中展示准备好的数据。React 并没有采用将标记与逻辑进行分离到不同文件这种人为地分离方式,而是通过将二者共同存放在称之为“组件”的松散耦合单元之中,来实现关注点分离。我们将在后面章节中深入学习组件。如果你还没有适应在 JS 中使用标记语言,这个会议讨论应该可以说服你。React不强制要求使用 JSX,但是大多数人发现,在.原创 2021-07-08 16:33:07 · 230 阅读 · 0 评论