React面试常见题目

在前端面试中，React 是一个非常重要的知识点，面试题目往往涵盖基础概念和高级应用。以下是常见的面试题目以及进阶题目的整理和详解。

一、基础题目

1. React 的核心概念

问：React 的生命周期有哪些？如何在函数组件中使用？

答案：
- React 类组件的生命周期分为三个阶段：挂载（Mounting）、更新（Updating）、卸载（Unmounting）。
  - 挂载：constructor -> static getDerivedStateFromProps -> render -> componentDidMount
  - 更新：static getDerivedStateFromProps -> shouldComponentUpdate -> render -> getSnapshotBeforeUpdate -> componentDidUpdate
  - 卸载：componentWillUnmount
- 在函数组件中，通过 React Hooks (useEffect) 模拟生命周期：
  - useEffect 模拟 componentDidMount 和 componentDidUpdate。
  - 清理函数模拟 componentWillUnmount。

2. React 状态管理

问：为什么 React 的 state 更新是异步的？如何获取最新的 state 值？

答案：
- React 的 setState 是异步的，目的是为了批量更新以优化性能。
- 在异步更新中，可以通过回调函数获取最新的 state：
  javascript 复制代码
```
this.setState({ count: this.state.count + 1 }, () => {
  console.log(this.state.count);
});
```
- 在函数组件中使用 useState 时，可以使用 useEffect 来获取最新值。

3. React 合成事件

问：React 合成事件是什么？为什么使用它？

答案：
- React 的合成事件是一种跨浏览器封装的事件机制，用于解决不同浏览器兼容性问题。
- 优势：
  - 事件池化机制优化性能。
  - 统一事件 API，减少开发者对底层细节的关注。
- 示例：
  javascript 复制代码
```
function handleClick(event) {
  console.log(event.nativeEvent); // 原生事件
  console.log(event.target); // 事件目标
}
```

4. React 的虚拟 DOM

问：虚拟 DOM 的核心原理是什么？

答案：
- React 使用虚拟 DOM 描述 UI 的结构（JS 对象）。
- 核心原理：
  - 通过 diff 算法对比新旧虚拟 DOM，生成最小操作集。
  - 批量更新真实 DOM，提高性能。

二、进阶题目

1. React Hooks

问：如何实现自定义 Hook？

答案：

自定义 Hook 是一个以 use 开头的函数，用于复用逻辑。

示例：

javascript 复制代码

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch(url)
      .then((response) => response.json())
      .then((data) => {
        setData(data);
        setLoading(false);
      });
  }, [url]);

  return { data, loading };
}

2. 性能优化

问：React 性能优化的常用方法有哪些？

答案：
1. 使用 React.memo ：
  - 用于避免组件不必要的重新渲染。
  - 示例：
    javascript 复制代码
```
const MemoizedComponent = React.memo(MyComponent);
```
2. 使用 useCallback 和 useMemo ：
  - useCallback：缓存函数。
  - useMemo：缓存计算值。
3. 代码分割 ：
  - 使用 React 的 lazy 和 Suspense 实现按需加载。
4. 避免父组件频繁更新 ：
  - 减少父组件的状态更新。
5. 列表渲染优化 ：
  - 为列表中的每一项设置稳定的 key。
6. 使用生产环境构建 ：
  - 生产环境下会移除开发模式的一些额外检查。

3. Diff 算法

问：React Diff 算法的优化策略是什么？

答案：
1. 同层比较 ：
  - React 假设同一层级的节点可以高效比较。
2. 唯一 key ：
  - 使用唯一 key 提高比较性能。
3. 类型优化 ：
  - 相同类型的组件仅更新属性，不重新创建。

4. 状态管理

问：Redux 和 Context 的区别？

答案：
1. 用途：
  - Redux 是一个完整的状态管理工具，适合大型应用。
  - Context 更轻量，适合简单的全局状态共享。
2. 性能：
  - Context 的更新会触发整个树重新渲染。
  - Redux 使用中间件和优化工具（如 Reselect）减少渲染开销。

5. SSR（服务端渲染）

问：如何在 React 中实现 SSR？

答案：
- React 使用 ReactDOMServer 提供的 renderToString 方法生成 HTML。
- 示例：
  javascript 复制代码
```
import React from 'react';
import { renderToString } from 'react-dom/server';
import App from './App';

const html = renderToString(<App />);
console.log(html);
```
- 优势：
  - 更好的 SEO。
  - 更快的首屏加载时间。

6. Fiber 架构

问：React Fiber 是什么？解决了哪些问题？

答案：
- React Fiber 是 React 的协调引擎，支持可中断的渲染。
- 解决的问题：
  1. 将任务拆分为多个小任务。
  2. 高优任务优先渲染，低优任务延后。

7. 测试

问：如何为 React 组件编写单元测试？

答案：

使用 Jest 和 React Testing Library：

javascript 复制代码

import { render, screen } from '@testing-library/react';
import App from './App';

test('renders hello world', () => {
  render(<App />);
  const linkElement = screen.getByText(/hello world/i);
  expect(linkElement).toBeInTheDocument();
});

如果需要更详细的某个部分解析或具体的代码实现，可以进一步探讨！