标签: React

晚风 | 6天前 | React

深度解析 React 性能优化 API

性能优化一直是前端领域讨论的一个热门问题,但在平时沟通及 code review 过程中发现很多人对于 React 中性能优化理解很模糊,讲不清楚组件什么时候更新,为什么会更新,关于 React 性能优化的文章虽然比较多,但大多数都是在罗列一些优化的点,本文将以 React 底层更新过程为基础,层层递进,将性能优化相关的用法、原理串联起来,让读者真正理解为什么需要性能优化以及如何使用。 更新流程 React 使得前端开发者不再跟 DOM 打交道,只需要控制组件及其状态来完成应用开发。React 在这背后做的最主要的工作就是 保持组件状态与用户界面的一致性 :将组件状态构建成用于描述用户界面的 UI Tree(或者叫 Virtual Dom)并反应到浏览器中,这也是 React 更新的一个最宏观的过程。 我们向下一层,看一下当更新发生时的具体过程。 如下图所示,假设用户蓝色的结点中发生了一次 onClick,对应组件触发了相...

 33 |  0 |  0 React

前端小二 | 1周前 | React

一文带你理解 React 中最“臭名昭著”的 useMemo 和 useCallback

前言 作为一个 React 开发者,如果你一直觉得 useMemo 和 useCallback 这两个 Hook 比较难以理解,那么别害怕,事实上很多人都如此。我和其他公司很多的 React 开发者交流过,大多数对这两个 Hook 都是一知半解的状态。 这篇文章就为你答疑解惑,为大家介绍这两个 Hook 的具体作用,它们的实现原理以及在实际开发中如何应用。 这篇文章更适合初/中级 React 开发者用于加深对 React 的理解,如果你才刚刚开始学习 React ,那么你也可以先将这篇文章收藏起来,在你对 React 有了一定使用经验后再回来学习。 基础概念 我们先从 useMemo 开始介绍,useMemo 的基本概念就是: 它能帮助我们 “记录” 每次渲染之间的计算值 。这句话可能有些抽象,想要理解它需要你对 React 复杂的工作原理有一定的心智模型。所以我们先讲讲 React 的基本工作原理。 React 所做的主要事情是让我们的 UI 与我们的 状态 保持同步,而要实现它们的同步,就需要执行一个叫做 “re-r...

 25 |  0 |  0 React

念旧。 | 1周前 | React

最全的React拖拽排序组件库对比研究

一、用法简介 基于react的拖拽功能,有这么几个比较流行的库: 1. react-dnd 2. react-beautiful-dnd 3. dnd-kit 4. react-sortable-hoc React-dnd (一)基本概念 Backend :后端主要用来抹平浏览器差异,处理 DOM 事件,同时把 DOM 事件转换为 React DnD 内部的 redux action,你可以使用 HTML5 拖拽后端,也可以自定义 touch、mouse 事件模拟的后端实现 Item :用一个数据对象来描述当前被拖拽的元素,例如{ cardId: 42 } Type :类似于 redux 里面的actions types 枚举常量,定义了应用程序里支持的拖拽类型 Monitor: 拖放本质上是有状态的。要么正在进行拖动操作,要么不在。要么有当前类型和当前项目,要么没有,React DnD 通过 Monitor 来存储这些状态并且提供查询 Connector :连接组件和 Backend ,可以...

 79 |  2 |  0 React

蔡文姬 | 3周前 | React

通过 React Router V6 源码,掌握前端路由

在 React 前端项目中,涉及到前端路由,想必大家都用过了 react-router-dom^[1]^ 这个包,因为常用,所以有必要弄清楚其中的实现细节,对前端路由会有一个更深入的认识,另外也有助于提升工作效率。 此文不赘述使用方法,相关内容可以参考tutorial 官方的指导手册 ^[2]^ 。 客户端里的路由模式 相较于“ 服务端路由 ”每次从服务端获取 CSS、JS、HTML 资源,客户端路由即是在客户端内自行控制,与服务端解耦,页面数据异步获取,浏览器无刷新切换页面,能为用户提供更快的页面切换体验,同时也为前端 SPA 应用发展提供了基础。 在浏览器 Web 环境里有 “ Hash ” 和 “ History ” 两种客户端路由模式。 Hash 模式 Hash 模式点击会跳转定位到指定 DOM 位置,同时触发 hashchange 事件,支持在浏览器中操作前进后退,其本质还是在同一文档中操作,Server 端无感知前端路由变化。 Hash 值在 window.location.hash 中存储,因此 Hash 变化...

 69 |  0 |  0 React

