React

React严格模式是一个开发环境专用的工具组件，它不会渲染任何可见的 UI，主要作用是帮你在开发过程中提前发现代码里的潜在问题、检测不安全的生命周期、识别过时的 API 使用等，从而写出更健壮、更符合

防抖（Debounce）的核心逻辑是：延迟执行目标函数，若在延迟期间函数再次被触发，则重置延迟时间，直到延迟结束后才执行。

在 React 事件处理中，this 指向问题是类组件特有的常见陷阱，而函数式组件从设计上完全规避了这一问题。本文将从底层原理、问题成因、解决方案和核心差异四个维度，彻底讲透两类组件的 this逻辑。

React 合成事件是 React 对浏览器原生 DOM 事件的一层封装，它提供了跨浏览器兼容的统一事件接口，同时结合 React 虚拟 DOM 特性实现了更高效的事件处理。

React的主流动画方案

React 本身只是 JS 库，没有内置样式方案，存在一些问题。这三种方案主要就是用于解决这些问题。

传统表单采用受控组件的方式，存在状态冗余、重渲染频繁导致性能差的缺陷。React Hook Form以非受控组件为底层核心解决了传统表单存在的缺陷。

受控组件与非受控组件的主要差异在于，受控组件由React的state/props管理状态，而非受控组件由dom自身管理状态，通过ref获取数据。

Mock API请求是前端开发实际工作场景经常需要使用到的一个内容，那么如何才能高效且正确的进行API的Mock呢。

React 官方推荐、也是业界统一的标准方案 → 使用 @testing-library/react-hooks 这个库来测试自定义 Hooks，同时搭配 Jest 作为测试运行器，这是最优组合。

React Testing Library 是一个专注于用户行为模拟的前端测试库,核心思想是测试组件的实际表现而非实现细节，让测试更贴近真实用户的使用场景。

React18之前水合是全量且同步的，React18以后Fiber架构使得水合过程也变得可中断、可恢复、可取消，让水合过程也变得灵活且高效。

Next.js 中服务端渲染(SSR)、静态站点生成(SSG)、增量静态再生(ISR)这三大核心渲染策略的核心差异，本质只有一个：HTML 生成的时机和更新的方式。

本文详细讲解了以Next.js为例子的SSR应用的工作流程。

React 虚拟列表（也叫「虚拟滚动」Virtual Scrolling），是一种高性能的长列表渲染优化技术。

React.lazy与Suspense组合使用可以按需加载组件，使得首屏渲染快速加载。

Redux的异步处理、日志打印、错误捕获、状态持久化等几乎所有高级能力，都依赖中间件实现，而且Redux的中间件设计是洋葱模型的经典实践，理解它能举一反三理解其它框架的中间件逻辑

在 React 项目中实现**状态持久化**，核心需求就是：页面刷新、浏览器重启、路由跳转后，React 组件的状态数据不会丢失，再次进入页面能恢复之前的状态，这也是 React 开发中高频的核心需求

服务端状态是指：从后端接口/数据库请求回来的业务数据（用户信息、订单列表、商品数据、文章内容等）.而这两个库，就是为「服务端状态」量身打造的 React 数据请求/状态管理库，没有之一。

mmer 能做到「可变写法 + 不可变结果」，核心靠的是 3个核心技术的组合拳，缺一不可，这也是 Immer 底层的全部核心，没有任何黑魔法

Immer 成为 Redux 生态标配级依赖的核心原因，本质是：Immer 完美解决了 Redux 的核心痛点，而且做到了「无痛兼容、极低学习成本、无侵入性」，是 Redux 生态里降本增效的最优解

RTK Query 是Redux Toolkit内置的数据请求与缓存管理工具，专为解决 Redux 项目中数据获取、缓存同步、状态维护等痛点设计。

这两个hooks都是用于React的状态管理，但是两者的更新机制存在巨大差异。

React主流的四个状态管理方案，有其不同的适用场景。

React的Fiber架构让渲染过程从递归变成了迭代，使得渲染过程变得可中断、重连，让并发成为了可能。

