实现hooks架构

本节课代码地址（请参考课程获取）

hook 脱离FC 上下文，仅仅是普通函数，如何让他拥有感知上下文环境的能力？ 比如说： hook 如何知道在另一个hook 的上下文环境内执行？

function App() {

useEffect(() => {

//执行useState时怎么知道处在useEffect上下文？

useState(0);

})

}

hook 怎么知道当前是mount 还是update ？ 解决方案：「在不同上下文中调用的hook不是同一个函数」。 实现「内部数据共享层」时的注意事项： 以浏览器举例，Reconciler + hostConfig = ReactDOM 增加「内部数据共享层」，意味着Reconciler 与React 产生关联，进而意味着ReactDOM 与React 产生关联。 如果两个包「产生关联」，在打包时需要考虑：「两者的代码是打包在一起还是分开？」 如果打包在一起，意味着打包后的ReactDOM 中会包含React 的代码，那么ReactDOM 中会 包含一个「内部数据共享层」，React 中也会包含一个「内部数据共享层」，这两者不是同 一个「内部数据共享层」。 而我们希望两者共享数据，所以不希望ReactDOM 中会包含React 的代码。 hook 如何知道自身数据保存在哪？

function App() {

//执行useState为什么能返回正确的num？

const [num] = useState(0);

}

答案：「可以记录当前正在render的FC对应fiberNode，在fiberNode中保存hook数据」

实现Hooks的数据结构

fiberNode 中可用的字段： memoizedState updateQueue 对于FC对应的fiberNode ，存在两层数据：

fiberNode.memoizedState 对应Hooks 链表

链表中每个hook 对应自身的数据

实现useState

包括2方面工作：

1. 实现mount 时useState 的实现
2. 实现dispatch 方法，并接入现有更新流程内