渣渣辉 | 6周前 | React

深入理解 React Scheduler 执行过程

本章是手写 React Scheduler 源码系列的第二篇文章,第一篇查看哪些 API 适合用于任务调度。React Scheduler 是 react 提供的一个可以独立使用的包,可以单独使用。由于 React 官网对于这个包的用法介绍较少,因此本章全面介绍 react scheduler 的基本用法,熟练使用可以为后续手写源码奠定坚实的基础。 学习目标 scheduler 基础用法 高优先级任务如何插队 长任务如何切片 任务切片如何中途取消 任务过期 本章 demo 几乎涵盖了 Scheduler 所有的用法,如果能理清所有 demo 的输出顺序,那恭喜你已经掌握了 Scheduler 的用法 准备工作 新建 html 文件,用于测试 scheduler 的用法,如无特别说明,本节将使用下面的printA、printB、printC、printD、printE方法 <!DOCTYPE html <html lang="en" <head <meta charset="utf-8" / <title

 173 |  0 |  0 React

客栈小K | 2022-11-26 | 前端相关React

React 框架 | 深入剖析 Scheduler 原理

关键词:react react-scheduler scheduler 时间切片 任务调度 workLoop 背景 本文所有关于 React 源码的讨论,基于 React v17.0.2 版本。 文章背景 工作中一直有在用 React 相关的技术栈,但却一直没有花时间好好思考一下其底层的运行逻辑,碰巧身边的小伙伴们也有类似的打算,所以决定组团卷一波,对 React 本身探个究竟。 本文是基于众多的源码分析文章,加入自己的理解,然后输出的一篇知识梳理。如果你也感兴趣,建议多看看参考资料中的诸多引用文章,相信你也会有不一样的收获。 本文不会详细说明 React 中 react-reconciler 、 react-dom 、fiber 、dom diff、lane 等知识,仅针对 scheduler 这一细节进行剖析。 知识点背景 在我尝试理解 React 中 Scheduler 模块的过程中,发现有很多概念理解起来比较绕,也是在不断问自己为什么的过程中,发现如果自顶向下的先有一些基本的认知,再深入理解 Scheduler 在 Reac...

 400 |  0 |  0 前端相关React

客栈小K | 2022-11-09 | 算法Vue前端相关React

信仰崩了?Preact 开始采用 Vue3 的响应式设计

前言 不知大家有没有听过 Preact 这个框架,就算没听过 Preact 那也应该听过 React 吧? 一字之差, preact 比 react 多了个 p !(听起来咋不像啥好话呢) 这个 P 代表的是 Performance , 高性能版React 的意思。 Preact 一开始是 CodePen 上的一个小项目,有点类似于咱们国内常见的 《三百行代码带你实现个React》 这类文章,用最少的代码实现了 React 的最基本功能,然后放到 CodePen 上供大家 敬仰 学习。 当然这是很多年前的事了,那时候这种东西很容易火,想想 N 年前你看过的第一篇 《三百行实现个Vue》 、 《三百行实现个React》 之类的文章是不是竞争对手很少、很容易引发大量的关注度。不过现在不行了,太卷!这类文章隔三差五的就能看到一篇,同质化严重,导致大家都有点审美疲劳了。 但在那个年代 Preact 就是这么火起来的,三百行实现了个 React 引发大量关注度之后,作者觉得自己做的这玩意好像还挺不错的哈!于是开始继续完善,完善后拿去一测试:性能简直完...

 333 |  0 |  0 算法Vue

HZFEStudio | 2022-07-01 | Vue前端相关React

框架:谈谈 React 和 Vue 的区别

