Frontend Masters

Appearance

React 高频面试题 50 道 ​

这里汇总了 50 道 React 开发岗位常问的面试题，涵盖从基础到原理的各个方面。

一、基础概念 (1-10) ​

  1. React 所有的 React 库都有哪些主要特性？
    • Virtual DOM、单向数据流、组件化、声明式编程。
  2. 什么是 JSX？浏览器能直接读取 JSX 吗？
    • JSX 是 JavaScript XML 的语法糖。浏览器不能直接读取，需要 Babel 转译成 React.createElement 调用。
  3. Real DOM 和 Virtual DOM 的区别是什么？
    • Real DOM 操作昂贵，更新慢；Virtual DOM 是内存中的 JS 对象，更新快，通过 Diff 算法最小化 Real DOM 操作。
  4. Props 和 State 的区别？
    • Props 是父组件传递给子组件的配置，是只读的。State 是组件内部管理的动态数据，是私有的。
  5. 什么是“提升状态” (Lifting State Up)？
    • 将多个组件共享的状态移动到它们最近的共同父组件中管理。
  6. React 中 keys 的作用是什么？
    • 帮助 React 识别哪些元素改变了、添加了或被移除了。在列表渲染中必须唯一且稳定，不建议使用索引 (index)。
  7. 受控组件 (Controlled) 与非受控组件 (Uncontrolled) 的区别？
    • 受控：表单数据由 React State 控制 (value + onChange)。
    • 非受控：表单数据由 DOM 本身处理，使用 ref 获取值。
  8. setState 是同步还是异步的？
    • 在 React 18 之前，在合成事件和生命周期中是异步（批处理）的，在原生事件/setTimeout 中是同步的。React 18 引入自动批处理，大部分情况表现为异步。
  9. 什么是合成事件 (SyntheticEvent)？
    • React 对原生 DOM 事件的跨浏览器封装，为了性能和兼容性，实现了事件委托机制。
  10. React 18 有哪些新特性？
    • 并发模式 (Concurrent Mode), 自动批处理 (Automatic Batching), useTransition, useDeferredValue, Suspense 的改进。

二、组件与生命周期 (11-20) ​

  1. 类组件和函数组件的区别？
    • 类组件有实例、生命周期、State (以前)；函数组件更轻量，无 this，通过 Hooks 处理状态和副作用。
  2. React 类组件有哪些主要生命周期？
    • 挂载: constructor, render, componentDidMount.
    • 更新: shouldComponentUpdate, render, componentDidUpdate.
    • 卸载: componentWillUnmount.
  3. componentDidMount 和 useEffect(() => {}, []) 是一样的吗？
    • 在效果上基本一致（都在渲染后执行），但 useEffect 是异步调度的，不会阻塞浏览器绘制。
  4. shouldComponentUpdate 的作用是什么？
    • 性能优化。返回 false 可以阻止组件重新渲染。
  5. 什么是 PureComponent？
    • 自动在 shouldComponentUpdate 中对 props 和 state 进行浅比较 (Shallow Compare) 的类组件。
  6. 父组件 render，子组件一定会 render 吗？
    • 默认会。除非子组件使用了 React.memo (函数组件) 或 PureComponent (类组件)。
  7. React 中的 Context 是什么？
    • 一种组件间共享数据的方式，避免“Props Drilling” (层层传递)。
  8. 什么是高阶组件 (HOC)？
    • 一个参数为组件，返回值为新组件的函数。用于复用逻辑。
  9. 什么是 Render Props？
    • 一种通过值为函数的 prop 来共享代码的技术。
  10. 什么是 Portals？
    • 将子节点渲染到父组件 DOM 层次结构之外的 DOM 节点（如 document.body），常用于模态框。

三、Hooks (21-30) ​

  1. 为什么 Hooks 不能在循环、条件或嵌套函数中调用？
    • React 依赖 Hooks 的调用顺序来关联 state 和 effect。如果顺序改变，状态会错乱。
  2. useEffect 和 useLayoutEffect 的区别？
    • useEffect 是异步的，在浏览器绘制后执行。useLayoutEffect 是同步的，在 DOM 变更后、绘制前执行（会阻塞视觉更新），适合测量 DOM。
  3. useMemo 和 useCallback 的区别？
    • useMemo 缓存计算结果（值）。useCallback 缓存函数引用。
  4. useRef 的作用？
    • 访问 DOM 节点；保存可变变量（修改不会触发重渲染）。
  5. 如何自定义 Hook？
    • 创建一个以 use 开头的函数，内部调用其他 Hooks，通常用于提取复用逻辑。
  6. useReducer 和 useState 的关系？
    • useState 是基于 useReducer 实现的简易版。逻辑复杂或状态相互依赖时推荐 useReducer。
  7. useEffect 的依赖数组传空数组 [] 代表什么？
    • 代表 effect 不依赖 props 或 state 中的任何值，只在组件挂载和卸载时执行一次。
  8. 如何强制函数组件重新渲染？
    • 使用 useReducer ((x) => x + 1, 0) 或创建一个不显示使用的 state 并更新它。
  9. React Hooks 可以在 Class 组件中使用吗？
    • 不可以。
  10. 什么是 Stale Closure (闭包陷阱)？如何解决？
    • useEffect 或回调中引用了旧的 state。解决办法：将依赖加入依赖数组，或使用函数式更新 setState(prev => ...)。

