React常见问题与最佳实践指南

📚 目录

基础概念问题
Hooks相关问题
性能优化问题
状态管理问题
最佳实践指南
常见错误与解决方案

基础概念问题

Q: React中函数组件和类组件有什么区别？什么时候使用哪种？

A: 函数组件是React推荐的写法，特别是配合Hooks使用。主要区别：

函数组件：更简洁，易于测试，支持Hooks，性能更好
类组件：有生命周期方法，有this上下文，支持错误边界

建议：新项目优先使用函数组件，旧项目可以逐步迁移。

Q: 为什么React组件名称必须以大写字母开头？

A: 这是React的约定，用于区分：

大写开头：React组件（如 <MyComponent />）
小写开头：HTML标签（如 <div>）

// ✅ 正确
function MyComponent() { return <div>Hello</div>; }

// ❌ 错误（会被当作HTML标签）
function myComponent() { return <div>Hello</div> }

Q: 什么时候应该将组件拆分成更小的组件？

A: 考虑拆分的情况：

组件代码超过100行
组件承担多个职责
有可复用的UI部分
逻辑复杂，需要独立测试

Hooks相关问题

Q: useState和useReducer有什么区别？如何选择？

A: 选择依据：

useState：简单状态，独立的状态值
useReducer：复杂状态逻辑，多个相关联的状态

// useState - 适合简单状态
const [count, setCount] = useState(0);

// useReducer - 适合复杂状态
const [state, dispatch] = useReducer(reducer, initialState);

Q: useEffect的依赖数组应该怎么设置？

A: 依赖数组的设置原则：

空数组 []：只在组件挂载时执行一次
有依赖项：依赖项变化时执行
无依赖数组：每次渲染都执行（谨慎使用）

注意：确保依赖数组包含所有在effect中使用的状态和props，否则可能导致bug。

Q: 如何避免useEffect的无限循环？

A: 常见原因和解决方案：

原因1：在effect中更新状态，但没有设置依赖
解决方案：添加正确的依赖项
原因2：对象/数组作为依赖，每次都是新引用
解决方案：使用useMemo/useCallback缓存

// ❌ 错误 - 会导致无限循环
useEffect(() => {
    setCount(count + 1);
});

// ✅ 正确 - 添加依赖
useEffect(() => {
    setCount(count + 1);
}, [count]);

// ✅ 正确 - 使用函数式更新
useEffect(() => {
    setCount(prev => prev + 1);
}, []);

性能优化问题

Q: 什么时候应该使用React.memo？

A: 使用React.memo的情况：

组件渲染开销较大
组件经常使用相同的props重新渲染
父组件频繁重新渲染，但子组件props未变化

// 使用React.memo优化
const ExpensiveComponent = React.memo(function MyComponent({ data }) {
    // 复杂计算
    return <div>{expensiveCalculation(data)}</div>;
});

Q: useMemo和useCallback有什么区别？

A: 主要区别：

useMemo：缓存计算结果
useCallback：缓存函数本身

// useMemo - 缓存计算结果
const expensiveValue = useMemo(() => {
    return computeExpensiveValue(a, b);
}, [a, b]);

// useCallback - 缓存函数
const handleClick = useCallback(() => {
    doSomething(a, b);
}, [a, b]);

Q: 如何优化长列表的渲染性能？

A: 优化策略：

使用虚拟滚动（react-window、react-virtualized）
使用React.memo优化列表项
合理使用key属性
分页加载数据

状态管理问题

Q: 什么时候应该使用Context API？什么时候使用Redux？

A: 选择依据：

Context API：简单的全局状态，主题、用户信息等
Redux：复杂应用状态，需要时间旅行、中间件等高级功能

建议：从Context API开始，如果状态管理变得复杂再考虑Redux。

Q: 如何组织React应用的状态结构？

A: 状态组织原则：

单一数据源：相同的数据只在一个地方存储
状态提升：将共享状态提升到最近的共同祖先
状态最小化：只存储必要的数据
状态规范化：避免嵌套过深的数据结构

最佳实践指南

1. 组件设计原则

单一职责：每个组件只负责一个功能
可复用性：设计通用的、可配置的组件
组合优于继承：通过组合简单组件构建复杂UI
受控组件：表单数据由React状态管理

2. 代码组织规范

文件结构：按功能模块组织文件
命名约定：组件使用PascalCase，文件与组件同名
导入顺序：第三方库 → 绝对路径 → 相对路径
导出方式：优先使用命名导出

// ✅ 良好的文件结构
src/
  components/
    Button/
      Button.jsx
      Button.module.css
      index.js
  hooks/
    useApi.js
  utils/
    helpers.js

3. 性能优化最佳实践

避免不必要的渲染：合理使用React.memo、useMemo、useCallback
代码分割：使用React.lazy和Suspense实现懒加载
图片优化：使用合适的图片格式和尺寸
包大小优化：使用Tree Shaking，按需引入

4. 测试策略

单元测试：测试纯函数和工具函数
组件测试：使用React Testing Library测试组件行为
集成测试：测试多个组件的交互
E2E测试：测试完整用户流程

常见错误与解决方案

错误1：直接修改状态

// ❌ 错误 - 直接修改状态
state.items.push(newItem);
setState(state);

// ✅ 正确 - 创建新状态
setState({
    ...state,
    items: [...state.items, newItem]
});

错误2：在渲染中执行副作用

// ❌ 错误 - 在渲染中执行副作用
function MyComponent() {
    // 不要在渲染中执行副作用
    document.title = 'My Page';
    
    return <div>Hello</div>;
}

// ✅ 正确 - 在useEffect中执行副作用
function MyComponent() {
    useEffect(() => {
        document.title = 'My Page';
    }, []);
    
    return <div>Hello</div>;
}

错误3：忘记key属性

// ❌ 错误 - 缺少key属性
{items.map(item => (
    <li>{item.name}</li>
))}

// ✅ 正确 - 提供唯一key
{items.map(item => (
    <li key={item.id}>{item.name}</li>
))}

💡 调试技巧

React DevTools：安装浏览器扩展进行调试
严格模式：使用<React.StrictMode>检测问题
错误边界：使用错误边界捕获组件错误
性能分析：使用React Profiler分析性能

← 返回目录开始学习第1课 →