react 源码解析 19. 手写迷你版 react

const React = {  createElement,  render,};
const container = document.getElementById("root");
const updateValue = (e) => {  rerender(e.target.value);};
const rerender = (value) => {  const element = (    <div>      <input onInput={updateValue} value={value} />      <h2>Hello {value}</h2>    </div>  );  React.render(element, container);};
rerender("World");

/创建elementfunction createElement(type, props, ...children) {  return {    type,    props: {      ...props,      children: children.map((child) => (typeof child === "object" ? child : createTextElement(child))),    },  };}
//创建text类型function createTextElement(text) {  return {    type: "TEXT_ELEMENT",    props: {      nodeValue: text,      children: [],    },  };}
//创建domfunction createDom(fiber) {  const dom = fiber.type === "TEXT_ELEMENT" ? document.createTextNode("") : document.createElement(fiber.type);
  updateDom(dom, {}, fiber.props);
  return dom;}

const isEvent = (key) => key.startsWith("on");const isProperty = (key) => key !== "children" && !isEvent(key);const isNew = (prev, next) => (key) => prev[key] !== next[key];const isGone = (prev, next) => (key) => !(key in next);
//更新节点属性function updateDom(dom, prevProps, nextProps) {  //删除老的事件  Object.keys(prevProps)    .filter(isEvent)    .filter((key) => !(key in nextProps) || isNew(prevProps, nextProps)(key))    .forEach((name) => {      const eventType = name.toLowerCase().substring(2);      dom.removeEventListener(eventType, prevProps[name]);    });
  // 删除旧属性  Object.keys(prevProps)    .filter(isProperty)    .filter(isGone(prevProps, nextProps))    .forEach((name) => {      dom[name] = "";    });
  // 设置新属性  Object.keys(nextProps)    .filter(isProperty)    .filter(isNew(prevProps, nextProps))    .forEach((name) => {      dom[name] = nextProps[name];    });
  // 增加新事件  Object.keys(nextProps)    .filter(isEvent)    .filter(isNew(prevProps, nextProps))    .forEach((name) => {      const eventType = name.toLowerCase().substring(2);      dom.addEventListener(eventType, nextProps[name]);    });}

//render阶段function performUnitOfWork(fiber) {  if (!fiber.dom) {    fiber.dom = createDom(fiber);  }
  const elements = fiber.props.children;  reconcileChildren(fiber, elements);
  if (fiber.child) {    return fiber.child;  }  let nextFiber = fiber;  while (nextFiber) {    if (nextFiber.sibling) {      return nextFiber.sibling;    }    nextFiber = nextFiber.parent;  }}
//调协节点function reconcileChildren(wipFiber, elements) {  let index = 0;  let oldFiber = wipFiber.alternate && wipFiber.alternate.child;  let prevSibling = null;  while (index < elements.length || (oldFiber !== null && oldFiber !== undefined)) {    const element = elements[index];    let newFiber = null;
    const sameType = oldFiber && element && element.type === oldFiber.type;
    if (sameType) {      newFiber = {        type: oldFiber.type,        props: element.props,        dom: oldFiber.dom,        parent: wipFiber,        alternate: oldFiber,        effectTag: "UPDATE",      };    }    if (element && !sameType) {      newFiber = {        type: element.type,        props: element.props,        dom: null,        parent: wipFiber,        alternate: null,        effectTag: "PLACEMENT",      };    }    if (oldFiber && !sameType) {      oldFiber.effectTag = "DELETION";      deletions.push(oldFiber);    }
    if (oldFiber) {      oldFiber = oldFiber.sibling;    }
    if (index === 0) {      wipFiber.child = newFiber;    } else if (element) {      prevSibling.sibling = newFiber;    }    prevSibling = newFiber;    index++;  }}

//commit阶段function commitRoot() {  deletions.forEach(commitWork);  commitWork(wipRoot.child);  currentRoot = wipRoot;  wipRoot = null;}
//操作真实domfunction commitWork(fiber) {  if (!fiber) {    return;  }
  const domParent = fiber.parent.dom;  if (fiber.effectTag === "PLACEMENT" && fiber.dom !== null) {    domParent.appendChild(fiber.dom);  } else if (fiber.effectTag === "UPDATE" && fiber.dom !== null) {    updateDom(fiber.dom, fiber.alternate.props, fiber.props);  } else if (fiber.effectTag === "DELETION") {    domParent.removeChild(fiber.dom);  }
  commitWork(fiber.child);  commitWork(fiber.sibling);}

//渲染开始的入口function render(element, container) {  wipRoot = {    dom: container,    props: {      children: [element],    },    alternate: currentRoot,  };  deletions = [];  nextUnitOfWork = wipRoot;}
//调度函数function workLoop(deadline) {  let shouldYield = false;  while (nextUnitOfWork && !shouldYield) {    //render阶段    nextUnitOfWork = performUnitOfWork(nextUnitOfWork);    shouldYield = deadline.timeRemaining() < 1;  }
  if (!nextUnitOfWork && wipRoot) {    commitRoot(); //commit阶段  }
  requestIdleCallback(workLoop); //空闲调度}
requestIdleCallback(workLoop);

//创建elementfunction createElement(type, props, ...children) {  return {    type,    props: {      ...props,      children: children.map((child) => (typeof child === "object" ? child : createTextElement(child))),    },  };}
//创建text类型function createTextElement(text) {  return {    type: "TEXT_ELEMENT",    props: {      nodeValue: text,      children: [],    },  };}
//创建domfunction createDom(fiber) {  const dom = fiber.type === "TEXT_ELEMENT" ? document.createTextNode("") : document.createElement(fiber.type);
  updateDom(dom, {}, fiber.props);
  return dom;}