四、状态管理与路由 (31-40) ​

  1. Redux 的三大原则是什么？
    • 单一数据源；State 是只读的；使用纯函数 (Reducer) 也就是通过 Action 修改 State。
  2. Redux 中 dispatch 是同步还是异步的？
    • 默认是同步的。
  3. React-Redux 中 connect 和 useSelector/useDispatch 的区别？
    • connect 是 HOC 模式，通过 props 注入；Hooks 模式更简洁，代码量更少。
  4. Redux 中间件 (Middleware) 的作用？列举常用的。
    • 处理副作用 (如异步请求)。常用：redux-thunk, redux-saga.
  5. React Router 中 <Link> 和 <a> 标签的区别？
    • <Link> 阻止了默认刷新页面行为，利用 History API 进行无刷新跳转。<a> 会导致页面完全刷新。
  6. React Router 如何获取 URL 参数？
    • Hooks: useParams (路径参数), useSearchParams (查询参数).
  7. HashRouter 和 BrowserRouter 的区别？
    • HashRouter 使用 URL 的 Hash (#)，兼容性好；BrowserRouter 使用 History API，URL 更美观，但需要服务器配置支持。
  8. 什么是 MobX？它和 Redux 有什么区别？
    • MobX 是响应式状态管理（基于观察者模式），数据是可变的。Redux 是函数式，数据不可变。MobX 更自动、简单，Redux 更可控、严谨。
  9. Context API 能取代 Redux 吗？
    • 对于低频更新的全局状态（主题、UserInfo）可以；对于高频更新或复杂逻辑，Context 可能会有性能问题（导致整树重渲染），Redux 依然有优势。
  10. 如何实现路由懒加载？
    • React.lazy() 配合 Suspense 或 loadable-components。

五、性能优化与进阶 (41-50) ​

  1. React 性能优化的常见手段有哪些？
    • React.memo / PureComponent。
    • useMemo / useCallback 缓存计算和引用。
    • 路由懒加载。
    • 虚拟列表 (Virtual List) 渲染长列表。
    • 避免在 render 中定义匿名函数。
  2. React Fiber 是什么？解决什么问题？
    • React 16 引入的新的协调引擎。将渲染任务拆分为小的工作单元（Fiber），通过时间切片实现可中断渲染，解决主线程阻塞导致的卡顿问题。
  3. 什么是错误边界 (Error Boundaries)？
    • 一种 React 组件，捕获子组件树中的 JS 错误，记录日志并展示降级 UI。必须是类组件，实现 componentDidCatch 或 getDerivedStateFromError。
  4. Server Side Rendering (SSR) 的优缺点？
    • 优：SEO 友好，首屏加载快。缺：服务器压力大，开发复杂度高。
  5. React 中如何防范 XSS 攻击？
    • React 在渲染所有数据前会默认进行转义。但使用 dangerouslySetInnerHTML 时需特别小心。
  6. key 使用 index 会有什么问题？
    • 如果列表项顺序变化、删除或插入，使用 index 会导致 React 错误复用组件状态，引发 Bug 和性能问题。
  7. 如何在 React 中进行代码复用？
    • 组件提取、HOC、Render Props、Custom Hooks (推荐)。
  8. useEffect 中如何使用 async/await？
    • 不能直接让 effect 函数 async。应该在内部定义一个 async 函数并调用它，或使用 IIFE。
  9. React Diff 算法的策略是什么？
    • 只比较同级元素 (Tree Diff)；组件类型不同直接替换 (Component Diff)；通过 Key 区分同级节点 (Element Diff)。
  10. Concurrent Mode (并发模式) 是什么？
    • 允许 React 在渲染过程中中断工作，优先处理高优先级任务（如用户输入），使页面保持响应。

MIT Licensed | Keep Learning.

Copyright © 2026 Frontend Masters