如何深入剖析React useState与useReducer源码，全面理解其实现原理？

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

目录- 热身准备- 为什么会有hooks- hooks执行时机- 两套hooks- hooks存储- 初始化- mount- useState- mountWorkInProgressHook- 更新- updateState- updateReducer- updateWorkInProgressHook- 总结热身准备在正式讲解hooks之前，我们先做一些热身准备。

为什么会有hooksReact 16.8引入了hooks，它允许我们在不编写类的情况下使用state和其他React特性。

hooks执行时机hooks在组件的渲染过程中执行。

两套hooksReact内部维护了两套hooks，一套用于mount阶段，一套用于update阶段。

hooks存储hooks的数据存储在组件的实例上。

初始化组件挂载时，hooks会被初始化。

mountmount阶段，useState会被调用。

useStateuseState是React提供的用于在函数组件中添加state的hook。

mountWorkInProgressHookmountWorkInProgressHook是React内部用于在mount阶段创建hooks的函数。

更新组件更新时，update函数会被调用。

updateStateupdateState是React内部用于更新state的函数。

updateReducerupdateReducer是React内部用于更新reducer的函数。

updateWorkInProgressHookupdateWorkInProgressHook是React内部用于在update阶段创建hooks的函数。