前端 React 50 个基础高频面试题精选

本文整理了前端面试中关于 React 的核心高频问题，涵盖基础概念、组件通信、Hooks 机制、性能优化及生态工具等知识点，适合求职者系统复习。

1、什么是 React？

React 是一个用于构建用户界面的 JavaScript 库。它遵循组件设计模式、声明式编程范式和函数式编程概念，通过虚拟 DOM 高效操作真实 DOM，并采用单向数据流将界面拆分为独立可组合的组件块。

2、React 有什么特点？

使用虚拟 DOM 而非直接操作真实 DOM
支持服务器端渲染 (SSR)
遵循单向数据流或数据绑定
支持 JSX 语法
声明式编程风格
组件化开发

3、列出 React 的一些主要优点。

组件式开发，提高代码复用率
客户端和服务器端均可使用
JSX 语法提升了代码可读性
易于与其他框架（如 Meteor）集成
UI 测试用例编写方便
单向响应数据流比双向绑定更安全且速度更快

4、React 有哪些限制？

只是一个库，并非完整框架
学习曲线较陡，理解成本较高
新手可能难以快速上手
内联模板和 JSX 增加了编码复杂度

5、什么是 JSX？

JSX 是 JavaScript XML 的简写。它允许在 JavaScript 中使用类似 HTML 的模板语法，使 HTML 结构更易理解。本质上是在 JS 中编写 HTML，需经 Babel 等转换器编译为浏览器可识别的对象。

6、为什么浏览器无法读取 JSX？

浏览器只能解析标准 JavaScript 对象，无法直接处理 JSX 语法。因此需要使用 Babel 等编译器将 JSX 转换为普通 JavaScript 对象后，才能被浏览器执行。

7、React 中的组件是什么？

组件是 React 应用的构建块，是独立且可重用的代码片段，用于定义 UI 的一部分。组件可以是类组件或函数组件，能够维护自身的状态和生命周期。

8、怎样解释 React 中 render() 的目的？

每个 React 组件必须包含一个 render() 方法，它返回一个 React 元素，即原生 DOM 组件的表示。若需渲染多个 HTML 元素，必须将它们包裹在一个父标签内（如 <div>）。此函数应保持纯净，每次调用返回相同结果。

9、什么是 Props？

Props 是属性的简写，作为只读数据传递给组件。它们始终保持不可变，通常从父组件流向子组件，有助于维护单向数据流，常用于呈现动态生成的数据。

10、React 中的状态是什么？它是如何使用的？

状态是组件的核心数据来源，决定了组件的呈现和行为。与 props 不同，state 是可变的，用于创建动态交互组件。可通过 this.state 访问（类组件）或使用 Hook（函数组件）管理。

11、React 中的箭头函数是什么？使用箭头函数的好处？

箭头函数是 ES6 提供的简洁函数表达式语法。在 React 中主要用于正确绑定组件上下文，解决事件处理器中 this 指向问题。

好处：

语法简洁
不绑定 this，继承词法作用域
不绑定 arguments
不可用作构造函数
不支持 yield 关键字

12、什么是高阶组件（HOC）？

高阶组件是一种重用组件逻辑的高级模式，本质是接收组件并返回新组件的函数。它不会修改输入组件的行为，而是增强其功能，类似于'纯'组件包装器。

13、你能用 HOC 做什么？

代码重用与逻辑抽象
渲染劫持
状态抽象与控制
Props 控制

14、什么是纯组件？

纯组件是最简单高效的组件形式，通常仅包含 render() 方法。它们能自动比较 props 和 state 的变化，减少不必要的渲染，提升应用性能。

15、React 中 key 的重要性是什么？

key 用于唯一标识 Virtual DOM 元素，帮助 React 优化渲染过程。列表项需要唯一的 key 来识别哪些项已改变、添加或删除，从而避免全量重绘，提升列表操作性能。

16、什么是 React 路由？

React Router 是构建在 React 之上的强大路由库，用于单页应用开发。它负责维护 URL 与页面数据的同步，提供标准化的结构和行为，API 简单易用。

17、为什么 useState 返回的是数组而不是对象？

主要是为了配合解构赋值。返回数组允许开发者自由命名变量，代码更清晰；若返回对象则变量名必须与值同名，灵活性较差。

18、如何实现 React 懒加载？

