React函数组件更新

React的函数组件（Function Components）自Hooks推出以来已成为React开发的主流方式。理解函数组件的更新原理对于编写高效、可维护的React应用至关重要。本文将深入探讨React函数组件的更新机制。 一、函数组件与类组件的本质区别 在深入更新原理前，我们需要明确函数组件与类组件的根本区别： 类组件：是类的实例，拥有实例属性和生命周期方法 函数组件：是纯函数，接收props作为参数，返回JSX 这种本质区别决定了它们的更新行为完全不同。 二、函数组件的执行机制 当React需要渲染一个函数组件时，它只是简单地调用这个函数： function MyComponent(props) { return <div>{props.message}</div>; } // React内部大致这样处理 const element = MyComponent({ message: 'Hello' }); 每次渲染都是全新的函数调用，所有局部变量和函数都会重新创建。这与类组件形成鲜明对比，类组件在更新时会复用同一个实例。 三、触发更新的场景 函数组件的更新主要由以下情况触发： 父组件重新渲染：即使props未变化，父组件渲染也会导致子组件重新渲染 props发生变化：当传入组件的props值改变时 状态更新：通过useState、useReducer等Hook更新状态 context变化：组件订阅的context值发生变化 Hooks依赖变化：useEffect、useMemo等Hook的依赖项发生变化 四、React的渲染流程 函数组件的更新遵循React的渲染流程： 触发更新：通过setState、父组件渲染等途径触发更新 协调阶段（Reconciliation）： React调用函数组件获取新的JSX 与上一次渲染的JSX进行对比（Virtual DOM Diff） 提交阶段（Commit）： 将差异应用到真实DOM 执行useLayoutEffect的回调 浏览器绘制：浏览器重绘屏幕 副作用执行：执行useEffect的回调 五、Hooks与组件更新 Hooks是函数组件能够拥有状态和生命周期的关键。理解Hooks的工作机制对理解组件更新至关重要。 useState的工作原理 const [count, setCount] = useState(0); React会在组件首次渲染时为每个useState调用分配一个"状态单元" 后续更新时，React会按照Hooks的调用顺序来提供对应的状态值 setCount调用会触发组件的重新渲染 useEffect与更新 useEffect(() => { // 副作用代码 return () => { // 清理函数 }; }, [dependencies]); 组件每次渲染后，React会比较依赖项数组 如果依赖项变化或没有提供依赖项数组，副作用会重新执行 清理函数会在副作用重新执行前或组件卸载时执行 六、优化更新性能 由于函数组件每次更新都会完整执行函数体，我们需要一些优化手段： ...