Hook是如何存储的？吊钩存放的原理是什么？

状态始终需要持久存储，否则前端将无法继续混合，您将不得不进行投机。我们都知道React处理类组件的方式是实例化类，因此类组件可以直接使用方法、状态和钩子作为成员属性。

虽然React将函数组件作为函数调用来处理，但它没有实例可言，自然也不能将“状态”或“副作用”附加到原型上。因此，钩子只能放置在与功能组件关联的位置，即渲染过程中功能组件的相应光纤节点。渲染时，函数组件根据调用顺序以链接列表的形式将钩子挂在光纤节点上。生成的链接列表如下所示。Fiber Node的属性memorizedState用于指向Hook链接列表的第一个节点，Hook的属性memoriezedState用于存储状态值或效果回调函数。

连接Hook的伪代码如下：

函数renderWithHooks（current）｛//current是当前正在处理的光纤节点；//指向链接列表的第一个节点的firstWorkInProgressHook//为currentlyRenderingFiber memorizedState const renderedWork：fiber=（currentlyRendering fiber:any）指定一个值; & nbsp；//将挂钩挂在FiberNode MemoizedState上；renderedWork。memorizedState=firstWorkInProgressHook； ；renderedWork。expirationTime=剩余expirationTime； ；//将Effect Hook挂在FiberNode UpdateQueue上；renderedWork。updateQueue=（componentUpdateQueue：任意）； ；renderedWork。effectTag |=sideEffectTag； ；//重置Hook指针，使每个FiberNode具有自己的独立链接列表；currentHook=null； ；nextCurrentHook=null； ；firstWorkInProgressHook=null； ；workInProgressHook=null； ；nextWorkInProgressHook=null；｝函数mountWorkInProgressHook（）｛const hook＝｛memorizedState:null，baseState：null，queue:null，baseUpdate：null，next:null，｝； ；如果（workInProgressHook===null）｛//如果当前Hook链接列表为空，则证明它是对Hook的第一次调用//当前对Hook调用需要是链接列表firstWorkInProgressHook=workInProgress Hook=Hook中的第一个节点；}else｛//将另一个钩子链接到上一个钩子的下一个，以形成链接列表结构workInProgressHook=workInProgress hook.next=hook；｝；return workInProgressHook；｝函数updateWorkInProgressHook（）｛//在每次渲染时，nextCurrentHook将首先指向第一个Hook currentHook=nextCurrentHoo；const newHook=｛memorizedState:currentHook.memorizedState，baseState:currentHook.baseState，queue:currentHook.queue，baseUpdate:currentHook.baseUpdate，next:null，｝； ；//如果（workInProgressHook===null）｛workInProgress Hook=firstWorkInProgressHook=newHook；}否则｛workInProgressHook=workInProgress Hook.next=newHook；}//指向下一个钩子nextCurrentHook=currentHook。下一个； ；return workInProgressHook；｝React Hooks的访问原则：每个组件的光纤都有一个记忆状态属性来存储该组件的所有钩子。钩子中的每个钩子都有一个存储钩子数据的memoryedState。每个钩子还具有下一个钩子的下一个点。这里我们使用链表来存储钩子，或者使用数组来存储钩子（只要有顺序）。