useMemo与useCallback性能优化：React渲染控制艺术

前言

在React的世界里，组件的每一次渲染都可能带来性能开销。当应用规模逐渐扩大，组件层级越来越深时，"过度渲染"问题就会凸显出来。本系列前几篇文章我们已经深入探讨了useEffect、useContext和useReducer的使用技巧，今天我们来聊聊React中两个重要的性能优化工具——useMemo和useCallback。

一、引言：React渲染的"天性"

在深入学习性能优化之前，我们需要先理解React的默认行为。React的渲染机制有其固有的"天性"，了解这些特性是进行有效优化的前提。

1.1 组件渲染的默认行为

React组件的渲染遵循一个基本原则：父组件更新时，所有子组件默认都会重新渲染。这意味着即使子组件的props没有发生任何变化，它们也会被重新执行。

typescript

// 父组件 function Parent() { const [count, setCount] = useState(0); return ( <