hooks实现思路
思路 实现 Hooks
2023-06-13 09:13:57 时间
var wipFiber; //当前处理的fiber 处理function组件时给它赋值function的fiber
// 该代码会在初始化和更新时执行
export default function useState(init){
// wipFiber.base是上一次的fiber,获取上次的hook
// base是老fiber wipFiber.hooksIndex是这次的第几个
const oldHook=wipFiber.base&&wipFiber.base.hooks[wipFiber.hooksIndex];
//定义当前的fiber
const fiber={
state:oldHook.state||init,
queue:oldHook.queue||[]
}
// 模拟批量更新
hook.queue.forEach(action=>hook.state=action);
//该代码就是hook函数的第二个返回值,执行它把未来值加入到更新队列,然后强制更新。
const setState=action=>{
// setState时将值添加到更新队列
hook.queue.push(action);
// requestIdCallback 中会判断wipRoot的值,如果处理完fiber,就更新dom
wipRoot={
node:currentRoot.node,
props:currentRoot.props,
base:currentRoot
}
// requestIdCallback 中会判断nextUnitOfWork的值,如果存在会创建新的fiber架构
nextUnitOfWork=wipFiber;
}
// hook加入到fiber的hooks中
wipFiber.hooks.push(hook);
wipFiber.hooksIndex++;
}
相关文章
- 基于单片机的毕业设计简单点的_毕业设计设计思路范文
- 数据库分库分表思路详解架构师
- Oracle数据库传参数:一种实现思路(oracle传参数)
- 教程 | 看看大神的思路!机器学习界网红 7 分钟教你如何搭建 Chatbot?(中文版)
- 区块链研习 | 两种典型的区块链设计思路之差
- div+css在思路和流程上实现结构与表现的分离分析
- javascript淡入淡出效果的实现思路
- Android列表实现(3)_自定义列表适配器思路及实现代码
- 存储过程实现订单号,流水单号(8位)的详细思路
- c#winform关闭窗体时同时结束线程实现思路
- 在SQLServer中使用CLR调用.NET方法实现思路
- Asp.net+jquery+.ashx文件实现分页思路
- JQuery+CSS提示框实现思路及代码(纯手工打造)
- Jquery实现鼠标移上弹出提示框、移出消失思路及代码
- android获取照片的快照思路及实现方法
- C#中使用反射获取结构体实例及思路
- 改变文件域的样式实现思路同时兼容ie、firefox
- 一个网页标题title的闪动提示效果实现思路
- C语言对堆排序一个算法思路和实现代码
- jQuery+ajax实现鼠标单击修改内容的思路