- 博客(119)
- 收藏
- 关注
RSS订阅原创 React 第三十六章 Scheduler 任务调度
用于在 React 应用中进行任务调度。它可以帮助开发人员在处理复杂的任务和操作时更好地管理和优化性能。关于 Scheduler 在React 如何渲染的可以参考下面我们根据流程图先简单的了解 Scheduler 的调度过程Scheduler 维护两个队列，分别存放普通任务和延时任务当接收的是普通任务时，会加入普通任务队列，然后执行。根据环境创建宏任务（主要创建的就是），然后执行。该方法实际上主要就是在调用。
2024-05-15 09:50:56
721
原创 浏览器API Performance
将浏览器的资源 timing 缓冲区的大小设置为 “resource” type performance entry 对象的指定数量。从浏览器的性能数据缓冲区中移除所有 entryType 是 “resource” 的 performance entries。在浏览器的指定 start mark 和 end mark 间的性能输入缓冲区中创建一个指定的 timestamp。基于给定的 name 和 entry type 返回一个 PerformanceEntry 对象的列表。性能条目特定于执行上下文。
2024-05-15 09:50:21
407
原创 DOMHighResTimeStamp double 类型的时间计量类
类型在 JavaScript 中并没有明确的类型声明（因为它是作为 Number 类型传递的），但你可以将其视为一个表示高精度时间戳的数值。在大多数浏览器中，这个时间戳的精度可以达到微秒级，但具体的精度可能因浏览器和硬件而异。是从某个不确定的过去时间点（通常是页面加载或页面导航开始的时间）到当前的时间的差值，以毫秒为单位，并且具有微秒级的精度。类型的时间计量类，它用于存储毫秒级的时间值，并且精确到5微秒（0.005 ms）。方法时，需要传入一个回调函数作为参数，这个回调函数会在浏览器下一次重绘之前执行。
2024-05-14 10:00:47
904
原创 JavaScript API MessageChannel 多线程异步通信
提供了一种可靠、高效的异步(宏任务)通信方式，可以用于多个线程之间的数据传输和协作，特别适用于复杂的交互和并行处理场景。使用 MessageChannel 可以方便地实现一些功能，例如主线程和 Web Worker 之间的任务分发、主线程和 Service Worker 之间的数据同步等。它允许创建一个双向的通信通道，用于发送和接收消息。，开发者可以创建一个通信端口，通过端口发送消息，并监听来自另一个端口的消息。用来监听，当消息到达时，会进行处理。之间建立通信，也可以在主线程和。
2024-05-14 10:00:27
638
原创 浏览器 API requestIdleCallback
根据研究报告表明，用户操作之后，100ms以内的响应给用户的感觉都是瞬间发生，也就是说不会感受到延迟感，因此将空闲时间设置为 50，浏览器依然还剩下 50ms 可以处理用户的操作响应，不会让用户感到延迟。
2024-05-13 16:54:30
579
原创 React 第三十五章 Fiber 双缓冲
Wip Fiber Tree 在内存中完成更新，而 Current Fiber Tree 是最终要渲染的树，两颗树通过 alternate 指针相互指向，这样在下一次渲染的时候，直接复用 Wip Fiber Tree 作为下一次的渲染树，而上一次的渲染树又作为新的 Wip Fiber Tree，这样可以加快 DOM 节点的替换与更新。显卡分为前缓冲区和后缓冲区。点击 p 元素，会触发更新，这一操作就会开启 update 流程，此时就会生成一颗新的 wip Fiber Tree，流程和之前是一样的。
2024-05-13 16:54:22
600
原创 React 第三十四章 React 渲染流程
注意上面 render 阶段的工作是在内存里面进行的，不会更新宿主环境 UI，因此这个阶段即使工作流程反复被中断，用户也不会看到“更新不完整的UI”。当 Scheduler 调度完成后，将任务交给 Reconciler，Reconciler 就需要计算出新的 UI，最后就由 Renderer进行渲染更新操作。
2024-05-12 09:12:37
966
原创 React 第三十三章 React架构
标准且浅显的回答Stack 架构在进行虚拟 DOM 树比较的时候，采用的是递归，计算会消耗大量的时间，新的 Fiber 架构采用的是链表，可以实现时间切片，防止 JS 的计算占用过多的时间从而导致浏览器出现丢帧的现象。从 React v16 开始，React 重构了整体的架构，新的架构被称之为 Fiber 架构，之前的架构称之为 Stack 架构。新的架构相比旧架构有一个最大的特点就是能够实现时间切片。新架构的出现必定是为了解决旧架构存在的问题，下面我们来讨论旧架构的问题。
2024-05-12 09:12:00
933
原创 React 第三十二章 虚拟DOM
面试题：什么是虚拟DOM？其优点有哪些？虚拟dom本质上就是一个普通的 JS 对象，用于描述视图的界面结构虚拟 DOM 最早是由 React 团队提出来的，因此 React 团队在对虚拟 DOM 的定义上面有绝对的话语权。可以参考。在这个概念里， UI 以一种理想化的，或者说“虚拟的”表现形式被保存于内存中。也就是说，只要我们有一种方式，能够将真实 DOM 的层次结构描述出来，那么这就是一个虚拟 DOM。在 React 中，React 团队使用的是 JS 对象来对 DOM 结构进行一个描述。
2024-05-11 09:34:19
850
原创 React 第三十一章 前端框架的分类
自变量的变化，导致 UI 因变量变化return (自变量的变化，导致无副作用的因变量发生变化return (自变量的变化，导致有副作用的因变量发生变化return (
2024-05-11 09:33:47
899
原创 React 第三十章 React 和 Vue 描述页面的区别
标准且浅显的回答：React 中使用的是 JSX，Vue 中使用的是模板来描述界面。
2024-05-10 10:15:03
1183
原创 React 第二十九章 前端框架
首先我们考虑一下或者究竟是库（library）还是框架（framework）？当应用进一步的扩展，从简单的页面升级为了，此时意味着需要前端要有前端路由方案，例如：随着应用复杂度的进一步提升，组件的数量越来越多，状态管理越来越复杂，因此就需要状态管理的库，例如：。我们发现，除了上面提到这些功能以外，还有很多其他的功能（构建支持、数据流方案、文档工具）。和本身其实是不支持的，所以说和在平时我们经常能够听到“”这样的说法，这个时候所指的或者往往指的是整个。
2024-05-10 10:13:54
458
原创 React 第二十八章 Hook useMemo
useMemo函数可以用于缓存计算结果，以避免不必要的重复计算。在React的函数组件中，当组件重新渲染时，函数组件内的所有代码都会重新执行。有些计算可能是非常消耗资源的，例如进行复杂的计算或进行网络请求。如果这些计算的结果在组件重新渲染时保持不变，那么就没有必要在每次重新渲染时重新计算。这时，可以使用useMemo来缓存计算结果。useMemo接受两个参数，第一个参数是一个函数，用于进行计算；第二个参数是一个数组，用于指定依赖项。只有当依赖项发生变化时，useMemo才会重新计算。
2024-05-09 09:33:53
623
2
原创 React 第二十七章 Hook useCallback
是 React 提供的一个 Hook 函数，用于优化性能。它的作用是返回一个记忆化的函数，当依赖发生变化时，才会重新创建并返回新的函数。在 React 中，当一个组件重新渲染时，所有的函数都会被重新创建。这可能会导致一些问题，特别是在涉及到将函数作为 prop 传递给子组件时，因为每次父组件重新渲染时，子组件都会接收到一个新的函数 prop，从而触发子组件的不必要的重新渲染。使用可以避免这个问题。它接收两个参数：一个回调函数和一个依赖数组。
2024-05-09 09:33:42
1058
原创 React 第二十六章 React.memo
可以应用于函数组件和类组件，但是对于类组件，它只会对 props 进行浅比较。如果需要对类组件的 state 进行优化，可以考虑使用。接受一个组件作为参数，并返回一个新的优化过的组件。这个新的组件在接收到新的 props 时，会进行浅比较来判断是否需要重新渲染。默认只进行浅比较，如果组件的 props 是一个复杂对象，需要自定义比较函数来判断是否需要重新渲染。是 React 提供的一个高阶组件，用于对函数组件进行性能优化。可以避免不必要的重新渲染，提高组件的性能。比较函数需要返回一个布尔值。
2024-05-08 11:10:21
626
4
原创 React 第二十五章 React.PureComponent
是一个帮助优化性能的组件，通过浅层比较属性和状态的值来避免不必要的组件渲染。但需要注意深层比较的情况，以确保组件能够正常地重新渲染。
2024-05-08 10:57:53
336
原创 React 第二十四章 shouldComponentUpdate
shouldComponentUpdate 是一个非常有用的方法，可以帮助你控制组件的重新渲染，以提高性能。但是，过度使用它也可能会导致一些问题，所以需要在实际开发中进行权衡和合理使用。
2024-05-07 09:46:00
647
原创 React 第二十三章 使用错误边界捕获渲染错误
在 React 中，错误边界是一种能够捕获并处理渲染错误的机制。当渲染期间发生错误时，React 会中止渲染并显示错误信息，以防止错误的影响传播到整个应用程序。使用错误边界有助于提高应用程序的可靠性和稳定性。在处理大型复杂应用程序时尤为重要，因为单个组件的错误可能会导致整个应用程序的崩溃。组件抛出错误，错误边界组件会捕获错误并显示一条友好的错误信息。这样可以防止错误影响到整个应用程序的渲染。渲染时的错误，因此如下场景中错误是无法捕获的。错误边界组件主要是用来捕获。总之，错误边界组件仅能过处理。
2024-05-07 09:45:12
341
原创 React 第二十二章 Portals
Portals 被翻译成传送门，是 React 库中的一个特性，它允许开发者将子组件渲染到父组件 DOM 层次结构之外的其他地方。React 组件通常是在其父组件的 DOM 层次结构中渲染的，这意味着它们的输出会被插入到父组件的某个 DOM 元素中。然而，有时候我们希望将某个组件的输出渲染到 DOM 层次结构中的其他位置，而不是其父组件中。例如，我们可能希望将某个弹出窗口组件渲染到整个应用程序的根节点之外。或 等等）、Fragment（…）、字符串或数字，以及这些内容构成的数组。
2024-05-06 17:54:32
1036
原创 React 第二十一章 Render Props
在ReactHOCReact Render Props是React中一种常见的组件复用模式，用于将组件的渲染逻辑与组件的状态逻辑分离开来。Render Props模式允许一个组件通过在props中传递一个函数来控制另一个组件的渲染。实际上，而是指一种在React组件之间prop的简单技术。
2024-05-06 17:53:42
931
原创 React 第二十章 Hook useContext
React 的 useContext 提供了一种在组件之间共享数据的简便方式，避免了传递 props 的繁琐和冗余。
2024-05-05 10:00:00
600
原创 React 第十九章 Context
React的Context是一种向下传递数据的机制，用于解决在组件树中共享数据的问题。Context可以被视为一个全局的状态容器，可以在组件树的任何地方访问和更新共享的数据，而不需要通过逐层传递props。例如我们单页应用中的组件会形成一个像组件树一样结构，当内部组件和组件之间要进行数据传递时，就免不了一层一层先传递到共同的父组件，然后再一层一层传递下去。假设subComA-1组件的状态数据要传递给subComB-2组件，应该怎么做？根据我们前面所讲的单项数据流的规则，那么数据应该被提升到。
2024-05-05 10:00:00
899
原创 React 第十七章 Hook useRef
React中的useRef是一个Hook函数，它可以用来在函数组件中创建一个可变的引用。总的来说，useRef是一个非常方便的Hook函数，可以用来在函数组件中持久化存储可变值，以及获取和操作DOM元素的引用。useRef可以用来保存任意可变值，而不仅仅是DOM元素的引用。在函数组件中创建一个ref，只需要调用useRef并传入一个初始值即可。在上面的例子中，我们使用了一个ref来存储一个计数器的值，并在每次点击按钮时增加计数器。属性可以存储任意值，并且在函数组件的多次渲染之间保持不变。
2024-05-04 10:00:00
261
原创 React 第十八章 Hook useImperativeHandle
可以让父组件可以通过 ref 来获取子组件的属性和方法，使得父子组件之间的通信更加方便。使用，主要用于在父组件中可以使用 ref 获取子组件暴露出来的属性和方法。接受两个参数：ref 和创建子组件属性和方法的函数。暴露出来的属性和方法。在这个例子中，我们可以通过。将子组件的属性和方法暴露给父组件。是一个自定义 Hook。来获取子组件的属性，通过。在上面的例子中，父组件。来调用子组件的方法。
2024-05-04 10:00:00
201
原创 React 第十五章 Ref
React ref 是 React 中一个用于访问组件中 DOM 元素或者类实例的方式。它允许我们直接操作 DOM，而不需要通过 state 或 props 来更新组件。
2024-05-03 10:00:00
731
原创 React 第十六章 Ref转发
要实现 ref 转发，你需要在子组件中使用 React.forwardRef() 方法来创建一个新的组件，该方法接收一个回调函数作为参数。在这个回调函数中，你可以将传递给子组件的 ref 转发到子组件内部的某个 DOM 元素或子组件上。然而，在某些情况下，你可能需要将 ref 传递给组件中的子组件，或者将 ref 传递到具有特定方法的 DOM 元素上。总结来说，React ref 转发是一种将 ref 从一个组件传递到另一个组件的技术，通过它可以在父组件中直接访问子组件的 DOM 元素或实例。
2024-05-03 10:00:00
1417
原创 React 第十三章 属性默认值和类型验证
在Vue中，我们可以针对props属性进行类型验证，那么在React中同样也能对props进行验证。。从开始，已移入另一个包中。因此首先我们需要安装prop-types库。
2024-05-02 10:00:00
2
原创 React 第十四章 高阶组件
React 高阶组件是一种用于复用组件逻辑的技术，它可以将组件的逻辑与视图分离，使得代码更加清晰和可维护。通过将组件作为参数传递给高阶组件，并返回一个新的组件，可以实现组件的复用和定制。高阶组件是React开发中常见的一种技术，可以帮助开发者实现一些常见的功能，提高开发效率。
2024-05-02 10:00:00
1386
原创 Cross-Origin Read Blocking (CORB)
如果响应的内容类型不是被视为安全的类型（如HTML、XML、JSON等），浏览器就会阻止网页读取该响应的内容。如果响应的内容类型被视为可能包含敏感信息（例如，MIME类型为"text/html"且响应中可能包含JavaScript脚本），浏览器会自动阻止该响应的读取，避免恶意网站利用跨站脚本攻击（XSS）来读取其他网站的数据。不常见的文本格式：这些可能包括某些特定的 MIME 类型，它们不是通常用于网页显示的文本类型（例如，非标准的文本编码或旧的、较少使用的格式）。如需更详细的信息，可以参考。
2024-05-01 10:00:00
862
原创 React 第十二章 UmiJs
Umi 是由蚂蚁集团推出的可扩展的企业级前端应用框架。Umi 以路由为基础，同时支持配置式路由和约定式路由，保证路由的功能完备，并以此进行功能扩展。然后配以生命周期完善的插件体系，覆盖从源码到构建产物的每个生命周期，支持各种功能扩展和业务需求。UmiJS 是一个强大且灵活的企业级前端应用框架，基于 React 和插件化的思想构建。它提供了丰富的功能和插件生态系统，使得开发者能够高效地构建出稳定、可扩展的 Web 应用。
2024-05-01 10:00:00
480
原创 React 第十章 Antd Pro
Ant Design Pro 是基于 Ant Design 和 umi 的封装的一整套企业级中后台前端/设计解决方案，提供了一套丰富的UI组件和一些预设的布局模板，旨在帮助开发者快速搭建高质量的企业级应用程序。预设的布局模板：Antd Pro提供了多种预设的布局模板，包括经典的左侧菜单布局、顶部菜单布局和顶部导航布局等，开发者可以根据项目需求选择合适的布局模板，快速搭建页面结构。高度可定制化：Antd Pro 提供了丰富的配置选项和可扩展的插件机制，使得开发者可以根据自己的需求定制和扩展项目的功能和样式。
2024-04-30 10:00:00
791
原创 React 第十一章 Dva
数据的改变发生通常是通过用户交互行为或者浏览器行为（如路由跳转等）触发的，当此类行为会改变数据的时候可以通过 dispatch 发起一个 action，如果是同步行为会直接通过 Reducers 改变 State。是一个基于 redux 和 redux-saga 的数据流方案，然后为了简化开发体验，dva 还额外内置了 react-router 和 fetch，所以也可以理解为一个轻量级的应用框架。如果是异步行为（副作用）会先触发 Effects 然后流向 Reducers 最终改变 State。
2024-04-30 10:00:00
1250
原创 React 第九章 Redux
Redux是一个独立的第三方库，之后React官方在Redux的基础上推出了最新版的，已经全面拥抱了Hooks，内置了诸如：useStore一类的Hook，我们只要掌握这一类Hook，就可以轻松上手。另外，Redux官方还推出了，来简化整个Redux的使用。因此现在在React应用中，状态管理库的使用一般都是ToDoList安装使用 @reduxjs/toolkit configureStore 方法 创建 store 仓库reducer: {})
2024-04-29 10:00:00
2055
原创 HTTP 第七章 身份验证
身份验证是一种在HTTP请求中验证用户身份的方法。它允许Web服务器验证用户的身份，并且只授予已验证用户访问受保护资源的权限。
2024-04-29 10:00:00
1007
原创 React 第八章 React-router v6
URL参数处理：在单页面应用中，通常需要从URL中获取参数，例如页面的过滤条件、排序方式等。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就会更加高效。当用户点击网页中的链接时，浏览器不会刷新整个页面，而是通过 JavaScript 监听 URL 的变化，并根据新的 URL 加载对应的页面内容。在单页面应用中，页面只加载一次，所有的操作都是在页面上动态加载内容并改变 URL。后端路由主要用于处理URL的请求，将不同的URL请求映射到不同的逻辑处理函数上。
2024-03-10 14:58:40
1268
原创 json-server 快速搭建本地服务器
使用json-server，你只需创建一个JSON文件，定义其中的数据结构和数据，并将该文件作为参数传递给json-server。json-server会根据文件内容自动生成对应的API，并监听指定的端口。json-server非常适合前端开发人员进行本地开发和测试，因为它可以快速地创建一个模拟的后端服务器，无需依赖真实的后端API。同时，它还可以用作临时接口的提供者，方便和后端开发人员协同工作。它能够根据一个JSON文件自动生成API，并提供了对数据的增删改查的支持。文件中的数据作为API的数据源。
2024-03-10 14:57:37
418
原创 React 第七章 Hooks
Hook是React 16.8的新增特性。它可以让你在不编写class的情况下使用state以及其他的React特性。Hooks告别令人疑惑的生命周期例如下面的例子，相同的代码在不同的生命周期中存在了两份// 类组件super();count : 0document.title = `你点击了${this.state.count}次`;document.title = `你点击了${this.state.count}次`;
2024-03-06 10:16:41
1192
原创 React 第六章 生命周期
生命周期是一个物体、生物或概念从诞生、成长、衰老到死亡的过程。React在组件的生命周期中提供了一系列的钩子函数（类似于事件），可以让开发者在函数中注入代码，这些代码会在适当的时候运行。生命周期钩子函数是属于类组件所独有的东西，但是从React 16.8推出Hooks以来，整体已经开始以函数组件为主，因此这里我们仅介绍一些常用的生命周期钩子函数。
2024-03-06 10:16:20
596
原创 React 第五章 表单
的模式，将视图和视图模型进行绑定，视图模型的改变，会自然的带来视图的改变。开发人员需要专注在视图模型上面。因此，这里所谓的受控组件，本质上其实就是将表单中的控件和视图模型（状态）进行绑定，之后都是针对状态进行操作。中推荐使用受控组件来对表单进行操作，这样能够对表单控件的数据进行一个统一管理。，最重要的是要转换思想，这一步非常重要，往往也比较困难。节点，然后进行操作。而在现代前端开发中，采用的是。方案进行处理，此时替代的方案就是非受控组件。但是在某些特殊情况下，需要使用以前传统的。时代，开发人员需要获取到。
2024-03-04 22:23:26
547
原创 React 第四章 组件状态与数据传递
每次点击按钮，虽然我们设置了四次 count， 但是count只加了 1。在改变 count 值的时候，count 数据还没有改变，所以只加了1。中，如果子组件需要向父组件传递数据，同样是通过触发父组件传递给子组件的事件来进行传递。早期类组件被称之为有状态组件，就是因为在类组件中能够维护组件数据。中组件会存在层级关系，那么自然会涉及到组件之间进行数据的传递。执行后的数据，可以提前使用一个变量来存储计算结果，或者使用。的第二个参数，它是一个函数，这个函数会在。元素的事件中，则其是异步的，否则是同步。
2024-03-04 22:21:20
1043
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人