回答关键点 推模型与拉模型 模板与 JSX React 和 Vue 同为现代化的 Web 前端开发框架。相同之处都是采用数据驱动视图的思想,以虚拟 DOM 为基础,以组件化的方式组织应用,让开发者无需关心 DOM 细节,从更高的层次设计应用。不同之处在于,具体组件的编写方式(template vs jsx),数据响应模型以及具体的生态。 知识点深入 1\. 开发体验的区别 学习曲线 Vue:旨在降低前端开发门槛,学习曲线平缓,对了解 HTML、CSS 及 JS 的传统模式的前端开发和后端开发人员更友好。 React:传播自身的概念和思想,需要了解 JSX 的相关知识,组件中的一切都可以通过 JavaScript 灵活控制,上手成本相较于 Vue 来说略高。 JSX 与模板语法 Vue:默认使用基于 HTML 的模板语法,将模板、样式及逻辑划分开来使关注点分离。也可以选配 JSX 支持。 React:默认使用 JSX 编写组件,将 HTML 和 CSS 组合到 JavaScript 中。在选用 Typ...

 550 |  0 |  0 Vue前端相关

HZFEStudio | 2022-07-01 | 前端相关React

框架:React 事件机制原理

相关问题 React 合成事件与原生 DOM 事件的区别 React 如何注册和触发事件 React 事件如何解决浏览器兼容问题 回答关键点 React 的事件处理机制可以分为两个阶段:初始化渲染时在 root 节点上注册原生事件;原生事件触发时模拟捕获、目标和冒泡阶段派发合成事件。通过这种机制,冒泡的原生事件类型最多在 root 节点上注册一次,节省内存开销。且 React 为不同类型的事件定义了不同的处理优先级,从而让用户代码及时响应高优先级的用户交互,提升用户体验。 React 的事件机制中依赖合成事件这个核心概念。合成事件在符合 W3C 规范定义的前提下,抹平浏览器之间的差异化表现。并且简化事件逻辑,对关联事件进行合成。如每当表单类型组件的值发生改变时,都会触发 onChange 事件,而 onChange 事件由 change、click、input、keydown、keyup 等原生事件组成。 知识点深入 1\. 原生事件和合成事件 JavaScript 通过事件可以和 DOM 进行交互。 1.1 原生事件...

 505 |  1 |  0 前端相关React

HZFEStudio | 2022-07-01 | 前端相关React

框架:React Hooks 实现原理

相关问题 React Hooks 是什么 React Hooks 是怎么实现的 使用 React Hooks 需要注意什么 回答关键点 闭包 Fiber 链表 Hooks 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。 Hooks 主要是利用闭包来保存状态,使用链表保存一系列 Hooks,将链表中的第一个 Hook 与 Fiber 关联。在 Fiber 树更新时,就能从 Hooks 中计算出最终输出的状态和执行相关的副作用。 使用 Hooks 的注意事项: 不要在循环,条件或嵌套函数中调用 Hooks。 只在 React 函数中调用 Hooks。 知识点深入 1\. 简化实现 [React Hooks 模拟实现](https://codesandbox.io/s/hopeful-williams-id7ey?file=/src/index.js) 该示例是一个 React Hooks 接口的简化模拟实现,可以实际运...

 486 |  0 |  0 前端相关React

HZFEStudio | 2022-06-30 | 前端相关React

框架:React Fiber 的作用和原理

相关问题 Fiber 是什么 谈谈你对 Fiber 的了解 Fiber 对 React 的使用带来了什么影响 回答关键点 调度 深度优先遍历 Fiber 是 React 16 中采用的新协调(reconciliation)引擎,主要目标是支持虚拟 DOM 的渐进式渲染。 Fiber 将原有的 Stack Reconciler 替换为 Fiber Reconciler,提高了复杂应用的可响应性和性能。主要通过以下方式达成目标: 对大型复杂任务的分片。 对任务划分优先级,优先调度高优先级的任务。 调度过程中,可以对任务进行挂起、恢复、终止等操作。 Fiber 对现有代码的影响: 由于 Fiber 采用了全新的调度方式,任务的更新过程可能会被打断,这意味着在组件更新过程中,render 及其之前的生命周期函数可能会调用多次。因此,在下列生命周期函数中不应出现副作用。 shouldComponentUpdate React 16 中已经声明废弃的钩子 componentWillMo...

 508 |  0 |  0 前端相关React