React 类组件的渲染过程你了解吗？和函数组件差别大吗？

在React应用开发中，超过78%的性能问题与组件渲染机制相关。无论是类组件还是函数组件，它们的渲染逻辑直接影响着应用的响应速度和用户体验。理解类组件生命周期与函数组件Hooks的运作差异，不仅能帮助我们规避常见陷阱，更能为复杂场景下的性能优化提供底层支撑。

一、React类组件的渲染机制

1.1 类组件的生命周期图谱

类组件的渲染流程是三层瀑布式触发机制：

• 挂载阶段：constructor → render → componentDidMount
• 更新阶段：shouldComponentUpdate → render → componentDidUpdate
• 卸载阶段：componentWillUnmount

1.2 状态更新的连锁反应

当调用setState()时，React会启动协调算法：

1. 合并状态对象到pending队列
2. 触发shouldComponentUpdate进行更新决策
3. 生成虚拟DOM树并进行差异比对
4. 执行DOM补丁更新


二、函数组件的运行逻辑

2.1 Hooks驱动的渲染模式

函数组件通过useState/useEffect等Hooks实现状态管理：

function Counter() {
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    document.title = `点击次数：${count}`;
  }, [count]);
  
  return  setCount(c => c+1)}>{count};
}

2.2 闭包陷阱与渲染优化

函数组件每次渲染都会创建新的作用域，这导致：

• 事件处理函数需要useCallback缓存
• 复杂计算依赖useMemo进行记忆化
• 子组件更新需配合React.memo进行浅比较

三、核心差异对比表

四、实战性能优化策略

4.1 避免匿名函数传递

当父组件传递匿名函数给子组件时：

// 错误示范：每次渲染生成新函数
<Child onClick={() => handleClick()} />

// 正确做法：缓存函数引用
const memoizedHandleClick = useCallback(() => {
  handleClick();
}, []);

4.2 组件更新阻断技术

类组件使用shouldComponentUpdate：

shouldComponentUpdate(nextProps, nextState) {
  return this.state.count !== nextState.count;
}

函数组件使用React.memo：

const MemoComponent = React.memo(MyComponent, (prev, next) => {
  return prev.data === next.data;
});

五、技术选型指南

• 选择类组件：需要精确控制生命周期、维护遗留代码库
• 选择函数组件：新功能开发、需要更好的TypeScript支持
• 混合使用：渐进式重构项目、特定性能敏感模块

结语：面向未来的组件设计

随着React 18并发模式的普及，函数组件+Hooks的组合展现出更强的适应能力。但类组件在错误边界（Error Boundaries）等场景仍是唯一选择。开发者应根据具体场景选择技术方案，必要时采用渐进增强策略实现平滑过渡。