在React中，使用函数式组件与类组件的性能差异到底有多大？对于大型应用的渲染效率会产生怎样的影响？

24 Haz 09:08

在实际项目里，我常把函数式组件的性能和 **React.memo + useCallback** 组合的效果跟类组件的 **PureComponent** 做对比。单纯从 Fiber 节点来看，两者创建的工作量几乎相同，但函数式组件配合 `React.memo` 后，只有 props 真正变化时才会重新渲染，这在大量列表或复杂子树中能显著降低无效更新的次数。相反，类组件如果不手动实现 `shouldComponentUpdate`，即使是 `PureComponent`，在深层对象更新时也容易触发不必要的重渲染。我的经验是：在大型应用里，把业务逻辑写成函数式组件，然后通过 `React.memo`、`useMemo`、`useCallback` 把“渲染成本高”的子组件冻结，往往比单纯使用类组件的生命周期方法（如 `componentDidUpdate`）更易调试，也更能保持渲染链路的透明度。若再加上 **React Profiler** 的监控数据，可以快速定位哪些函数式组件真的需要 `memo`，哪些则无需额外包装，从而在性能和代码可维护性之间找到更好的平衡点。