前端框架是什么 框架是什么( 三 )


function 组件要支持 state,那 state 存在哪里呢?
class 组件节点有 state,变成 fiber 节点之后依然有,function 组件本来就没有 state,那么 fiber 节点中同样也没有 。
那在 function 组件的 fiber 节点中加入 state 不就行了?
于是 react 就在 function 组件的 fiber 节点中加入了 memorizedState 属性用来存储数据,然后在 funct百思特网ion 组件里面通过 api 来使用这些数据,这些 api 被叫做 hooks api 。
因为是使用 fiber 节点上的数据,就把 api 命名为了 useXxx 。
每个 hooks api 都要有自己存放数据的地方,怎么组织呢?有两种方案,一种是 map,一种是数组 。
用 map 的话那么要 hooks api 要指定 key,按照 key 来存取 fiber 节点中的数据 。
用数组的话顺序不能变,所以 hooks api 不能出现在 if 等逻辑块中,只能在顶层 。
为了简化使用, hooks 最终使用了数组的方式 。当然,实现起来用的是链表 。
每个 hooks api 取对应的 fiber.memoriedState 中的数据来用 。
hooks api 可以分为 3 类:
【前端框架是什么 框架是什么】第一类是数据类的:

  • useState:在 fiber.memoriedState 的对应元素中存放数据
  • useMemo:在 fiber.memoriedState 的对应元素中存放数据,值是缓存的函数计算的结果,在 state 变化后重新计算值
  • useCallback:在 fiber.memoriedState 的对应元素中存放数据,值是函数,在 state 变化后重新执行函数,是 useMemo 在值为函数的场景下的简化 api,比如 useCallback(fn, [a,b]) 相当于 useMemo(() =

推荐阅读