原文链接: https://interview.poetries.top/docs/excellent-docs/6-React.html

React

简版速记

面试前 5 分钟扫一遍的高频要点，详细展开见对应小节。

不可变性：state/props 视为只读，更新要生成新引用（展开运算符 / Immer）。配合浅比较（PureComponent、React.memo、useMemo）减少重渲染。
JSX 本质：<div/> 编译为 React.createElement(type, props, ...children)，返回 vnode。React 17+ 支持新 JSX transform，可不显式 import React。
合成事件：React 自有事件系统。React 16 委托到 document，React 17 起委托到根容器（root container），便于多版本共存。事件对象是合成对象（SyntheticEvent）。
setState：在 React 合成事件/生命周期中异步合并（batch）；React 18 起默认全场景自动批处理（含 setTimeout、Promise、原生事件）。需要连续读取最新值时用函数式更新 setX(prev => ...)。
Diff：同层比较 + key 标识 + 组件类型决定复用。key 不要用 index（列表增删/排序会错位）。
生命周期（class）：挂载 constructor → render → componentDidMount；更新 render → componentDidUpdate；卸载 componentWillUnmount。will* 系列已废弃，改用 getDerivedStateFromProps / getSnapshotBeforeUpdate。
受控 vs 非受控：受控由 state 驱动（value + onChange）；非受控用 ref 读 DOM（如文件上传）。
Hooks 规则：只在函数组件顶层调用，不能放进条件/循环/嵌套函数（依赖固定调用顺序）。useEffect 依赖数组要诚实声明，返回值用于清理。
复用手段：自定义 Hook（首选）> Render Props > HOC。
性能优化：React.memo + useMemo / useCallback，列表稳定 key，路由/大组件 React.lazy + Suspense 懒加载。
React 18：createRoot 取代 ReactDOM.render，自动批处理，并发特性 startTransition / useTransition / useDeferredValue，新增 useId / useSyncExternalStore / useInsertionEffect。
$$typeof：React Element 上的 Symbol 标记，防止 JSON 注入伪造元素的 XSS。

React

简版速记

目录

详情