编程马·菜鸟教程

Appearance

第18章：React 新手面试题（基础版） ​

React 是前端开发中最流行的框架之一，掌握 React 的核心概念和实战技能对于前端开发者来说非常重要。本章整理了一些常见的 React 新手面试题，帮助你准备面试，提升求职竞争力。

18.1 基础概念题（React定义、JSX语法、Hooks定义等） ​

18.1.1 什么是 React？ ​

问题：请简要介绍一下 React 是什么，它的核心特点是什么？

参考答案： React 是 Facebook 开发的一个用于构建用户界面的 JavaScript 库。它的核心特点包括：

  • 组件化：将 UI 拆分为独立、可复用的组件
  • 虚拟 DOM：通过虚拟 DOM 提高渲染性能
  • 单向数据流：数据从父组件流向子组件，使状态管理更加可预测
  • 声明式编程：只需描述 UI 应该是什么样子，React 会处理如何更新 DOM

18.1.2 什么是 JSX？ ​

问题：什么是 JSX？它与 HTML 有什么区别？

参考答案： JSX 是 JavaScript XML 的缩写，是一种在 React 中用于描述 UI 结构的语法扩展。它允许我们在 JavaScript 代码中直接编写类似 HTML 的代码。

与 HTML 的区别：

  • JSX 中使用 className 替代 class（避免与 JavaScript 关键字冲突）
  • JSX 中使用 htmlFor 替代 for（同样避免关键字冲突）
  • JSX 中可以嵌入 JavaScript 表达式（使用 {} 包裹）
  • JSX 中必须确保标签正确闭合
  • JSX 中样式使用对象形式（style={ { color: 'red' } }）

18.1.3 什么是 React Hooks？ ​

问题：什么是 React Hooks？它们解决了什么问题？

参考答案： React Hooks 是 React 16.8 引入的特性，允许我们在函数组件中使用状态和其他 React 特性，而不需要编写类组件。

Hooks 解决的问题：

  • 类组件中的逻辑难以复用
  • 类组件中的生命周期方法导致代码分散
  • 类组件中的 this 绑定问题
  • 函数组件无法使用状态和其他 React 特性

18.1.4 什么是虚拟 DOM？ ​

问题：什么是虚拟 DOM？它如何提高 React 的性能？

参考答案： 虚拟 DOM 是 React 中的一个概念，指的是一个轻量级的 JavaScript 对象，用于描述真实 DOM 的结构和属性。

虚拟 DOM 提高性能的方式：

  • 批处理：React 会收集所有状态更新，然后一次性更新 DOM
  • ** diff 算法**：React 会比较虚拟 DOM 的前后状态，只更新发生变化的部分
  • 减少 DOM 操作：DOM 操作是昂贵的，虚拟 DOM 减少了直接操作 DOM 的次数

18.1.5 什么是组件？ ​

问题：什么是 React 组件？组件的作用是什么？

参考答案： React 组件是构建 React 应用的基本单位，是一个可复用的 UI 片段，具有自己的状态和 props。

组件的作用：

  • 代码复用：将 UI 拆分为独立的、可复用的组件
  • 关注点分离：每个组件负责特定的功能，使代码更易于维护
  • 提高开发效率：组件化开发可以并行开发不同部分
  • 便于测试：组件可以单独测试，提高代码质量

18.2 核心语法题（useState、useEffect使用场景，组件通信方式等） ​

18.2.1 useState Hook 的使用 ​

问题：请解释 useState Hook 的使用方法和注意事项。

参考答案： useState 是 React 中用于管理组件状态的 Hook。

使用方法：

jsx
import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

注意事项：

  • useState 返回一个状态变量和一个更新状态的函数
  • 状态更新是异步的，不能在更新后立即获取新状态
  • 对于复杂状态（对象、数组），需要创建新的副本，而不是直接修改
  • 初始值只在组件首次渲染时使用

18.2.2 useEffect Hook 的使用 ​

