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

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）原理？

1. Node 服务接收请求，匹配路由获取组件及数据。
2. 通过 renderToString() 将组件渲染为 HTML 字符串。
3. 注入数据至浏览器端，浏览器复用服务端 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 工作过程有三个简单的步骤

1. 数据改变时，UI 在 Virtual DOM 中重新渲染。
2. 计算新旧表示之间的差异（Diff）。
3. 仅更新真实 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 有哪几种创建组件的方法

1. React.createClass（已废弃）
2. ES6 class
3. 无状态函数（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 限制的情况。