Redux的状态修改与重渲染，遵循发布订阅模式，一旦修改状态，所有用到useSelector的组件都会做一次比较，如果返回值改变，就会从对应的Fiber节点进行重渲染。

Redux 是 React 的全局状态管理库，用来管理组件之间共享的、跨层级的公共数据（比如用户信息、主题配置、购物车数据等）。

Next.js是SSR应用，相比于SPA应用其路由原理的实现有所不同，其底层和BroswerRouter一样基于History的路由模式。

BrowserRouter和HashRouter是SPA应用中常用的两种路由处理方式，表面上看起来都是一样的页面路由跳转，实际底层完全不同，两者的优势也不同，

在Next.js中依据Pages Router还是App Router有不同的路由实现，受保护的路由实现也不同。

受保护路由（也叫鉴权路由），核心作用：对指定的路由页面做访问权限校验，只有满足指定条件（最常见的是「用户已登录」）的情况下，才允许进入该路由页面；如果不满足条件，则强制跳转到指定页面（通常是登录页）。

React基本的路由实现

这套方法论的核心思想是从原子到有机体的层级递进，既兼顾了组件的复用性，又保证了界面的一致性，非常适合前端组件化开发

开发一套高质量组件库，需覆盖定位选型、开发规范、工程化、质量保障、功能增强、发布维护六大核心环节，核心目标是复用提效、稳定易用

错误边界捕获的本质：子组件树中，在 React 执行「渲染、初始化、生命周期」时抛出的同步 JS 异常

错误边界防止组件树出现错误而导致页面白屏，那么我们应该如何在React中优雅的使用错误边界。

React官方为什么一直强调「组合（Composition）优于继承（Inheritance）」,这是 React 最核心的设计原则之一，并非单纯的编码习惯，而是从技术层面、设计层面、工程层面的最优解

组件的单一职责原则的核心思想是：一个组件只负责完成一个独立的功能，仅存在一个引起它变化的原因。

useDeferredValue和useTransition共享 100% 的底层调度内核，没有第二个原理，所有差异都只是 React 做的「语法糖封装

useDeferredValue与useTransition的介绍与合适的使用场景。

useTransition是React 18 新增的官方内置 Hook，属于「并发特性」的核心API，专门用于处理非紧急（非优先级）的状态更新，它是React为了解决「渲染优先」问题而生的核心方案。

为什么 React18 要推出「并发特性」？ React 团队做这个重大重构，核心只有一个目标：在不牺牲代码可读性/开发体验的前提下，解决「渲染阻塞导致的用户体验问题」，让 React应用的交互更流畅

useId是如何保证在服务端和客户端对同一节点生成同样的id。

useId能够生成唯一、稳定、无冲突的字符串。这解决了3个问题：同一份组件代码，多次渲染/复用的id问题、ssr的水合不匹配问题、无障碍访问(a11y)的关联需求。

SSR应用相比CSR应用有首屏加载快以及SEO的优势，那么SSR应用和CSR有何区别呢

forwardRef解决了React中的ref透传问题，让父组件可以访问到子组件内部的DOM。useImperativeHandle配合forwardRef使用，相当于添加了一层API定制层。

函数组件本质是无实例的函数调用，其中的状态通过fiber节点和hooks链进行保存。类组件本质通过创建实例，其中的状态方法都挂载在实例上。

useRef可以用来判断组件的首次渲染，从而实现首次渲染埋点上报。

useMemo和useCallback是react性能优化时重要的两个hook，但是也不能滥用否则反而会产生不必要的性能开销，增加代码复杂度。

useRef 是 React 提供的一个内置钩子（Hook），核心作用是创建一个可以在组件整个生命周期内持久化的可变容器（ref 对象），以及获取dom元素进行操作。

useReducer是react参考Redux的思想所提出的不同于useState的另一状态管理hooks，都是用于处理组件内部的状态，useReducer在处理复杂状态下会更具有优势。

useContext是 React 提供的一个内置 Hook，用于在函数组件中便捷地访问 Context（上下文）中的数据，避免了“props 层层传递”

