标签: 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
2 解决
27 阅读

React.memo() 和 useMemo() 的用法是什么，有哪些区别？

前端相关React

2 回答
19 阅读

React 组件间怎么进行通信？

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
3 解决
100 阅读

React 中的路由懒加载是什么？原理是什么？

前端相关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
1 回答
223 阅读

react

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