zl程序教程

您现在的位置是:首页 >  其他

当前栏目

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++;


}