问题：请解释 useEffect Hook 的使用方法和依赖项的作用。

参考答案： useEffect 是 React 中用于处理副作用的 Hook，如数据获取、订阅、DOM 操作等。

使用方法：

jsx
import { useState, useEffect } from 'react';

function UserList() {
  const [users, setUsers] = useState([]);
  
  useEffect(() => {
    // 副作用代码
    fetch('https://api.example.com/users')
      .then(response => response.json())
      .then(data => setUsers(data));
    
    // 清理函数
    return () => {
      // 清理代码，如取消订阅
    };
  }, []); // 依赖项数组
  
  return (
    <ul>
      {users.map(user => <li key={user.id}>{user.name}</li>)}
    </ul>
  );
}

依赖项的作用：

  • 空依赖数组 []：副作用只在组件挂载和卸载时执行
  • 有依赖项：副作用在依赖项变化时重新执行
  • 没有依赖项：副作用在每次渲染后都执行

18.2.3 组件通信方式 ​

问题：React 中组件之间有哪些通信方式？

参考答案： React 中组件通信的方式包括：

  1. 父传子：通过 props 传递数据
  2. 子传父：通过回调函数传递数据
  3. 跨组件通信：使用 Context API
  4. 全局状态管理：使用 Redux、Zustand 等状态管理库
  5. Ref：使用 useRef 在父子组件之间共享 DOM 节点或值

18.2.4 什么是 props？ ​

问题：什么是 props？它们的特点是什么？

参考答案： props 是 properties 的缩写，是 React 组件之间传递数据的方式。

props 的特点：

  • 只读性：组件不能修改收到的 props
  • 传递性：props 可以从父组件传递到子组件
  • 类型检查：可以使用 PropTypes 或 TypeScript 进行类型检查
  • 默认值：可以为 props 设置默认值

18.2.5 什么是状态提升？ ​

问题：什么是状态提升？在什么情况下需要使用状态提升？

参考答案： 状态提升是指将组件的状态从子组件移动到父组件，以便在多个子组件之间共享状态。

需要使用状态提升的情况：

  • 多个组件需要访问和修改同一个状态
  • 组件之间需要根据同一个状态进行协调
  • 子组件之间需要共享数据

18.3 实战场景题（跨域解决方案、状态管理选型、性能优化等） ​

18.3.1 跨域问题解决方案 ​

问题：在 React 开发中，如何解决跨域问题？

参考答案： 跨域问题的解决方案包括：

  1. 开发环境：

    • 使用 Vite 或 Create React App 的代理配置
    • 在 vite.config.js 中配置 proxy
    • 在 package.json 中配置 proxy

  2. 生产环境：

    • 后端配置 CORS（跨域资源共享）
    • 使用反向代理服务器（如 Nginx）

  3. 其他方案：

    • JSONP（只支持 GET 请求）
    • WebSocket（不受同源策略限制）

18.3.2 状态管理选型 ​

问题：在 React 项目中，如何选择合适的状态管理方案？

参考答案： 状态管理方案的选择取决于项目规模和复杂度：

  1. 小型项目：

    • 使用 useState + useEffect 管理本地状态
    • 使用 Context API 管理全局状态

  2. 中型项目：

    • 使用 useReducer + Context API
    • 使用 Zustand（轻量级状态管理库）

  3. 大型项目：

    • 使用 Redux Toolkit（官方推荐）
    • 使用 MobX

选择状态管理方案的考虑因素：

  • 项目规模和复杂度
  • 团队熟悉程度
  • 性能要求
  • 维护成本

18.3.3 性能优化 ​

问题：React 应用有哪些性能优化策略？