React 16.6+ 提供了 React.lazy 配合 Suspense 实现组件懒加载，结合 Webpack 的 code-splitting 特性可实现按需加载。

import React, { Suspense } from 'react';
const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <OtherComponent />
      </Suspense>
    </div>
  );
}

19、React VS Vue 有何区别

设计理念：React 偏向函数式编程，推崇不可变性；Vue 结合响应式与模板系统，简化开发。
组件化方式：React 共享状态树；Vue 每个组件独立状态。
数据驱动：React 单向数据流 + setState；Vue 支持双向绑定 v-model。
模板语法：React 使用 JSX；Vue 使用基于 HTML 的模板。
生命周期：React 初始化/更新/卸载；Vue 创建/挂载/更新/销毁。
状态管理：React 常用 Context/Redux；Vue 官方推荐 Vuex。
性能优化：React 用 memo/shouldComponentUpdate；Vue 用 keep-alive/v-if。
响应式系统：React 显式触发更新；Vue 自动追踪依赖。
类型支持：React 原生 JS + TS；Vue 3 对 TS 支持更好。

20、React 组件之间如何通信

父传子：Props、ref
子传父：回调函数、事件冒泡、useImperativeHandle + forwardRef
兄弟组件：通过公共父组件中转
无关组件：Context、全局变量、观察者模式、Redux/Mobx/Dva

21、什么是 useReducer

useReducer 是 Hooks 中用于管理复杂状态逻辑的替代方案，适用于状态变更逻辑较多的场景。它将状态更新逻辑封装在 reducer 函数中，根据动作类型执行相应逻辑，便于维护和调试。

22、React 类式组件和函数式组件的区别

思想：函数式组件基于函数式编程；类组件基于面向对象。
生命周期与状态：类组件使用 state 对象及生命周期钩子；函数组件使用 Hooks（useState, useEffect）模拟。
复用性：类组件常用 HOC/Render Props；函数组件常用自定义 Hooks。
注意：避免在循环/条件中调用 Hooks；类组件不会被废弃，两者并存。

23、setState 是同步还是异步？

React 18 之前：合成事件和钩子函数中表现为异步，Promise/原生事件/定时器中为同步。实际执行是同步的，只是更新时机延后。
React 18 之后：默认开启批处理，setState 均表现为异步。

24、React 服务端渲染（SSR）原理？

Node 服务接收请求，匹配路由获取组件及数据。
通过 renderToString() 将组件渲染为 HTML 字符串。
注入数据至浏览器端，浏览器复用服务端 HTML 节点并绑定事件。

25、常用的 React Hooks

useState：定义组件 State
useReducer：管理复杂状态逻辑
useEffect：处理副作用，类似 componentDidMount/update/unmount
useLayoutEffect：DOM 变更后同步执行，防闪烁
useContext：获取共享上下文
useCallback：缓存回调函数，优化性能
useMemo：缓存计算结果
useRef：保存可变值，不触发渲染
useImperativeHandle：暴露实例方法给父组件
useDebugValue：开发者工具显示标签

26、useEffect VS useLayoutEffect

useEffect：异步调用，渲染完成后执行，适用于大多数场景。
useLayoutEffect：同步调用，DOM 变更后立即执行，用于调整样式或避免闪烁，但耗时任务会阻塞渲染。

27、React 中的 state 和 props 的区别

来源：props 由外部传入；state 由组件内部管理。
可变性：props 不可变；state 可变。
触发更新：两者修改均可触发渲染。

28、React 中的虚拟 DOM 是什么

虚拟 DOM 是内存中的 DOM 对象描述。React 通过对比新旧虚拟 DOM 的差异，仅更新真实 DOM 中变化的部分，从而优化性能。

29、React 的生命周期方法有哪些？

componentWillMount：渲染前执行
componentDidMount：首次渲染后执行，适合 AJAX 请求
componentWillReceiveProps：接收新 props 时触发
shouldComponentUpdate：判断是否更新，默认 true
componentWillUpdate：更新前执行
componentDidUpdate：更新后执行，响应 props/state 变化
componentWillUnmount：卸载前清理资源

30、为什么使用 React Hooks

Hooks 允许提取跨组件的状态逻辑，无需高阶组件或 Render Props。它让函数组件也能拥有状态和生命周期能力，避免了类组件的复杂性。

31、父子组件的 useEffect 哪个先执行？

