React

Hooks 原理

痛点：面试官常问 “为什么 Hooks 需要遵循调用顺序？”，这直接关系到链表结构与 Fiber 关联。

let isMount = true;不过，let workInProgressHook = null;let firstWorkInProgressHook = null;function useState {
let hook;if {
hook = { state: initialState。next: null,queue: };if firstWorkInProgressHook = hook;else workInProgressHook.next = hook;workInProgressHook = hook;} else {
hook = workInProgressHook;workInProgressHook = workInProgressHook.next;}
let baseState = hook.state;hook.queue.forEach(action => {
baseState =
typeof action === 'function'?action : action;})，hook.queue =;const setState = action => {
hook.queue.push;// trigger re-render
};return，}

主要要点

1. 链表结构: 每个组件维护 hooks 链表，保证渲染顺序一致。
2. Fiber 节点关联: Fiber 的 memoizedState 指向链表头。
3. 规则限制: Hooks 必须在顶层调用，避免闭包陷阱。
4. 更新机制: setState 将更新加入队列，批量执行后触发重渲染。其实，

React18 并发模式

痛点：如何解释并发渲染带来的 UI 卡顿消失？主要关注 Time Slicing 与 Suspense。

import { createRoot } from 'react-dom/client';import { Suspense } from 'react';const root = createRoot);root.render，function TabContainer {
const =
useTransition;const handleClick = tab => {
startTransition => setActiveTab);}，不过，}

详细解析

• 可中断渲染: 高优先级更新可打断低优先级任务。
• 时间切片: Scheduler 将渲染拆分为小任务，主线程保持流畅。
• Suspend + Streaming SSR: 提供骨架屏 + 流式加载，让 AI 聊天等场景保持即时响应。

至于组件库设计，Button 示例

痛点：如何让按钮既支持多变体又易于 方法在复合组件和 CSS Variables 上。说起来，

import React。{ forwardRef } from 'react';import { Spinner } from './Spinner';import './Button.css';type ButtonVariant =
| 'primary'
| 'secondary'
| 'danger'
| 'ghost';type ButtonSize = 'small' | 'medium' | 'large';interface ButtonProps extends React.ButtonHTMLAttributes{
variant?: ButtonVariant;size，: ButtonSize;loading，: boolean;leftIcon，: React.ReactNode;说起来，rightIcon?: React.ReactNode;fullWidth，: boolean;}
const Button = forwardRef(
({ children,variant='primary',size='medium',loading=false,leftIcon。rightIcon,fullWidth=false,disabled,className='',...props},ref) => {
const isDisabled=disabled||loading;return (

{loading && (


)}
{!loading && leftIcon &&
{leftIcon}}
{children}
{!loading && rightIcon &&
{rightIcon}}
);
})，Button.displayName='Button';export {Button};不过，

User Pain Point: “在团队内部快速引入新的按钮变体。却发现每次都得改代码，” 使用 CSS Variables & 类名即可 无需改 TSX。

User Pain Point: “想快速判断一个 Promise 与 setTimeout 的执行顺序，却总是混淆。” 以下示例清晰演示微任务与宏任务的交替执行。

console.log;setTimeout=>console.log,0);Promise.resolve.n=>console.log);Promise.resolve.n=>{setTimeout=>console.log,0);console.log，});console.log，// Output order: A F C E B D

• A & F - 同步代码立即执行.
• C & E - Promise.n 微任务先跑.
• B & D - 宏任务等待微任务完成后执行.

User Pain Point: "Promise.all 会抛错时不再等待其他 Promise，该怎么手写实现？"

Promise.myAll=function{
return new Promise=>{
if{resolve;return，}
const results=new Array;let completed=0,total=promises.length;promises.forEach=>{
Promise.resolve.n(
val=>{
results=val;ifresolve，},err=>reject
);})，});}，

• PROMISE RESOLVE 包装：确保传入非 Promise 值也能被处理。
\
• Counters：completed 用来判断所有成功时一次性 resolve。老实说，
\
• Error Short-Circuit：任意 reject 即刻 reject。不等其它 Promise 完成。
\
• Keeps Order：使用索引将结果放回对应位置，保持输入顺序。

User Pain Point: "for" 在异步回调里打印值总是最终一次。" 如何避免，" 简单示例展示 var vs let 与 IIFE 等解法。

// var version – 共用同一变量 i
for{
setTimeout=> console.log,100);// prints 10 ten times
}
// let version – 每次迭代创建新作用域 i
for{
setTimeout=> console.log,100);// prints numbers correctly
}
// 解法1：IIFE 捕获当前值
for{
=>setTimeout=> console.log,100));}
// 解法2：第三参数传值
for{
setTimeout{console.log}。100,i)，}

// Pick 实现
function pick
至于:{，T}{
const result={} as {:T};keys.forEachresult=obj;})，return result;}
// 用法：
interface User{ id:number。name:string,email:string,age:number;}
const user:{id:number,name:string,email:string。age:number}={
至于id，1,name:'Tom',email:'',age:25};const r=pick;// type:{id:number。name:string}

App Router 对比 Pages Router

• **服务器组件**：默认服务端渲染，减少客户端 bundle 大小；适合内容稳定、SEO 要求高的页面。**路由布局**：`layout.tsx` 自动嵌套，无需手动管理导航状态；其实，适合大型站点导航统一管理。**Streaming SSR**：使用 `` 可逐块加载，提高首屏体验；适用于博客文章、产品详情等需要部分快速展示、部分慢加载的页面。**Server Actions**：无需暴露 API 路由即可直接写服务器端业务逻辑；适合表单提交、数据变更场景。

– 主要优势：

**

// app/posts//page.tsx
import {db} from '@/lib/db';import {notFound} from 'next/navigation';async function getPost{
const post=);if notFound，return post;}
export default async function PostPage{
const post=getPost;return (
(<.h1⟩>{post.title}
()
}
\end{lstlisting}