const isEvent = (key) => key.startsWith("on");const isProperty = (key) => key !== "children" && !isEvent(key);const isNew = (prev, next) => (key) => prev[key] !== next[key];const isGone = (prev, next) => (key) => !(key in next);
//更新节点属性function updateDom(dom, prevProps, nextProps) {  //删除老的事件  Object.keys(prevProps)    .filter(isEvent)    .filter((key) => !(key in nextProps) || isNew(prevProps, nextProps)(key))    .forEach((name) => {      const eventType = name.toLowerCase().substring(2);      dom.removeEventListener(eventType, prevProps[name]);    });
  // 删除旧属性  Object.keys(prevProps)    .filter(isProperty)    .filter(isGone(prevProps, nextProps))    .forEach((name) => {      dom[name] = "";    });
  // 设置新属性  Object.keys(nextProps)    .filter(isProperty)    .filter(isNew(prevProps, nextProps))    .forEach((name) => {      dom[name] = nextProps[name];    });
  // 增加新事件  Object.keys(nextProps)    .filter(isEvent)    .filter(isNew(prevProps, nextProps))    .forEach((name) => {      const eventType = name.toLowerCase().substring(2);      dom.addEventListener(eventType, nextProps[name]);    });}
//commit阶段function commitRoot() {  deletions.forEach(commitWork);  commitWork(wipRoot.child);  currentRoot = wipRoot;  wipRoot = null;}
//操作真实domfunction commitWork(fiber) {  if (!fiber) {    return;  }
  const domParent = fiber.parent.dom;  if (fiber.effectTag === "PLACEMENT" && fiber.dom !== null) {    domParent.appendChild(fiber.dom);  } else if (fiber.effectTag === "UPDATE" && fiber.dom !== null) {    updateDom(fiber.dom, fiber.alternate.props, fiber.props);  } else if (fiber.effectTag === "DELETION") {    domParent.removeChild(fiber.dom);  }
  commitWork(fiber.child);  commitWork(fiber.sibling);}
let nextUnitOfWork = null;let currentRoot = null;let wipRoot = null;let deletions = null;
//渲染开始的入口function render(element, container) {  wipRoot = {    dom: container,    props: {      children: [element],    },    alternate: currentRoot,  };  deletions = [];  nextUnitOfWork = wipRoot;}
//调度函数function workLoop(deadline) {  let shouldYield = false;  while (nextUnitOfWork && !shouldYield) {    //render阶段    nextUnitOfWork = performUnitOfWork(nextUnitOfWork);    shouldYield = deadline.timeRemaining() < 1;  }
  if (!nextUnitOfWork && wipRoot) {    commitRoot(); //commit阶段  }
  requestIdleCallback(workLoop); //空闲调度}
requestIdleCallback(workLoop);
//render阶段function performUnitOfWork(fiber) {  if (!fiber.dom) {    fiber.dom = createDom(fiber);  }
  const elements = fiber.props.children;  reconcileChildren(fiber, elements);
  if (fiber.child) {    return fiber.child;  }  let nextFiber = fiber;  while (nextFiber) {    if (nextFiber.sibling) {      return nextFiber.sibling;    }    nextFiber = nextFiber.parent;  }}
//调协节点function reconcileChildren(wipFiber, elements) {  let index = 0;  let oldFiber = wipFiber.alternate && wipFiber.alternate.child;  let prevSibling = null;  while (index < elements.length || (oldFiber !== null && oldFiber !== undefined)) {    const element = elements[index];    let newFiber = null;
    const sameType = oldFiber && element && element.type === oldFiber.type;
    if (sameType) {      newFiber = {        type: oldFiber.type,        props: element.props,        dom: oldFiber.dom,        parent: wipFiber,        alternate: oldFiber,        effectTag: "UPDATE",      };    }    if (element && !sameType) {      newFiber = {        type: element.type,        props: element.props,        dom: null,        parent: wipFiber,        alternate: null,        effectTag: "PLACEMENT",      };    }    if (oldFiber && !sameType) {      oldFiber.effectTag = "DELETION";      deletions.push(oldFiber);    }
    if (oldFiber) {      oldFiber = oldFiber.sibling;    }
    if (index === 0) {      wipFiber.child = newFiber;    } else if (element) {      prevSibling.sibling = newFiber;    }    prevSibling = newFiber;    index++;  }}
const React = {  createElement,  render,};
const container = document.getElementById("root");
const updateValue = (e) => {  rerender(e.target.value);};
const rerender = (value) => {  const element = (    <div>      <input onInput={updateValue} value={value} />      <h2>Hello {value}</h2>    </div>  );  React.render(element, container);};
rerender("World");