话题框架与类库 › React

框架与类库:React

How Rolldown Works: High-Performance Code Splitting with Bitset Logic

Rolldown是Vite未来的高性能JavaScript打包器,其核心流程分为模块扫描、符号链接和代码生成三阶段。代码生成采用"保留模式"和"普通模式"两种策略,重点在于智能分块算法:通过位掩码标记模块可达性,先处理用户定义的手动分块,再自动优化剩余模块,最后合并冗余代码。整个过程兼顾开发者控制权与打包性能,能显著减少代码体积并提升加载速度。

Virtual Scrolling for Billions of Rows — Techniques from HighTable

本文介绍了React组件《HighTable》在处理数十亿行数据时的五项关键技术。通过懒加载、表格切片、无限像素、双滚动模式和两步随机访问,实现了高性能和良好可访问性。这些技术充分利用原生HTML元素,确保用户在浏览器中无缝浏览大规模数据。

Creating Query Abstractions

开发者常通过抽象化代码提升复用性,React中自定义钩子是常见手段。然而,过度抽象可能带来类型推断和维护难题。TanStack Query的queryOptionsAPI为此提供了更简洁的解决方案,不仅能跨组件共享查询配置,还能保持类型推断的完整性,简化了复杂场景下的代码管理。建议优先使用queryOptions作为抽象基石,而非直接依赖自定义钩子。

Modern.js 3.0 发布:聚焦 Web 框架,拥抱生态发展

Modern.js 3.0 全面升级,聚焦 Web 框架,集成 React Server Component,支持 CSR 和 SSR 项目渐进式迁移。移除 webpack,全面拥抱 Rspack,提升构建与安装速度。开放插件体系,增强路由优化与 SSG 能力,支持 Module Federation 深度集成。升级 React 19,最低支持 Node.js 20,默认使用 Biome 工具链,提供更轻量、高效的开发体验。

How to Create Bounding Polygon Annotation Tool

用React和Konva打造多边形标注工具,轻松搞定图像目标定位!通过Canvas绘制可拖拽的顶点和连线,实现封闭区域标注,支持坐标配置和拖拽边界控制。组件化设计让代码复用更高效,适合计算机视觉项目中的目标定位和训练数据标注。

Building Bulletproof React Components

React组件开发要面向未来,确保在各种复杂场景下稳定运行。从服务器渲染、水合过程到多实例并发,再到异步子组件和门户窗口,每个环节都可能出问题。通过巧妙运用useEffect、useId、React.cache等API,结合上下文传递和状态管理,能让组件在SSR、CSR、iframe等环境下无缝切换。记住,组件不仅要能在你的页面跑通,更要经得起他人使用的考验。

Taro 5.0:跨端架构演进与业务规模化落地实践

Taro 5.0 架构升级,突破跨端开发瓶颈,实现“一码五端”统一开发。通过 WebOnNative 架构,结合 C++ React 与自研样式系统,显著提升性能与一致性。支持动态更新、多屏适配及国际化,赋能复杂业务场景。AI 辅助工具进一步优化开发效率,助力业务快速迭代。未来将持续深化性能优化与智能化研发,引领跨端技术新高度。

React Compiler: An Introduction, Pros, Cons & When to Use It

React Compiler是Meta推出的React性能优化工具,通过构建时自动缓存代码,减少不必要的重新渲染,提升应用性能。它无需手动配置,支持与Vite、Next.js等工具集成,并在React Developer Tools中提供优化验证。尽管能简化代码、提升性能,但在第三方库兼容性和遗留代码库中仍有挑战。建议在新项目或结构化良好的代码库中使用,以获得最佳效果。

供应链系统中的 Web 打印方案的探索实践

供应链系统中,打印作为关键环节难以完全数字化。本文聚焦浏览器打印方案,对比DOM原生、可视化模板及本地控件三种方式,最终推荐基于window.print的DOM打印。通过iframe隔离、CSS精准控制分页与样式,实现高效稳定的批量单据输出。核心在于平衡技术成本与业务需求,为高频打印场景提供轻量级解决方案。

