React中useState和useReducer源码的深度剖析是怎样的？

本文共计4247个文字，预计阅读时间需要17分钟。

目录+ 热身准备+ 为什么会有hooks+ hooks执行时机+ 两套hooks+ hooks存储+ 初始化+ mount+ useState+ mountWorkInProgressHook+ 更新+ updateState+ updateReducer+ updateWorkInProgressHook+ 总结+ 热身准备在正式讲解useState之前，我们先进行一些热身准备，了解React的基本概念和原理。这将帮助我们更好地理解hooks的工作机制。

+ 为什么会有hooksReact官方推出hooks是为了让函数组件也能拥有类组件的state和生命周期等特性，从而提高函数组件的复用性和灵活性。

+ hooks执行时机hooks在组件的渲染过程中被调用，执行时机与组件的更新过程紧密相关。

+ 两套hooksReact内部维护了两套hooks，一套用于处理函数组件的状态，另一套用于处理类组件的生命周期。

+ hooks存储hooks的值存储在组件的实例中，每次渲染时都会创建新的hooks实例。

+ 初始化在组件挂载时，React会初始化hooks，并设置初始值。

+ mount组件挂载时，React会调用mount函数，执行相关的生命周期方法和hooks初始化。

+ useStateuseState是React提供的最常用的hooks，用于在函数组件中添加state。

+ mountWorkInProgressHookmountWorkInProgressHook是React内部用于创建新的hooks实例的函数。

+ 更新组件更新时，React会调用update函数，执行相关的生命周期方法和hooks更新。