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 面试挑战。