如何在useEffect中正确使用异步操作，避免在卸载阶段setState或者是竞态问题。

用 useCallback 和 useMemo 优化 useEffect（或其他 Hook）的依赖项，核心目标是减少不必要的重渲染/Effect 重执行

React中的useEffect的依赖比较采用的是浅比较，使用Object.is()方法实现，与=== 不同之处在于，NaN与NaN比较时，Object.is的返回是true，避免了重复触发回调。

useLayout也是React中一个重要的hooks，其表面上的作用与useEffect相近，但是其核心与适用场景完全不同。

useEffect的核心原理讲解。

useEffect的出现使得函数式组件也可以像拥有生命周期一样处理副作用。本文讲述了useEffect的基本用法。

useState维护了一个状态更新队列，如果使用函数式更新，队列的同步处理就能保证函数的到的是最新的状态。如果是直接更新，异步批量更新时，就容易拿到闭包旧值，从而导致逻辑错误。

useState的函数式更新保证我们能拿到的状态一定是最新的。由于react是异步批量更新的，直接更新可能会存在捕获到的是旧值的问题。

React 强调 Props 不可变（Immutable），本质上是为了保证组件行为的可预测性、渲染逻辑的稳定性，以及契合 React 的单向数据流设计原则。

由于 React 函数组件的重新渲染会创建新的作用域，而 Hook 回调函数会捕获当前渲染作用域的状态/ props 快照，当回调函数延迟执行时，会访问到旧的状态/ props 值，而非最新值，从而导

错误边界是 React 提供的一种组件级错误捕获机制，它能够捕获其子组件树中（包括子组件的渲染、生命周期方法、状态更新等过程中）抛出的 JS 错误，并可以优雅地显示备用UI，而不是让整个应用崩溃。

react的类组件与函数组件是主流的组件写法，两者之间存在着较大的特性差异。

React 函数式组件（Functional Component）是以 JavaScript 普通函数形式定义的 React 组件，是目前 React 开发的主流组件形式（替代传统类组件）

类组件中的普通函数和箭头函数存在this指向问题，这是因为箭头函数本身没有this，会自动绑定到实例。而普通函数的this会在调用时决定，通常会指向undefine，所以普通函数创建时需要绑定this

类组件曾是React的主流组件构建方法，其对后来的函数组件的开发也起到了重大的影响。

vite与webpack是目前主流的前端构建工具，两者的构建理念与底层原理存在巨大差异。

React的Diff算法，用于比较新旧虚拟DOM树，实现高效的差异检测。

虚拟DOM是React框架的核心技术之一，其主要解决了操作真实DOM导致频繁重排和重绘的性能问题。其通过Diff算法和批量更新实现了高效更新真实DOM。

UI=f(state)是React框架的核心思想，在该思想指导下React相比传统的命令式编程有什么样的优势。

系统解释 Next.js App Router 中 Server Component 和 Client Component 的区别：Client Component 也能服务端预渲染，但会发送 JS 并 hydration；核心数据如果放在浏览器运行时请求，就会退化成 CSR。

结合真实业务中基于 img 的埋点发送方法在场景复用、可靠性和性能上的问题，介绍 react-track-hooks 如何通过 Hooks 抽象、失败缓存重试、批量上报和 requestIdleCallback 空闲调度完成前端埋点工程化重构。

围绕 react-track-hooks 中 useTrackPageStay 的源码，分析它如何结合用户活跃事件、页面显隐、无操作超时和统一上报链路统计有效停留时长。

围绕 react-track-hooks 中 useTrackExposure 的源码，分析它如何用 IntersectionObserver、ref、曝光阈值和 useTrack 实现可靠的曝光埋点

围绕 react-track-hooks 中 useTrackInit 的源码，分析它如何组合全局配置、批量上报、页面生命周期监听和失败重试机制。

介绍 react-track-hooks 的项目定位、核心 Hook、目录结构、架构设计、批量上报、失败重试和工程化发布方式。

从 Markdown 图片渲染 AntD Image 的真实案例出发，解释非法 HTML 结构为什么会导致 Next.js hydration error，以及如何修复。