React面试题目和答案大全

基础概念篇

1. 什么是React？它有什么特点？

答案： React是由Facebook开发的用于构建用户界面的JavaScript库。主要特点包括：

• 组件化：将UI拆分为独立、可复用的组件
• 虚拟DOM：通过虚拟DOM提高渲染性能
• 单向数据流：数据从父组件流向子组件，便于调试和维护
• 声明式编程：描述UI应该是什么样子，而不是如何操作DOM
• 跨平台：可用于Web、移动端（React Native）等

2. 解释虚拟DOM的工作原理

答案： 虚拟DOM是React在内存中维护的一个JavaScript对象树，它是真实DOM的抽象表示。

工作流程：

1. 创建虚拟DOM：组件渲染时创建虚拟DOM树
2. Diff算法：当状态改变时，React创建新的虚拟DOM树，并与旧树进行比较
3. 计算差异：找出需要更新的最小变更集
4. 批量更新：将变更批量应用到真实DOM上

优势：

• 减少直接操作DOM的次数
• 批量更新提高性能
• 跨浏览器兼容性好

3. JSX是什么？为什么要使用JSX？

答案： JSX（JavaScript XML）是React的语法扩展，允许在JavaScript中编写类似HTML的代码。

特点：

• 语法更直观，提高开发效率
• 编译时会转换为React.createElement()调用
• 支持JavaScript表达式嵌入
• 具备JavaScript的完整功能

示例：

// JSX
const element = <h1>Hello, {name}!</h1>;

// 编译后
const element = React.createElement('h1', null, 'Hello, ', name, '!');

组件篇

4. 函数组件和类组件的区别

答案：

5. 什么是React Hooks？常用的Hooks有哪些？

答案： Hooks是React 16.8引入的新特性，允许在函数组件中使用状态和其他React特性。

常用Hooks：

• useState：管理组件状态
• useEffect：处理副作用操作
• useContext：消费Context
• useReducer：复杂状态管理
• useMemo：缓存计算结果
• useCallback：缓存函数引用
• useRef：访问DOM元素或保存可变值
• useLayoutEffect：同步执行副作用

6. useState和useReducer的使用场景

答案：

useState适用场景：

• 简单的状态管理
• 独立的状态变量
• 状态更新逻辑简单

const [count, setCount] = useState(0);
const [name, setName] = useState('');

useReducer适用场景：

• 复杂的状态逻辑
• 多个子值的状态对象
• 状态更新依赖之前的状态
• 需要优化性能的场景

const [state, dispatch] = useReducer(reducer, initialState);

7. useEffect的用法和注意事项

答案：

基本用法：

// 副作用执行
useEffect(() => {
  // 副作用逻辑
}, [dependencies]);

使用场景：

• 数据获取
• 订阅/取消订阅
• 手动修改DOM
• 定时器操作

注意事项：

• 依赖数组控制执行时机
• 清理函数防止内存泄漏
• 避免无限循环
• 异步操作需要处理组件卸载情况

useEffect(() => {
  const timer = setInterval(() => {
    // 定时任务
  }, 1000);
  
  return () => clearInterval(timer); // 清理函数
}, []);

状态管理篇

8. React中状态提升是什么？

答案： 状态提升是指将多个组件需要共享的状态提升到它们最近的共同父组件中，通过props向下传递状态和更新函数。

使用场景：

• 兄弟组件间需要共享状态
• 多个组件需要响应同一状态变化

示例：

function Parent() {
  const [sharedState, setSharedSt