React-useState实现

Posted 2021-09-13 冷咖啡

已实现功能

• 实现useState的基本功能，取值和存值

待优化解决问题

• 在某个时间段，将要更新的状态统一处理完，再更新DOM，目前是更新一次重新渲染一次
• 暂时不能引入到React环境中，缺少React的渲染方法待实现。但可以window中调试，能看到状态的更新

/**
 * 第一步：
 * isMount: 判断是第一次加载还是更新组件
 * workInProgressHooks: 定义一个指针， 指向当前执行的useSate的
 */

 let isMount = true;
 let workInProgressHooks = null;
 
 /**
  *  第二步
  *  定义 fiber节点
  */
 const fibier = {
   stateNode: App,
   memoizedState: null, // 当前fiber节点需要维护的hook
 };
 
 /**
  * 第四步： 实现useState
  * @returns
  */
 
 function useState(initialState) {
   let hook;
    if(typeof initialState === "function" ) {
      initialState = initialState();
    }
 
   if (isMount) {  
     hook = {
       memoizedState: initialState, // 当前这个hook需要维护的数据
       next: null, // 为保证所有的useState能按序执行，所以需要实现 【链表结构】
       queue: {
         pending: null,
       },
     };
 
     if (!fibier.memoizedState) {
       fibier.memoizedState = hook;
     } else {
       workInProgressHooks.next = hook;
     }
     workInProgressHooks = hook;
   } else {
     hook = workInProgressHooks;
     workInProgressHooks = workInProgressHooks.next;
   }
 
   // todo
   let beaseSate = hook.memoizedState;
   if(hook.queue.pending) {
     let firstUpate = hook.queue.pending.next;
     do{
       const action = firstUpate.action;
       beaseSate = action(beaseSate);
       firstUpate = firstUpate.next;

     }while(firstUpate !== hook.queue.pending.next);
 
     hook.queue.pending = null;  
   }
 
   hook.memoizedState = beaseSate;
   return [beaseSate, dispatchAction.bind(null, hook.queue)]
 
 }
 
 /**
  * 第五步：实现状态更新
  * @returns
  */
 
 function dispatchAction(queue, action) {
   const update = {
     action,
     next: null,
   };
 
   // 第一次触发更新
   if (queue.pending === null) {
     update.next = update;
   } else {
     update.next = queue.pending.next;
     queue.pending.next = update;
   }
 
   queue.pending = update;
    schedule();
 }
 
 /**
  * 第三步
  * 实现React 调度方法
  * 调度方法运行后，即重新加载组建后，React会重新渲染
  */
 function schedule() {
   workInProgressHooks = fibier.memoizedState;
   const app = fibier.stateNode();
   isMount = false;
   return app;
 }
 
 
 function App() {
   const [num1, setNum1] = useState(0);
   const [num2, setNum2] = useState(1);
   const [num3, setNum3] = useState(2);

   console.log("----最近一次更新--------", );
   console.log("num1---", num1);
   console.log("num2-", num2);
   console.log("num3222", num3);

   return {
      onclick() {
        setNum1(num1 => num1 +1);
        setNum2(num2 => num2+1)
        setNum3(num3 => num3 +1)
      }
   }
 }
 window.app = schedule();
 
 
 export default App;