React16实现原理深度解析

function Counter() {
  const [count, setCount] = useState(0);
  return <div onClick={() => setCount(c => c + 1)}>{count}</div>;
}

render(<Counter />, document.getElementById('root'));

let nextUnitOfWork = null; // 下一个待处理的Fiber工作单元
let wipRoot = null;        // 正在构建的Fiber树根（work in progress root）
let currentRoot = null;    // 上一次渲染完成的旧Fiber树根
let deletions = null;      // 本次需要删除的Fiber节点列表

export function createElement(type, props, ...children) {
  return {
    type,
    props: {
      ...props,
      children: children.map((child) =>
        typeof child === 'object' ? child : createTextElement(child)
      ),
    },
  };
}

function createTextElement(text) {
  return {
    type: 'TEXT_ELEMENT',
    props: {
      nodeValue: text,
      children: [],
    },
  };
}

// <div id="app">Hello</div> 编译后
const element = {
  type: 'div',
  props: {
    id: 'app',
    children: [
      { type: 'TEXT_ELEMENT', props: { nodeValue: 'Hello', children: [] } }
    ]
  }
};

const fiber = {
  type: 'div',          // 节点类型：DOM标签/函数组件
  props: {},            // 包含children的属性集合
  dom: null,            // 对应的真实DOM节点（函数组件为null）
  parent: null,         // 父Fiber节点
  child: null,          // 第一个子Fiber节点
  sibling: null,        // 右侧兄弟Fiber节点
  alternate: null,      // 上一次渲染的旧Fiber（用于Diff）
  effectTag: null,      // 副作用标记：PLACEMENT/UPDATE/DELETION
  hooks: []             // 仅函数组件有：存储useState等Hook状态
};

<App>
  <div>
    <h2></h2>
    <p></p>
  </div>
</App>

export function render(element, container) {
  wipRoot = {
    dom: container,       // 根Fiber对应容器DOM
    props: { children: [element] }, // 子节点是传入的虚拟DOM
    alternate: currentRoot // 关联上一次的旧根Fiber
  };
  deletions = [];         // 清空删除列表
  nextUnitOfWork = wipRoot; // 从根开始处理
}

function workLoop(deadline) {
  let shouldYield = false;
  // 有工作单元且有剩余时间，就继续处理
  while (nextUnitOfWork && !shouldYield) {
    nextUnitOfWork = performUnitOfWork(nextUnitOfWork);
    // 检查剩余时间，不足1ms就暂停
    shouldYield = deadline.timeRemaining() < 1;
  }

  // 所有工作单元处理完，且有新根Fiber，就提交DOM更新
  if (!nextUnitOfWork && wipRoot) {
    commitRoot();
  }

  // 注册下一次空闲回调
  requestIdleCallback(workLoop);
}
// 启动工作循环
requestIdleCallback(workLoop);

function performUnitOfWork(fiber) {
  // 区分函数组件和DOM组件
  const isFunctionComponent = fiber.type instanceof Function;
  if (isFunctionComponent) {
    updateFunctionComponent(fiber);
  } else {
    updateHostComponent(fiber);
  }

  // 决定下一个工作单元：先找子节点，再找兄弟，最后回退到父节点的兄弟
  if (fiber.child) {
    return fiber.child;
  }
  let nextFiber = fiber;
  while (nextFiber) {
    if (nextFiber.sibling) {
      return nextFiber.sibling;
    }
    nextFiber = nextFiber.parent;
  }
}

function updateHostComponent(fiber) {
  // 首次渲染：创建真实DOM节点
  if (!fiber.dom) {
    fiber.dom = createDom(fiber);
  }
  // 协调子节点：根据虚拟DOM创建子Fiber并Diff
  const elements = fiber.props.children;
  reconcileChildren(fiber, elements);
}

// 创建DOM节点的辅助函数
function createDom(fiber) {
  const dom = fiber.type === 'TEXT_ELEMENT'
    ? document.createTextNode('')
    : document.createElement(fiber.type);
  // 设置DOM属性（事件、样式等）
  updateDom(dom, {}, fiber.props);
  return dom;
}

// 全局变量：当前处理的函数组件Fiber和Hook索引
let wipFiber = null;
let hookIndex = null;

function updateFunctionComponent(fiber) {
  wipFiber = fiber;       // 标记当前Fiber
  hookIndex = 0;          // 重置Hook索引
  wipFiber.hooks = [];    // 清空旧Hook列表
  // 执行组件函数，得到返回的虚拟DOM
  const children = [fiber.type(fiber.props)];
  // 协调子节点
  reconcileChildren(fiber, children);
}

