React面试合集 - 技术栈

1. React 核心概念

1.1 什么是 React？它的核心优势是什么？

答案：

React 是一个用于构建用户界面的 JavaScript 库。

核心优势：

组件化：将 UI 拆分为可复用的组件。
虚拟 DOM：通过高效的 Diff 算法减少直接操作 DOM 的开销。
单向数据流：数据流动清晰，易于调试和维护。
生态丰富：拥有庞大的社区和生态系统。

1.2 函数组件和类组件的区别是什么？

答案：

函数组件：

使用 JavaScript 函数定义。
通过 Hooks 管理状态和生命周期。
代码更简洁，性能更好。

类组件：

使用 ES6 类定义。
通过 this.state 和生命周期方法管理状态和行为。
适用于复杂逻辑和旧代码库。

1.3 什么是 Hooks？常用的 Hooks 有哪些？

答案：

Hooks 是 React 16.8 引入的特性，允许在函数组件中使用状态和生命周期。

常用 Hooks：

useState：管理组件状态。
useEffect：处理副作用（如数据获取、订阅）。
useContext：访问 React Context。
useReducer：复杂状态管理。
useMemo 和 useCallback：优化性能。
React 高级特性

2.1 什么是 React 的并发模式（Concurrent Mode）？

答案：

并发模式是 React 的一种新渲染模式，允许应用在渲染过程中中断和恢复。

核心特性：

时间切片：将渲染任务拆分为小块，避免阻塞主线程。
优先级调度：根据用户交互优先级调整渲染顺序。
相关 API：useTransition、useDeferredValue。

2.2 如何使用 Suspense 实现懒加载？

答案：

Suspense 允许组件在等待异步数据时显示加载状态。

示例：

复制代码

const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    <React.Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </React.Suspense>
  );
}

2.3 什么是 React Server Components？

答案：

Server Components 是 React 的一种新特性，允许在服务器端渲染组件。

优势：

减少客户端 JavaScript 体积。
支持直接访问服务器端数据源。
使用场景：静态内容、数据获取密集型组件。
React 生态系统

3.1 如何在 React 中实现路由？

答案：

使用 React Router：

复制代码

import { BrowserRouter, Route, Routes } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

3.2 Redux 的工作原理是什么？

答案：

Redux 是一个状态管理库，基于 Flux 架构。

核心概念：

Store：存储全局状态。
Action：描述状态变化。
Reducer：根据 Action 更新状态。
工作流程：View -> Action -> Reducer -> Store -> View。

3.3 如何使用 React Query 进行数据获取？

答案：

React Query 是一个用于数据获取和状态管理的库。

示例：

复制代码

import { useQuery } from 'react-query';

function fetchData() {
  return fetch('/api/data').then((res) => res.json());
}

function App() {
  const { data, isLoading, error } = useQuery('data', fetchData);

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return <div>{JSON.stringify(data)}</div>;
}

4. React 性能优化

4.1 如何避免不必要的渲染？

答案：

使用 React.memo 包裹函数组件，避免在 props 未变化时重新渲染。
使用 useMemo 和 useCallback 缓存值和函数。

示例：

复制代码

const MemoizedComponent = React.memo(function MyComponent(props) {
  return <div>{props.value}</div>;
});

4.2 什么是代码分割（Code Splitting）？如何实现？

答案：

代码分割是将代码拆分为多个小块，按需加载。

实现方式：

使用 React.lazy 和 Suspense：

const LazyComponent = React.lazy(() => import('./LazyComponent'));
使用 Webpack 的动态 import()。

5. React 与新兴技术

5.1 如何使用 React 开发 Web3 应用？

答案：

使用 ethers.js 或 web3.js 与区块链交互。

示例：

复制代码

import { ethers } from 'ethers';

async function connectWallet() {
  const provider = new ethers.providers.Web3Provider(window.ethereum);
  await provider.send("eth_requestAccounts", []);
  const signer = provider.getSigner();
  const address = await signer.getAddress();
  console.log("Connected wallet:", address);
}

5.2 React 如何与 AI 集成？

答案：

使用 TensorFlow.js 在 React 中运行机器学习模型。

示例：

复制代码

import * as tf from '@tensorflow/tfjs';

function predict(input) {
  const model = await tf.loadLayersModel('model-url');
  const prediction = model.predict(tf.tensor(input));
  return prediction.dataSync();
}

6. React 面试常见问题

6.1 如何实现组件的条件渲染？

答案：

使用 if 语句、三元运算符或逻辑与运算符：

复制代码

function App({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? <WelcomeMessage /> : <LoginButton />}
    </div>
  );
}

6.2 如何捕获组件中的错误？

答案：

使用错误边界（Error Boundaries）：

复制代码

class ErrorBoundary extends React.Component {
  state = { hasError: false };

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  render() {
    if (this.state.hasError) {
      return <div>Something went wrong.</div>;
    }
    return this.props.children;
  }
}

总结

2025 年 React 面试问题将围绕核心概念、高级特性、生态系统、性能优化和新兴技术展开。通过掌握这些知识点，并结合实际项目经验，你可以更好地应对未来的 React 面试挑战。