How to Measure and Optimize React Performance

React应用随着规模增长容易变慢,核心问题包括不必要的组件重渲染、包体积膨胀和交互延迟。优化可从三方面入手:测量性能(使用React性能追踪、开发者工具分析火焰图)、运行时优化(记忆化、代码分割、虚拟列表)、并发特性(useTransition处理非紧急更新)。同时需关注生产环境监控,通过真实用户数据持续追踪性能表现。React 19.2新增的性能追踪工具能直观展示调度器、组件和服务端活动,帮助精准定位瓶颈。

How to Steal Any React Component

(奸笑)教你一招阴的——直接从线上React应用里偷组件!不用源码不用权限,浏览器里就能扒光它们。

React在内存里藏了两棵树:DOM树和Fiber树。Fiber树知道组件的一切,连props和state都记得。咱们顺着DOM摸瓜,逮住组件就问:"你小子是谁生的?拿了啥参数?"

把组件的props和渲染结果记下来,喂给AI:"照着这些例子,给老子逆向个组件!" AI写完后,咱们用props验证输出是否和原网站一致。不行就甩AI一脸diff:"重写!"

先从底层组件开刀,再拼合大组件。动画和动态状态会露馅?那就直接截图HTML保底。最后偷齐CSS和图片——恭喜,白嫖成功!

(精髓在于:React Fiber自动帮咱们把组件归类了,三个按钮其实是一个妈生的)

1端开发6端复用:去哪儿RN转QTaro实战经验分享

去哪儿旅行火车票团队启动“统一前端技术栈”项目,通过React Native代码在多端复用,降低开发与维护成本。项目依托QTaro框架,实现RN到多端的高效转换,解决组件属性、业务逻辑和性能优化等差异问题。通过RN多端库和NativeModules封装,确保各端功能一致,提升用户体验与开发效率。

Bundle Size Investigation: A Step-by-Step Guide to Shrinking Your JavaScript

探讨如何减少React应用的JavaScript包大小,通过分析项目中使用的库如MUI、Lodash等,发现并解决树摇失效和重复引入库的问题。采用精确导入、移除冗余库等方法,成功将包大小从5MB降至600KB,显著提升应用性能。

An experiment in vibe coding

假期里,我用Claude Code“氛围编程”为妻子打造了一个旅行行程管理小应用,花费约5小时和20美元。应用基于PocketBase和Railway,支持PWA,界面简洁,功能实用。虽然LLM在调试、性能和可访问性上仍有不足,但对个人项目而言,这种方式快速高效,满足了特定需求,避免了第三方应用的繁琐与广告困扰。代码价值下降,LLM理解和测试能力成为新衡量标准。未来编程形态难料,但旅行计划已无忧。

How AI Coding Agents Hid a Timebomb in Our App

AI助手删除了关键注释,导致代码递归逻辑失控,React 19的<Activity>组件掩盖了内存泄漏。调试时发现浏览器崩溃源于页脚编辑器无限渲染,最终定位到缺失的readOnly属性。教训:重要约束必须用测试而非注释保障,AI时代代码安全需自动化验证。

Building an LLM-Powered Slide Deck Generator with LangGraph

利用大语言模型(LLM)和LangGraph,我们可以创建一个自动化的幻灯片生成系统。用户只需输入一个详细的主题或问题,系统便能通过LLM生成幻灯片大纲,填充内容,并最终生成PPTX或PDF格式的演示文稿。整个过程包括幻灯片规划、内容填充、数据与媒体增强、幻灯片组装和输出格式选择。通过Python和React,我们可以轻松构建一个从提示到演示文稿的全自动管道,极大地减少人工干预。

ホーム - Wiki
Copyright © 2011-2026 iteam. Current version is 2.155.0. UTC+08:00, 2026-03-06 17:18
浙ICP备14020137号-1 $お客様$