React 保证每次运行 useEffect 时 DOM 已更新。通常子组件先执行，父组件后执行。若需父组件优先，可考虑 useLayoutEffect。

32、什么是 Virtual DOM

Virtual DOM 是以 JavaScript 对象形式存在的 DOM 描述。它与真实 DOM 属性一一对应，旨在优化渲染流程，减少直接 DOM 操作带来的性能损耗。

33、Virtual DOM 工作过程有三个简单的步骤

数据改变时，UI 在 Virtual DOM 中重新渲染。
计算新旧表示之间的差异（Diff）。
仅更新真实 DOM 中发生变化的部分。

34、受控组件和非受控组件的区别

受控组件：表单值由 React 状态控制，通过 setState 更新。
非受控组件：表单值由 DOM 自身处理，通过 Refs 获取当前值。

35、React 18 有哪些更新

并发模式
更新 render API
自动批处理
Suspense 支持 SSR
startTransition / useTransition
useDeferredValue
useId
提供给第三方库的 Hook

36、React 事件机制和原生 DOM 事件流有什么区别？

React 事件绑定在 document 上，通过事件委托收集处理函数；原生事件直接绑定在 DOM 节点上。因此原生事件优先级高于 document 上的 React 事件。

37、Redux 工作原理

Redux 是基于存储容器概念的状态管理库。组件通过 props 接收数据，更新存储的唯一方式是发送 Action，Action 被传递到 Reducer，Reducer 返回新状态并触发订阅组件重新渲染。

38、React-Router 工作原理？react-router-dom 有哪些组件

核心组件：路由器、路由匹配、导航组件
History 库：BrowserHistory、HashHistory、MemoryHistory
API：pushState、replaceState、location.hash 等

39、React 如何做到和 Vue 中 keep-alive 的缓存效果

React 没有内置 keep-alive，但可通过第三方库或手动管理组件状态实现。需确保组件拥有唯一 key，并置于 Provider 内部以维持状态。

40、React 有哪几种创建组件的方法

React.createClass（已废弃）
ES6 class
无状态函数（Function Component）

41、React Diff 原理

按层级分解树形结构，只比较同级元素
列表单元添加唯一 key 属性
仅匹配相同类型的组件
合并操作标记为 dirty，事件循环结束时统一绘制
支持选择性子树渲染（shouldComponentUpdate）

42、为什么虚拟 DOM 会提高性能

虚拟 DOM 充当 JS 与真实 DOM 间的缓存层，利用 Diff 算法避免不必要的 DOM 操作，从而显著提升性能。

43、useCallback 和 useMemo 的使用场景

useCallback：缓存函数体，避免依赖项不变时生成新函数实例，常用于 useEffect 依赖或 memo 组件 props。
useMemo：缓存计算结果，适用于复杂运算或依赖其他变量的场景。

44、为什么 JSX 中 class 变成了 className？

因为 class 是 JavaScript 关键字，用于定义类。为避免冲突，JSX 中使用 className 表示 HTML 元素的类名。

45、什么是 React Diff，对比 Vue Diff？

React Diff：基于深度优先遍历，假设不同类型元素产生不同树，依赖 key 稳定节点。发现类型不同时替换整棵子树。
Vue Diff：同样优先判断节点类型，但对静态节点有额外优化，减少重复比较。

46、react 合成事件

React 合成事件屏蔽了浏览器差异，统一了事件接口。事件绑定在 document 上，按冒泡或捕获路径收集处理函数，解决了兼容性问题。

47、ajax 应该放在哪个生命周期？

类组件：componentDidMount，此时组件已挂载，适合发起请求。
Hooks：useEffect，依赖空数组 [] 模拟 componentDidMount。

48、说一下 React Hooks 在平时开发中需要注意的问题和原因？

只能在函数中使用：专为函数组件设计。
必须在最外层调用：不能嵌套在 if/for 中，保证调用顺序稳定。
引用类型更新：修改 state 时需返回新引用地址，否则 React 认为未更新。

49、请结合 React Router 实现 React 项目的路由守卫

基本思路是利用 Route 的 render 函数，判断拦截条件（如登录态），满足条件跳转目标组件，否则重定向至登录页。

50、是否使用过 React Portals，在什么场景下使用？

Portal 允许将子节点渲染到父组件以外的 DOM 节点。典型场景包括对话框、悬浮卡、提示框等需要突破父容器 overflow 或 z-index 限制的情况。