自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(139)
  • 收藏
  • 关注

原创 React-fiber架构

Fiber 架构是 React 性能优化的基石,通过可中断的异步渲染和优先级调度,显著提升了复杂应用的流畅性。它不仅重构了底层的协调算法,还为 React 的未来演进(如并发模式、服务器组件)奠定了技术基础。)是 React 16 中引入的核心重构,旨在解决 React 在大型应用中的性能问题,并为异步渲染、并发模式(Concurrent Mode)等高级特性提供底层支持。它是 React 协调算法(Reconciliation)的重新实现,显著提升了应用的响应能力和渲染效率。

2025-05-22 07:28:38 1193

原创 dva、mobx、redux有什么区别?

在 Umi 中使用 Dva、MobX 和 Redux 的区别主要体现在设计思想、实现方式和开发体验上。在 Umi 中,Dva 是默认推荐方案,但具体选择需结合团队习惯和项目需求。

2025-04-25 21:05:01 849

原创 在微前端子应用中会往window上挂载属性,如何避免属性被覆盖?

通过组合这些方法,可有效避免全局属性污染,确保微前端架构的稳定性。主应用可通过规范或构建工具(如 Webpack 的。在微前端架构中,避免多个子应用因往。直接采用成熟的微前端框架(如。

2025-04-25 21:04:31 800

原创 微前端架构的设计?微前端是为了解决哪些问题?如何解决css同名问题?

通过合理设计架构和选择隔离方案,可系统性解决微前端的 CSS 冲突和全局污染问题,实现真正的应用自治。多个子应用使用相同 CSS 类名或选择器时,样式会相互覆盖(尤其在全局样式场景)。

2025-04-25 21:03:55 828

原创 单点登录的流程大致是什么样的?

单点登录(SSO)的流程允许用户通过一次登录访问多个相互信任的应用系统,其核心在于认证中心(SSO Server)与各应用系统之间的信任传递。通过上述流程,SSO在保障安全的前提下,极大提升了用户体验,减少了重复认证的繁琐操作。

2025-04-25 21:03:17 623

原创 函数式组件如何保证state的状态?为什么使用useState能拿到状态?

机制说明Fiber 节点存储状态持久化在 Fiber 节点的链表中,与组件生命周期绑定。Hook 调用顺序一致性按顺序读取链表确保useState能正确匹配状态。闭包与更新函数setState始终通过 Fiber 引用最新状态,规避闭包陷阱。通过这一系列设计,React 函数式组件能够在多次渲染间保持状态稳定,同时提供简洁的 API 实现响应式更新。

2025-04-25 21:02:47 606

原创 讲解下函数式编程,其他编程方式有哪些?

函数式编程(Functional Programming, FP)是一种的编程范式,它将计算视为数学函数的组合,强调,通过纯函数和不可变性来构建程序。以下是关于函数式编程的详细讲解,以及与其他编程范式的对比。

2025-04-25 21:02:12 871

原创 React类组件和函数式组件性能上有什么区别吗?

性能优先无论组件类型,合理使用优化手段(如避免不必要的渲染、缓存计算)比选择组件类型更重要。推荐函数式组件更简洁的代码、更少的样板代码,且更贴合React未来发展方向(如并发模式)。迁移成本已有类组件无需强制重写,除非遇到性能瓶颈或需要适配新特性。示例优化场景// 函数式组件:通过React.memo和useMemo优化});// 类组件:通过PureComponent优化render() {

2025-04-25 21:01:47 503

原创 为什么不提倡使用React类组件了?

函数组件 + Hooks 提供了更简洁、灵活且面向未来的开发模式,解决了类组件在逻辑复用、代码组织和学习成本上的痛点。尽管类组件仍存在于历史代码中,但 React 生态已全面转向 Hooks 优先的范式。

2025-04-25 21:01:09 615

原创 React如何实现数据监听的?

React 通过显式状态更新 + 虚拟 DOM 比对实现数据到 UI 的映射,而非传统的监听机制。对于需要自动化监听的场景,可结合useEffect或状态管理库(如 MobX)实现类似功能。这种设计平衡了性能、灵活性与可维护性,适用于多样化项目需求。

2025-04-25 21:00:43 1456

原创 Vue响应式原理

Vue 2:通过实现数据劫持,依赖手动处理数组和对象变更。Vue 3:基于Proxy的响应式系统更高效、功能更全面,支持自动依赖追踪和更细粒度的更新控制。核心思想:无论是 Vue 2 还是 Vue 3,响应式原理的核心都是数据变化自动驱动视图更新,通过依赖收集和派发更新实现高效的 UI 同步。

2025-04-25 21:00:06 707

原创 Vue和React区别?

Vue更偏向“开箱即用”,通过响应式系统和模板语法降低开发门槛,适合追求开发效率的场景。React强调“JavaScript 优先”,通过灵活的 JSX 和 Hooks 提供更强的控制力,适合复杂应用和追求技术深度的团队。两者均可胜任大多数项目,选择时需结合团队习惯、项目规模和技术生态综合考虑。

2025-04-25 20:58:53 1490

原创 为什么js操作DOM成本比较高?

DOM 操作成本高的本质原因:树形结构复杂性、跨线程通信、重排/重绘的触发。优化核心思路:减少操作次数、避免同步布局、利用浏览器优化策略。现代框架的价值:通过虚拟 DOM、异步更新等机制,开发者无需手动优化,但仍需理解底层原理以应对极端场景。

2025-04-25 20:58:21 595

原创 React核心原理

React 的核心思想是通过声明式编程和组件化虚拟 DOM(Virtual DOM)React 通过虚拟 DOM 抽象真实 DOM,避免直接操作真实 DOM 带来的性能损耗。虚拟 DOM 是一个轻量级的 JavaScript 对象树,每次组件状态变化时,React 会生成新的虚拟 DOM 树,并与旧的进行对比(Diff 算法),找出最小差异,最终批量更新真实 DOM。协调(Reconciliation)Diff 算法:React 通过对比新旧虚拟 DOM 树,找出需要更新的部分。

2025-04-25 20:57:22 1168

原创 webpack中loader和plugin是做什么的?有什么区别?

将其转换为Webpack可处理的模块(如JS模块)。,执行更广泛的任务,如资源优化、环境注入等。进行转换,类似“流水线”上的处理单元。),在特定时机改变输出结果。通过监听Webpack的。

2025-04-25 20:56:48 295

原创 webpack工作的流程是什么?

通过理解 Webpack 的流程,可以更高效地配置优化策略和调试构建问题。Webpack 的核心工作流程可以概括为。

2025-04-25 20:56:04 895

原创 http缓存机制有哪些?

HTTP 缓存机制是浏览器和服务端通过特定协议约定资源缓存策略的技术,目的是减少重复请求、提升加载速度。当强制缓存失效时,浏览器携带验证信息向服务端发起请求,服务端决定是否返回新内容(返回 304 或 200)。浏览器直接根据本地缓存判断是否使用缓存资源,无需发送请求到服务端。

2025-04-24 21:00:29 898

原创 浏览器报跨域错误,这个请求会被服务器接收到吗?

当浏览器报告跨域错误(CORS错误)时,。

2025-04-24 20:58:15 435

原创 发布到线上出现跨域问题怎么解决?

使用云存储(如 AWS S3、阿里云 OSS)托管静态资源。:前端与后端域名不同,且需隐藏后端地址或统一入口。:此操作会降低浏览器安全性,禁止在生产环境中使用!:后端服务可控(如自建 API 服务)。:后端在响应中添加 CORS 头。

2025-04-24 20:50:05 1098

原创 跨域问题什么情况下会出现?解决方案是什么?

前端请求同域代理服务器,由代理服务器转发请求到目标服务器,绕过浏览器限制。:仅支持 GET 请求,安全性低(可能遭受 XSS 攻击)。标签不受同源策略限制的特性,通过回调函数获取数据。:服务端通过设置响应头告知浏览器允许跨域访问。:WebSocket 协议不受同源策略限制。:标准化、安全,支持所有 HTTP 方法。:需服务端支持 WebSocket。:仅适用于子域跨域,且需页面间协作。:前端无感知,适用于所有请求类型。:嵌套 iframe 的跨域通信。:实时通信(如聊天室)。:需配置代理服务器。

2025-04-24 20:46:26 1116

原创 多个请求发到同一个域名下,那么它们每一个请求都会建立一个tcp链接吗?

HTTP/1.1 可能建立多个 TCP 连接(受并发限制),HTTP/2 仅需 1 个连接即可并行处理所有请求。

2025-04-24 20:42:26 523

原创 http1.1和http2.0有什么区别?

HTTP/2 通过二进制分帧、多路复用和头部压缩,显著提升了传输效率和性能,解决了 HTTP/1.1 的并发限制与冗余问题。

2025-04-24 20:36:41 1082

原创 一个完整的http请求大致的过程是什么?

一个完整的。

2025-04-24 20:33:28 433

原创 在微任务执行过程中又产生了新的微任务,新产生的微任务和宏任务谁先执行?

(在当前事件循环中继续清空微任务队列),宏任务必须等待所有微任务(包括新产生的)执行完毕后才会执行。

2025-04-24 20:27:58 211

原创 js的事件循环机制

事件循环本质:单线程下通过任务队列实现异步。核心规则:同步代码 → 清空微任务 → 执行一个宏任务 → 循环。应用注意:避免在微任务中执行耗时操作(可能阻塞渲染),合理使用宏任务/微任务调度。理解事件循环机制对解决异步问题、优化性能至关重要!

2025-04-24 20:24:07 462

原创 http协议和tcp协议有什么区别、什么关系?

HTTP协议和TCP协议是计算机网络中不同层次的协议,它们既有区别也有紧密的关联。,定义货物的内容(如商品信息)和交易规则(如退货流程)。,负责把货物(数据)安全送到目的地;

2025-04-24 19:38:09 698

原创 为什么浏览器16.6ms渲染一次

浏览器16.6ms的渲染周期是为了匹配60Hz屏幕的刷新节奏,通过垂直同步和渲染流水线的协同,确保用户获得流畅的视觉体验。开发者需遵循这一机制进行性能优化,避免丢帧和卡顿。

2025-04-24 19:33:45 639

原创 在React中实现权限管理

在React中实现权限管理通常涉及以下几个关键步骤,结合路由控制、组件级权限和全局状态管理来确保用户只能访问其权限范围内的内容。通过以上步骤,可在React应用中实现细粒度的权限管理,确保安全与用户体验兼顾。实现动态路由和访问拦截,确保用户无法进入未授权页面。实现权限校验逻辑,支持角色或具体权限码验证。控制按钮、菜单等元素的显示。

2025-04-24 17:50:03 784

原创 如何使用qiankun搭建项目

主应用负责整合子应用,管理它们的加载和通信。

2025-04-24 17:20:03 692

原创 小程序分包

小程序分包是一种优化技术,主要用于解决小程序代码包体积限制和提升首次加载速度的问题。

2025-04-24 16:32:08 895

原创 结合 craco 和 NODE_ENV(通过 cross-env 或命令行设置)实现多环境配置

以下是结合craco和NODE_ENV(通过cross-env。

2025-04-24 16:01:12 548

原创 React-受控组件与非受控组件

受控组件:通过state完全控制表单数据,适合需要精细化管理的场景。非受控组件:依赖 DOM 自身管理数据,适合简单场景或性能优化。核心区别:数据控制权的归属(React vs DOM)。根据需求权衡选择,两者并非对立,而是互补。

2025-04-23 22:35:50 1142

原创 React-ref

ref是 React 的逃生舱:在需要直接操作 DOM 或子组件时使用,但应谨慎。函数组件优先用useRef,类组件用createRef或回调 ref。结合forwardRef和实现更精细的 ref 控制。

2025-04-23 22:33:29 749

原创 React-key的作用

在React中,key。

2025-04-23 22:30:01 453

原创 React-组件通信

根据具体场景选择最简洁的通信方式,通常组合使用多种方案(如:Props + Context + Redux)能平衡灵活性与可维护性。React 组件通信是构建复杂应用的核心问题之一。根据组件层级关系的不同,通信方式可分为多种类型。

2025-04-23 22:24:28 619

原创 React-函数式组件VS类组件

函数式组件已成为 React 的主流写法,但理解类组件仍是必备技能(尤其是在维护老项目时)。是构建 UI 的两种主要方式,它们各有特点和适用场景。通过 JavaScript。直接使用生命周期方法(如。使用 useEffect。使用 useState。

2025-04-23 22:20:05 575

原创 React-事件绑定方式及区别

避免在 JSX 中直接使用内联绑定(除非明确无性能影响)。,函数组件使用 useCallback。选择绑定方式时,推荐类组件使用。

2025-04-23 22:15:42 1023

原创 React-事件机制

理解 React 事件机制有助于编写高效、健壮的组件,尤其在处理动态交互、性能优化和跨浏览器兼容性时至关重要。实现跨浏览器兼容性和高性能的事件处理。React 根据组件树结构和事件类型,找到对应的事件处理函数并执行。React 初始化时,在根节点注册所有支持的事件(如。:直接传递参数,但可能影响性能(每次渲染创建新函数)。React 的事件机制是其核心特性之一,它通过。用户操作触发原生事件(如点击),冒泡到根节点。:React 自动合并事件处理中的多个。:提前绑定参数,避免重复创建函数。

2025-04-22 22:51:21 948

原创 React-setState执行机制

是用于更新组件状态的核心方法,其执行机制涉及异步更新、批量处理及合并策略。的执行机制有助于避免状态更新陷阱,编写高效可靠的 React 组件。传入对象时,React 会执行浅合并(类似。在 setTimeout。

2025-04-22 22:46:38 968

原创 React 中的 state、props 和 super(props)

的核心概念、区别与使用场景,并对比类组件与函数组件的不同实现方式。好的,我来详细讲解 React 中的 state。和 super(props):通过函数参数直接接收。

2025-04-22 22:38:30 1020

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除