自己实现react

实现简易 React 核心功能

实现一个简易 React 需要包含虚拟 DOM、组件系统、状态管理和渲染机制。以下是核心功能的实现方法：

虚拟 DOM 结构 虚拟 DOM 是一个轻量级的 JavaScript 对象，描述真实 DOM 结构。定义基础结构如下：

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: [],
    },
  };
}

渲染函数 将虚拟 DOM 渲染到真实 DOM 需要递归处理节点：

function render(element, container) {
  const dom =
    element.type == "TEXT_ELEMENT"
      ? document.createTextNode("")
      : document.createElement(element.type);

  const isProperty = key => key !== "children";
  Object.keys(element.props)
    .filter(isProperty)
    .forEach(name => {
      dom[name] = element.props[name];
    });

  element.props.children.forEach(child =>
    render(child, dom)
  );
  container.appendChild(dom);
}

组件系统 实现函数组件和类组件的基础结构：

function createComponent(component, props) {
  if (component.prototype && component.prototype.render) {
    // 类组件处理
    const instance = new component(props);
    return instance.render();
  } else {
    // 函数组件处理
    return component(props);
  }
}

状态管理 实现基础的 useState Hook：

let hookStates = [];
let hookIndex = 0;

function useState(initialState) {
  const currentIndex = hookIndex;
  hookStates[currentIndex] = hookStates[currentIndex] || initialState;

  function setState(newState) {
    hookStates[currentIndex] = newState;
    // 触发重新渲染
    rerender();
  }

  hookIndex++;
  return [hookStates[currentIndex], setState];
}

协调算法（Reconciliation） 实现简单的 diff 算法进行 DOM 更新：

function updateDomProperties(dom, prevProps, nextProps) {
  const isEvent = name => name.startsWith("on");
  const isProperty = name => !isEvent(name) && name !== "children";

  // 移除旧事件监听
  Object.keys(prevProps)
    .filter(isEvent)
    .forEach(name => {
      const eventType = name.toLowerCase().substring(2);
      dom.removeEventListener(eventType, prevProps[name]);
    });

  // 设置新属性
  Object.keys(nextProps)
    .filter(isProperty)
    .forEach(name => {
      dom[name] = nextProps[name];
    });

  // 添加新事件监听
  Object.keys(nextProps)
    .filter(isEvent)
    .forEach(name => {
      const eventType = name.toLowerCase().substring(2);
      dom.addEventListener(eventType, nextProps[name]);
    });
}

实现生命周期方法

为类组件添加基础生命周期支持：

class Component {
  constructor(props) {
    this.props = props;
    this.state = {};
  }

  setState(partialState) {
    this.state = { ...this.state, ...partialState };
    // 触发更新
    scheduleUpdate(this);
  }

  componentDidMount() {}
  shouldComponentUpdate() { return true; }
  componentDidUpdate() {}
  componentWillUnmount() {}
}

实现 Fiber 架构

现代 React 使用 Fiber 架构实现可中断渲染：

function performUnitOfWork(fiber) {
  if (!fiber.dom) {
    fiber.dom = createDom(fiber);
  }

  const elements = fiber.props.children;
  let index = 0;
  let prevSibling = null;

  while (index < elements.length) {
    const element = elements[index];
    const newFiber = {
      type: element.type,
      props: element.props,
      parent: fiber,
      dom: null,
    };

    if (index === 0) {
      fiber.child = newFiber;
    } else {
      prevSibling.sibling = newFiber;
    }

    prevSibling = newFiber;
    index++;
  }

  if (fiber.child) {
    return fiber.child;
  }
  let nextFiber = fiber;
  while (nextFiber) {
    if (nextFiber.sibling) {
      return nextFiber.sibling;
    }
    nextFiber = nextFiber.parent;
  }
}

实现事件系统

React 使用事件委托实现合成事件：

const syntheticEvent = {
  onClick: 'click',
  onChange: 'change',
  // 其他事件映射
};

function addEventListeners() {
  Object.keys(syntheticEvent).forEach(reactName => {
    const domEventName = syntheticEvent[reactName];
    document.addEventListener(domEventName, e => {
      // 实现事件冒泡和合成事件对象
      handleEvent(domEventName, e);
    });
  });
}

function handleEvent(domEventName, nativeEvent) {
  let target = nativeEvent.target;
  while (target) {
    const reactEventName = getReactEventName(domEventName);
    const props = getPropsForElement(target);
    if (props && props[reactEventName]) {
      props[reactEventName](nativeEvent);
    }
    target = target.parentNode;
  }
}

以上实现涵盖了 React 最核心的功能模块。实际生产环境的 React 实现更加复杂，包含性能优化、错误边界、上下文等更多特性。这个简易实现可以帮助理解 React 的工作原理。