function reconcileChildren(wipFiber, elements) {
  let index = 0;
  // 旧Fiber链表：从旧根Fiber的child开始
  let oldFiber = wipFiber.alternate && wipFiber.alternate.child;
  let prevSibling = null;

  // 遍历新虚拟DOM和旧Fiber链表
  while (index < elements.length || oldFiber != null) {
    const element = elements[index];
    let newFiber = null;
    // 判断新旧节点类型是否相同
    const sameType = oldFiber && element && element.type === oldFiber.type;

    // 1. 类型相同：复用旧DOM，标记UPDATE
    if (sameType) {
      newFiber = {
        type: oldFiber.type,
        props: element.props,
        dom: oldFiber.dom,
        parent: wipFiber,
        alternate: oldFiber,
        effectTag: 'UPDATE'
      };
    }

    // 2. 类型不同且有新节点：创建新Fiber，标记PLACEMENT
    if (element && !sameType) {
      newFiber = {
        type: element.type,
        props: element.props,
        dom: null,
        parent: wipFiber,
        alternate: null,
        effectTag: 'PLACEMENT'
      };
    }

    // 3. 类型不同且有旧节点：标记旧Fiber为DELETION
    if (oldFiber && !sameType) {
      oldFiber.effectTag = 'DELETION';
      deletions.push(oldFiber);
    }

    // 移动旧Fiber指针到下一个兄弟
    if (oldFiber) {
      oldFiber = oldFiber.sibling;
    }

    // 把新Fiber接入链表（child/sibling）
    if (index === 0) {
      wipFiber.child = newFiber;
    } else if (element) {
      prevSibling.sibling = newFiber;
    }

    prevSibling = newFiber;
    index++;
  }
}

function commitRoot() {
  // 1. 先处理要删除的节点
  deletions.forEach(commitWork);
  // 2. 从根Fiber的child开始提交新增/更新
  commitWork(wipRoot.child);
  // 3. 把新Fiber树设为旧树，准备下一次更新
  currentRoot = wipRoot;
  // 4. 清空工作中的根Fiber
  wipRoot = null;
}

function commitWork(fiber) {
  if (!fiber) return;

  // 找真实DOM的父节点（函数组件没有dom，要向上找）
  let domParentFiber = fiber.parent;
  while (!domParentFiber.dom) {
    domParentFiber = domParentFiber.parent;
  }
  const domParent = domParentFiber.dom;

  switch (fiber.effectTag) {
    // 新增节点：appendChild
    case 'PLACEMENT':
      if (fiber.dom) domParent.appendChild(fiber.dom);
      break;
    // 更新节点：对比新旧props更新DOM
    case 'UPDATE':
      if (fiber.dom) updateDom(fiber.dom, fiber.alternate.props, fiber.props);
      break;
    // 删除节点：递归删除子节点
    case 'DELETION':
      commitDeletion(fiber, domParent);
      break;
  }

  // 递归处理子节点和兄弟节点
  commitWork(fiber.child);
  commitWork(fiber.sibling);
}

// 删除节点的辅助函数
function commitDeletion(fiber, domParent) {
  if (fiber.dom) {
    domParent.removeChild(fiber.dom);
  } else {
    // 函数组件没有dom，递归删除它的子节点
    commitDeletion(fiber.child, domParent);
  }
}

function updateDom(dom, prevProps, nextProps) {
  // 1. 移除旧的事件监听
  Object.keys(prevProps)
    .filter(isEvent)
    .filter(key => !(key in nextProps) || prevProps[key] !== nextProps[key])
    .forEach(key => {
      const eventType = key.toLowerCase().substring(2);
      dom.removeEventListener(eventType, prevProps[key]);
    });

  // 2. 移除旧的属性
  Object.keys(prevProps)
    .filter(isProperty)
    .filter(key => !(key in nextProps))
    .forEach(key => {
      dom[key] = '';
    });

  // 3. 设置新的属性和事件监听
  Object.keys(nextProps)
    .filter(isProperty)
    .filter(key => prevProps[key] !== nextProps[key])
    .forEach(key => {
      dom[key] = nextProps[key];
    });

  Object.keys(nextProps)
    .filter(isEvent)
    .filter(key => prevProps[key] !== nextProps[key])
    .forEach(key => {
      const eventType = key.toLowerCase().substring(2);
      dom.addEventListener(eventType, nextProps[key]);
    });
}

// 辅助函数：判断是否是事件（如onClick）
function isEvent(key) {
  return key.startsWith('on');
}
// 辅助函数：判断是否是普通属性（排除children）
function isProperty(key) {
  return key !== 'children' && !isEvent(key);
}

export function useState(initial) {
  // 1. 找上次渲染的旧Hook（从alternate.hooks里拿）
  const oldHook = wipFiber.alternate && 
                  wipFiber.alternate.hooks && 
                  wipFiber.alternate.hooks[hookIndex];

  // 2. 创建新Hook：复用旧状态或用初始值
  const hook = {
    state: oldHook ? oldHook.state : initial,
    queue: [] // 存储setState的action队列
  };

  // 3. 执行上次渲染到这次之间的所有action
  const actions = oldHook ? oldHook.queue : [];
  actions.forEach(action => {
    hook.state = typeof action === 'function' 
      ? action(hook.state) 
      : action;
  });

  // 4. 创建setState：把action加入队列并触发重新渲染
  const setState = action => {
    hook.queue.push(action);
    // 重新初始化根Fiber，触发新一轮Render
    wipRoot = {
      dom: currentRoot.dom,
      props: currentRoot.props,
      alternate: currentRoot
    };
    nextUnitOfWork = wipRoot;
    deletions = [];
  };

  // 5. 把新Hook加入当前Fiber的hooks数组
  wipFiber.hooks.push(hook);
  // 6. 移动Hook索引，准备处理下一个useState
  hookIndex++;

  return [hook.state, setState];
}

function Demo() {
  if (someCondition) {
    const [a] = useState(0); // 某些渲染走，某些不走
  }
  const [b] = useState(1);
}