react.js

React性能优化三剑客：useMemo、memo与useCallback"在React世界里，每一次不必要的渲染都是对用户体验的无声谋杀。" - 某位不愿透露姓名的性能优化工程师

Tauri (25)——消除搜索列表默认选中的 UI 闪动在做桌面应用 coco-app（React 18 + Tauri）时，遇到一个肉眼可见的体验问题：搜索结果渲染出来后，默认选中的第一项会 “慢半拍” 才高亮，导致 UI 有轻微闪动。这篇文章分享定位过程与最终修复方案，深度解析useLayoutEffect 的使用逻辑，并给出代码对比与扩展实践，帮你避开同类交互优化坑。

React Native 如何打包正式apk在 React Native（RN）中打包正式版（Release）应用，Windows 和 Android 的流程是不同的。下面分别介绍如何为 Android 和 Windows 平台构建正式版应用。

前端如何虚拟列表优化？一、为什么要用虚拟列表？当列表数据很多时（如 1w+）：DOM 数量过多 → 重排 / 重绘严重滚动卡顿

React 为什么不采用（VUE）绑定数据？React 和 Vue 是两个流行的前端框架，它们在数据绑定和状态管理上的设计理念有所不同。下面是 React 不采用 Vue 的双向数据绑定机制的一些原因：

react fiber与事件循环在学习react fiber与事件循环的过程中，我一直有这么一个困扰，那就是单独学习的时候，我好像都理解，但是我的脑袋里面没有一条清晰的时间线，到底react的任务从浏览器的视角来看到底是怎么执行，怎么渲染的，为此，我专门将react fiber与浏览器的事件循环放在一起进行学习，希望能够得到更清晰的学习结论。阅读本文，默认对事件循环和react fiber架构有一定了解。

前端不太难

用一张“状态扩散图”，定位 RN 列表性能风险大家好，我是子玥酱，一名长期深耕在一线的前端程序媛 👩‍💻。曾就职于多家知名互联网大厂，目前在某国企负责前端软件研发相关工作，主要聚焦于业务型系统的工程化建设与长期维护。

react-nil 逻辑渲染器最近在浏览React相关的开源项目时，偶然刷到了一个名为 react-nil 的自定义React渲染器。点进项目主页，第一眼看到它的核心介绍，我直接愣住了——

前端实现带滚动区域的 DOM 长截图导出日常开发中，导出带滚动条的DOM内容为图片时，普通截图只能抓可视区域？本文分享基于@snapdom的长截图方案，完美导出完整内容，还能精准复刻UI～

千里马-horse

Rect Native bridging 源码分析--Bool.h代码目录：源码：该头文件隶属于 facebook::react 命名空间，是 React Native JSI（JavaScript Interface）桥接体系的一部分，专门提供 C++ bool 类型与 JSI 布尔类型之间的双向桥接实现。它通过 Bridging 模板特化，为布尔类型提供轻量、高效的跨语言数据转换能力，支撑 C++ 层与 JS 层之间的布尔值传递。

千里马-horse

Rect Native bridging 源码分析--Dynamic.h源码目录：源码：该头文件隶属于 facebook::react 命名空间，是 React Native JSI（JavaScript Interface）桥接体系的重要组成部分，专门提供 C++ folly::dynamic 类型与 JSI 核心类型（jsi::Value）之间的双向桥接能力。folly::dynamic 是 Folly 库提供的动态类型（类似 JSON 数据结构，支持动态键值对、数组等），该桥接实现打通了 C++ 动态类型与 JS 动态类型的交互通道，支撑 React Native 中

Suspense+React.lazy--组件渲染如何暂停 → 等待 → 恢复最近有尝试用 Suspense+React.lazy 优化首屏加载性能，这几天也在研究其实现原理，学习到了几点知识，分享给大家

🔥🔥🔥 React18 源码学习 - React Element本文的React代码版本为18.2.0可调试的代码仓库为：GitHub - yyyao-hh/react-debug at master-pure

思维重构：为什么 Class Component 逐渐式微，而 Function Component 成为主流在 React 16.8 发布 Hooks 以来， class 关键字在新建的项目中逐渐销声匿迹，取而代之的是更加简洁、轻量的 Function Components。

自定义 Hooks 的用法和意义详解（结合案例）自定义 Hooks 是 React 中复用状态逻辑的一种机制，本质是一个以use开头的函数，内部可以调用其他 Hooks（包括内置 Hooks 如useState、useEffect或其他自定义 Hooks）。它的核心作用是将组件中重复的状态管理、副作用处理等逻辑提取出来，实现逻辑复用，让组件更专注于 UI 渲染。

千里马-horse

Rect Native bridging 源码分析--Array.hArray.h 代码目录：代码如下：该头文件属于 facebook::react 命名空间，提供了 C++ 标准集合类型与 JavaScript (JSI, JavaScript Interface) 数组（jsi::Array）之间的双向桥接能力。核心功能是实现 C++ 集合与 JS 数组的相互转换（toJs 转 JS、fromJs 转 C++），支撑 React Native 等跨端框架中 C++ 层与 JS 层的数据通信。

React 之自定义 Hooks在 React 的世界里，Hooks 就像一把神奇的钥匙，为函数组件打开了状态管理和生命周期的大门。今天我们就来深入探索自定义 Hooks 的奥秘，看看它如何让我们的代码更优雅、更可复用！

React学习笔记需要先安装nodejs，官方下载无脑安装，不在傲述，注意装完设置国内镜像源。官方下载链接: https://nodejs.cn/download/ 国内镜像源设置：npm config set registry https://mirrors.tuna.tsinghua.edu.cn/

React 从入门到出门第二章生命周期函数与内置 Hooks 整体认知大家好～上一篇我们聊了 React 19 的 JSX 增强特性和函数组件基础，今天咱们聚焦另一个核心知识点——生命周期函数与内置 Hooks。

千里马-horse

React Native 源码分析 -- jsi.h这份代码是 Facebook JSI (JavaScript Interface) 的核心头文件实现，JSI 是一套跨 JavaScript 运行时（Hermes、V8、JSC 等）的通用 C++ 抽象层，核心目标是实现 C++ 与 JavaScript 的高效、低侵入性双向交互，替代传统的桥接模式（如 React Native 旧版桥接），大幅降低交互开销。以下从代码架构、核心模块、设计思想三个维度进行详细拆解。