React Fiber 栈

React Fiber 栈管理

一、 当前指针

// 添加指针
function createCursor<T>(defaultValue: T): StackCursor<T> {
  return {
    current: defaultValue,
  };
}

二、入栈

// 推入 Fiber 栈
function push<T>(cursor: StackCursor<T>, value: T, fiber: Fiber): void {
  index++;

  valueStack[index] = cursor.current;

  if (__DEV__) {
    fiberStack[index] = fiber;
  }

  cursor.current = value;
}

三、出栈

// 弹出指定指针 fiber 出栈
function pop<T>(cursor: StackCursor<T>, fiber: Fiber): void {
  if (index < 0) {
    if (__DEV__) {
      console.error('Unexpected pop.');
    }
    return;
  }

  if (__DEV__) {
    if (fiber !== fiberStack[index]) {
      console.error('Unexpected Fiber popped.');
    }
  }

  cursor.current = valueStack[index];

  valueStack[index] = null;

  if (__DEV__) {
    fiberStack[index] = null;
  }

  index--;
}

四、 常数

import type { Fiber } from './ReactInternalTypes';

export type StackCursor<T> = { current: T };

const valueStack: Array<any> = [];

// Fiber 栈 （好像是测试用）
let fiberStack: Array<Fiber | null>;

if (__DEV__) {
  fiberStack = [];
}

// 永远记录的是 valueStack 的尾元素的下标
// （可能这样不用每次 valueStack.length - 1 ）
let index = -1;

// ... 实现方法

export { createCursor, pop, push };