参考答案： React 应用的性能优化策略包括：

  1. 组件优化：

    • 使用 React.memo 缓存组件
    • 使用 useMemo 缓存计算结果
    • 使用 useCallback 缓存函数

  2. 渲染优化：

    • 避免不必要的渲染
    • 使用 key 属性优化列表渲染
    • 批量更新状态

  3. 代码分割：

    • 使用 React.lazy 和 Suspense 实现组件懒加载
    • 按路由分割代码

  4. 网络优化：

    • 数据缓存
    • 减少 HTTP 请求
    • 使用 CDN

  5. 其他优化：

    • 使用虚拟列表处理长列表
    • 优化图片加载
    • 使用 Web Workers 处理 heavy 计算

18.3.4 如何处理表单 ​

问题：在 React 中，如何处理表单？

参考答案： React 中处理表单的方式包括：

  1. 受控组件：

    • 使用 state 管理表单输入值
    • 通过 onChange 事件更新状态
    • 表单提交时使用状态值

  2. 非受控组件：

    • 使用 ref 获取表单输入值
    • 表单提交时通过 ref 获取值

  3. 表单库：

    • 使用 Formik 处理复杂表单
    • 使用 React Hook Form 提高表单性能

18.3.5 如何处理错误 ​

问题：在 React 中，如何处理组件错误？

参考答案： React 中处理错误的方式包括：

  1. 错误边界：

    • 创建错误边界组件捕获子组件树中的错误
    • 使用 static getDerivedStateFromError 和 componentDidCatch 方法

  2. try-catch：

    • 在事件处理函数中使用 try-catch
    • 在异步操作中使用 try-catch

  3. 错误处理库：

    • 使用 Sentry 等错误监控库
    • 自定义错误处理工具

18.4 面试技巧（新手如何准备React面试） ​

18.4.1 技术准备 ​

建议：

  • 掌握核心概念：React 基础、JSX、Hooks、组件通信等
  • 实战经验：至少完成 1-2 个 React 项目，如 TodoList、博客系统等
  • 了解生态：React Router、Redux、axios 等常用库
  • 代码规范：了解 React 开发规范和最佳实践
  • 性能优化：了解 React 性能优化策略

18.4.2 简历准备 ​

建议：

  • 突出项目经验：详细描述你参与的 React 项目，包括使用的技术栈和解决的问题
  • 技能展示：列出你掌握的 React 相关技术和工具
  • 个人作品：提供 GitHub 仓库或在线 demo 链接
  • 学习能力：展示你如何学习和掌握 React 相关技术

18.4.3 面试准备 ​

建议：

  • 模拟面试：练习常见的 React 面试题
  • 代码练习：准备一些常见的 React 编程题，如实现 TodoList、计数器等
  • 了解公司：了解面试公司的技术栈和业务
  • 准备问题：准备一些关于公司和团队的问题
  • 心态调整：保持自信，诚实面对自己的知识盲点

18.4.4 面试技巧 ​

建议：

  • 清晰表达：用简洁明了的语言解释技术概念
  • 代码规范：编写干净、规范的代码
  • 思路清晰：在解决问题时，先思考解决方案，再动手编码
  • 主动沟通：遇到问题时，主动与面试官沟通
  • 展示学习能力：展示你如何学习和解决新问题

18.4.5 常见面试陷阱 ​

避免：

  • 过度自信：不要声称掌握自己不熟悉的技术
  • 技术术语滥用：不要使用不理解的技术术语
  • 忽略基础：不要忽视 React 基础知识
  • 缺乏实践：要有实际的项目经验和代码示例
  • 不了解生态：要了解 React 相关的库和工具

小结 ​

本章整理了 React 新手面试中常见的问题，包括基础概念、核心语法、实战场景和面试技巧等方面。通过准备这些问题，你可以更好地应对 React 相关的面试，展示你的技术能力和学习潜力。

记住，面试不仅仅是考察技术知识，也是考察你的解决问题能力、沟通能力和学习能力。在面试过程中，保持冷静、清晰表达、展示你的思考过程，这样可以给面试官留下良好的印象。

© 2026 编程马·菜鸟教程 版权所有

基于 VitePress 构建