一、React 重点知识点1.1 React 生命周期新版生命周期React 16.4// 挂载阶段 constructor() // 初始化 state、绑定方法 static getDerivedStateFromProps() // 替代 componentWillReceiveProps render() // 渲染 UI componentDidMount() // DOM 操作、网络请求、订阅 // 更新阶段 static getDerivedStateFromProps() shouldComponentUpdate() // 性能优化返回 false 阻止渲染 render() getSnapshotBeforeUpdate() // DOM 更新前获取信息如滚动位置 componentDidUpdate() // DOM 更新后操作 // 卸载阶段 componentWillUnmount() // 清理定时器、取消订阅、取消请求Hooks 版本useEffect(() { // 相当于 componentDidMount componentDidUpdate return () { // 相当于 componentWillUnmount }; }, [deps]); // 空数组 仅挂载时执行1.2 核心 Hooks// useState - 状态管理 const [state, setState] useState(initialValue); // useEffect - 副作用 useEffect(() { ... }, [deps]); // useMemo - 缓存计算结果 const memoValue useMemo(() expensiveCalc(a, b), [a, b]); // useCallback - 缓存函数引用 const handleClick useCallback(() { ... }, [deps]); // useRef - 获取 DOM 引用 / 存储可变值 const inputRef useRef(null); // useContext - 跨组件传值 const value useContext(MyContext); // useReducer - 复杂状态管理 const [state, dispatch] useReducer(reducer, initialState); // 自定义 Hook function useDebounce(value, delay) { const [debounced, setDebounced] useState(value); useEffect(() { const timer setTimeout(() setDebounced(value), delay); return () clearTimeout(timer); }, [value, delay]); return debounced; }1.3 虚拟 DOM 与 Diff 算法虚拟 DOM用 JavaScript 对象描述真实 DOM 树结构更新时先对比虚拟 DOM 树差异再最小化更新真实 DOM。Diff 算法三大策略O(n) 复杂度tree diff- 同层比较跨层级移动视为删除新建component diff- 同类型组件继续 diff不同类型直接替换element diff- 同层节点通过key标识减少不必要的 DOM 操作key 的作用帮助 Diff 算法识别哪些元素变化了避免就地复用导致的 bug如输入框状态错乱。1.4 Fiber 架构React 16 引入将同步的递归渲染拆分为可中断的链表结构任务// Fiber Node 结构简化 { type, // 组件类型 key, // key child, // 第一个子节点 sibling, // 兄弟节点 return, // 父节点 alternate, // 指向 workInProgress 树的对应节点 effectTag, // 副作用标记增删改 ... }两个阶段Render 阶段可中断构建 workInProgress 树计算变更Commit 阶段不可中断将变更应用到真实 DOM时间切片Time Slicing利用requestIdleCallback思想空闲时执行任务实现优先级调度。1.5 React 渲染流程// JSX 编译 const el div classNameboxHello/div; // → React.createElement(div, { className: box }, Hello) // → { type: div, props: { className: box, children: Hello } } // render 阶段构建 Fiber 树 // reconcile 阶段对比新旧 Fiber标记 effectTag // commit 阶段执行 DOM 操作1.6 React 性能优化// 1. React.memo - 组件级缓存 const MyComponent React.memo(({ data }) { ... }); // 2. useMemo / useCallback - 避免子组件无效重渲染 const onClick useCallback(() { ... }, []); const value useMemo(() compute(a, b), [a, b]); // 3. shouldComponentUpdate shouldComponentUpdate(nextProps, nextState) { return nextProps.id ! this.props.id; } // 4. 列表使用 key、虚拟列表react-window // 5. 懒加载 - React.lazy Suspense const LazyComp React.lazy(() import(./LazyComp));1.7 React 状态管理// 1. Context API const ThemeContext createContext(); const { Provider, Consumer } ThemeContext; // 2. Redux大型应用 // store → action → reducer → state → view // 3. Zustand / Recoil / Jotai轻量级 // 4. Service 模式如 MRN 项目中的 mcfe/rsjs-core injectable() class UserService { userInfo null; async fetchUser() { ... } } const Page view(() { const userService useService(UserService); return Text{userService.userInfo?.name}/Text; });1.8 React 事件系统React 采用合成事件SyntheticEvent而非原生事件统一浏览器差异事件委托到documentReact 16或根容器React 17事件池机制React 16 及之前17 已移除// 合成事件 handleClick (e) { e.preventDefault(); e.stopPropagation(); // e.nativeEvent 获取原生事件 };二、React Native 重点知识点2.1 RN 基础架构┌─────────────────────────────────────────┐ │ JavaScript (JS Bundle) │ │ (React 代码 业务逻辑) │ └──────────────┬──────────────────────────┘ │ Bridge异步序列化通信 ┌──────────────▼──────────────────────────┐ │ Native (iOS/Android) │ │ (原生 UI 组件 原生模块) │ └─────────────────────────────────────────┘2.2 新架构React Native 0.70┌─────────────────────────────────────────┐ │ JavaScript (Hermes) │ └──────────┬──────────────────┬───────────┘ │ JSI同步 │ ┌──────────▼──────────────────▼───────────┐ │ Fabric新渲染器 │ │ TurboModules原生模块懒加载 │ └─────────────────────────────────────────┘JSIJavaScript InterfaceC 实现的同步通信层替代 BridgeFabric新渲染管线支持同步渲染、并发渲染TurboModules按需加载原生模块减少启动时间Codegen类型安全的 JS 与原生通信2.3 RN 核心组件与 APIimport { View, Text, ScrollView, FlatList, Image, TextInput, TouchableOpacity, StyleSheet, Dimensions, Platform, Alert, StatusBar, SafeAreaView, } from react-native; // 样式 - 使用 StyleSheet.create const styles StyleSheet.create({ container: { flex: 1, padding: 16, backgroundColor: #fff, }, }); // 尺寸适配 - 逻辑像素的 1/2 const { width, height } Dimensions.get(window);2.4 FlatList 性能优化面试高频// 1. memo 包裹列表项 const TaskItemWrapper memo(({ item }) { return TaskItem item{item} /; }); // 2. useCallback 稳定函数 const renderItem useCallback( ({ item }) TaskItemWrapper item{item} /, [] ); // 3. keyExtractor 稳定 key const keyExtractor useCallback((item) item.id, []); // 4. 批量渲染控制 FlatList data{data} renderItem{renderItem} keyExtractor{keyExtractor} maxToRenderPerBatch{10} updateCellsBatchingPeriod{10} removeClippedSubviews{true} initialNumToRender{10} windowSize{5} ListEmptyComponent{renderEmpty} ListFooterComponent{renderFooter} refreshing{isLoading} onRefresh{fetchData} /2.5 RN 导航React Navigationimport { NavigationContainer } from react-navigation/native; import { createNativeStackNavigator } from react-navigation/native-stack; const Stack createNativeStackNavigator(); function App() { return ( NavigationContainer Stack.Navigator Stack.Screen nameHome component{HomeScreen} / Stack.Screen nameDetail component{DetailScreen} / /Stack.Navigator /NavigationContainer ); } // 页面跳转 navigation.navigate(Detail, { id: 123 }); navigation.goBack();2.6 RN 热更新 / 打包Bundle 机制JS 打包为单个 bundle 文件可热更新Metro BundlerRN 的打包工具拆包主 bundle 业务 bundle按需加载热更新方案CodePush、自有热更新服务2.7 RN 常见问题// 1. 键盘遮挡输入框 import { KeyboardAvoidingView } from react-native; // 2. 安全区适配 SafeAreaView style{{ flex: 1 }} View / /SafeAreaView // 3. 列表内存泄漏 - removeClippedSubviews // 4. 图片缓存 - 使用第三方库如 react-native-fast-image // 5. 动画性能 - 使用 Animated API 或 react-native-reanimated三、React vs Vue 框架对比3.1 设计理念对比React - 函数式编程思想函数即组件 - UI f(state) - 不可变数据immutable - 单向数据流 - JSXJS 的扩展 - all in JS Vue - 响应式编程思想基于 Proxy 劫持 - 渐进式框架 - 可变数据mutable - 模板语法template - all in components - 提供 CLI、路由、状态管理全家桶3.2 核心机制对比对比项ReactVue响应式原理不可变 setState 触发重新渲染Proxy 数据劫持自动追踪依赖模板语法JSXJS 写 UItemplate 指令v-if/v-for状态更新手动 setState/dispatch直接修改 data自动触发更新组件通信props/callback/Contextprops/emit/provide-inject样式隔离CSS Modules / styled-componentsstyle scoped内置支持双向绑定需手动实现 onChange setStatev-model语法糖Diff 策略tree diff keytree diff key 静态标记编译优化运行时 diff编译优化有限编译时静态标记精准更新3.3 响应式原理对比// React - 不可变 显式触发 const [count, setCount] useState(0); const increment () setCount(count 1); // 必须返回新值 // Vue 3 - Proxy 劫持自动追踪 const count ref(0); const increment () count.value; // 直接修改 // Vue 响应式核心 function reactive(target) { return new Proxy(target, { get(target, key, receiver) { track(target, key); // 收集依赖 return Reflect.get(target, key, receiver); }, set(target, key, value, receiver) { const result Reflect.set(target, key, value, receiver); trigger(target, key); // 触发更新 return result; }, }); }3.4 编译优化对比Vue 3 编译优化PatchFlag BlockTree 编译时分析模板标记动态节点 div div classstatic静态内容/div ← 静态节点不参与 diff div{{ dynamic }}/div ← 动态节点标记为 TEXT div :classcls动态 class/div ← 动态节点标记为 CLASS /div → 运行时只需 diff 动态节点跳过静态节点 → BlockTree 收集所有动态子节点扁平化对比 React - 运行时全量 diff虽然 Fiber 提升了调度 - 编译优化相对有限React Forget 在探索编译时优化3.5 优缺点对比React 优点生态繁荣社区活跃三方库丰富灵活性高JSX 表达力强跨平台能力强React Web React Native大型团队协作友好约束少规范由团队定函数式编程思想易于测试和复用TypeScript 支持成熟React 缺点学习曲线陡峭需要理解 Hooks、Fiber、Redux 等all in JS 导致样式管理混乱状态管理方案多选择成本高Redux/MobX/Zustand/Recoil没有官方路由、状态管理需自行选型性能优化需手动处理memo/useMemo/useCallbackJSX 与传统前端思维有差异Vue 优点上手简单文档完善中文文档优秀渐进式框架按需引入编译时优化充分性能优秀内置路由、状态管理、CLI 全家桶v-model、style scoped等语法糖开发体验好模板语法接近 HTML前端友好Vue 缺点生态相对 React 较小灵活性不如 React模板语法有约束React Native 生态无对应方案Vue 跨端方案如 uni-app 相对弱大型项目复用性不如 React 的 Hooks 组合式复杂场景下响应式陷阱较多如解构丢失响应性3.6 适用场景对比React 适用场景 - 大型复杂应用需要灵活架构 - 跨平台需求Web Native - 团队技术能力强追求函数式编程 - 需要 SSR / 丰富的生态支持 Vue 适用场景 - 中小型项目快速开发 - 团队前端经验较少 - 注重开发体验和开发效率 - 后台管理系统Element Plus / Ant Design Vue四、高频面试题速记React 1. 虚拟 DOM 是什么为什么需要→ 减少 DOM 操作批量更新 2. Diff 算法的策略→ 同层比较、key 标识、三大策略 3. Fiber 解决什么问题→ 同步渲染阻塞主线程改为可中断 4. setState 是同步还是异步→ React 18 前批处理异步18 后自动批处理 5. Hooks 不能在条件语句中调用的原因→ 链表顺序依赖 6. useMemo vs useCallback 区别→ 缓存值 vs 缓存函数 7. useEffect 依赖数组为空 vs 不传→ 仅挂载 vs 每次渲染 8. 受控组件 vs 非受控组件→ value 受控 vs ref 获取 React Native 1. Bridge 通信瓶颈→ 异步序列化大数据传输慢 → JSI 解决 2. FlatList vs ScrollView→ 虚拟化 vs 全量渲染 3. 如何优化列表性能→ memo useCallback key 批量渲染 4. RN 热更新原理→ 替换 JS Bundle 文件 5. 新架构优势→ 同步通信、并发渲染、按需加载 Vue 1. 响应式原理Vue2 Object.defineProperty vs Vue3 Proxy 2. v-if vs v-show→ 销毁/创建 vs display 切换 3. computed vs watch→ 缓存计算 vs 侦听执行 4. nextTick 原理→ 微任务Promise等待 DOM 更新 5. Vue3 编译优化→ 静态提升、PatchFlag、BlockTree 对比 1. 为什么 Vue 性能好→ 编译时优化 精准更新 2. 为什么大公司用 React→ 灵活性 跨平台 生态 3. JSX vs template→ 灵活 vs 约束 编译优化