Preguntas de entrevista para React：从零到专家的React面试题详解

【免费下载链接】preguntas-entrevista-react Preguntas típicas sobre React para entrevistas de trabajo ⚛️ 项目地址: https://gitcode.com/gh_mirrors/pr/preguntas-entrevista-react

React作为当前最流行的前端框架之一，已成为前端开发者面试的必备技能。本文基于开源项目Preguntas de entrevista para React，从基础到进阶梳理核心面试题，帮助你系统掌握React知识体系，轻松应对各类面试场景。

项目概述

该项目是一个全面的React面试题集合，包含从初学者到专家级别的各类问题，所有答案均以西班牙语编写。项目采用Next.js框架构建，通过app/page.tsx实现页面渲染，使用ListOfQuestions.jsx组件展示问题列表，并通过api/search/route.ts提供搜索功能。

项目结构

核心目录结构如下：

• 问题数据：public/content/目录下存储所有面试题的JSON文件
• UI组件：app/components/包含页面所需的各类UI组件
• 主题管理：通过context/ThemeContext.jsx和provider/ThemeProvider.jsx实现明暗主题切换

基础概念篇

React核心特性

React的主要特点包括：

• 组件化：UI被拆分为独立可重用的组件，如Card.jsx实现卡片式布局
• 虚拟DOM：内存中的DOM表示，提高渲染性能
• 声明式编程：描述目标状态而非操作步骤
• 单向数据流：数据从父组件流向子组件
• 跨平台：可用于Web、移动应用(React Native)和桌面应用

// 声明式vs命令式示例
// 声明式(React)
const element = <h1>Hello, world</h1>

// 命令式(原生JS)
const element = document.createElement('h1')
element.innerHTML = 'Hello, world'

JSX本质

JSX是JavaScript的语法扩展，允许在JavaScript中编写类似HTML的代码。它最终会被Babel等工具转换为React.createElement调用：

// JSX写法
function Hello() {
  return <h1>Hola Mundo 👋🌍!</h1>
}

// 转换后的JavaScript
function Hello() {
  return React.createElement('h1', null, 'Hola Mundo 👋🌍!')
}

组件与Props

组件创建方式

React组件可以通过函数或类创建，目前推荐使用函数组件：

// 函数组件
function HelloWorld() {
  return <h1>Hello World!</h1>
}

// 类组件(不推荐)
import { Component } from 'react'
class HelloWorld extends Component {
  render() {
    return <h1>Hello World!</h1>
  }
}

Props与State区别

• Props：从父组件传递的数据，只读不可修改
• State：组件内部管理的状态，可以通过setState或useState更新

// Props示例
function Button(props) {
  return <button>{props.text}</button>
}

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

注意：不要用props初始化state后期望props变化时state自动更新，这是常见错误。

Hooks深入理解

常用Hooks

React提供了多种内置Hooks，核心包括：

• useState：管理组件状态
• useEffect：处理副作用
• useContext：访问上下文
• useRef：获取DOM元素或存储可变值
• useMemo：缓存计算结果
• useCallback：缓存函数引用

useEffect使用场景

useEffect用于处理副作用，如数据获取、订阅或手动修改DOM：

// 组件挂载时执行
useEffect(() => {
  console.log('Component mounted')
  
  // 组件卸载时清理
  return () => {
    console.log('Component unmounted')
  }
}, []) // 空依赖数组表示只在挂载/卸载时执行

性能优化策略

避免不必要渲染

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

列表渲染优化

使用唯一且稳定的key属性，避免使用索引作为key：

// 推荐做法
{items.map(item => (
  <Item key={item.id} {...item} />
))}

// 不推荐
{items.map((item, index) => (
  <Item key={index} {...item} />
))}

常见问题与解决方案

状态更新时机

React状态更新是异步的，如果需要基于前一个状态更新，应使用函数形式：

// 错误方式
setCount(count + 1)

// 正确方式
setCount(prevCount => prevCount + 1)

组件通信方式

• 父子组件：通过props传递
• 子父组件：通过回调函数
• 跨层级组件：使用Context API或状态管理库
• 非相关组件：使用全局状态管理

项目使用指南

本地运行

# 克隆仓库
git clone https://gitcode.com/gh_mirrors/pr/preguntas-entrevista-react.git

# 安装依赖
cd preguntas-entrevista-react
npm install

# 启动开发服务器
npm run dev

问题搜索功能

项目提供搜索功能，实现代码位于api/search/route.ts，可通过关键词快速查找相关面试题。

总结与展望

React生态系统持续发展，新特性如Concurrent Mode、Suspense和Server Components不断涌现。掌握本文涵盖的基础概念、组件通信、Hooks使用和性能优化策略，将为你应对React面试奠定坚实基础。建议深入阅读官方文档并通过实际项目积累经验。

提示：项目中的所有面试题答案都以JSON格式存储在public/content/目录下，可直接查看学习。持续关注项目更新，获取最新面试题和解答。

【免费下载链接】preguntas-entrevista-react Preguntas típicas sobre React para entrevistas de trabajo ⚛️ 项目地址: https://gitcode.com/gh_mirrors/pr/preguntas-entrevista-react