从零实现React核心API：渲染字符串到页面

从零实现React核心API：渲染字符串到页面

实现过程解析

一、基础DOM操作实现

// 创建DOM元素
const dom = document.createElement('div');
dom.id = "app";
document.querySelector('#root').append(dom);
​
// 创建文本节点
const textNode = document.createTextNode("");
textNode.nodeValue = "app";
dom.appendChild(textNode);

二、虚拟DOM结构设计

const textEl = {
    type: "TEXT_ELEMENT",
    props: { nodeValue: "app", children: [] }
}
​
const el = {
    type: "div",
    props: {
        id: "app",
        children: [textEl]
    }
}

三、动态元素创建函数

// 文本节点创建函数
function createTextNode(text) {
    return {
        type: "TEXT_ELEMENT",
        props: { nodeValue: text, children: [] }
    }
}
​
// 元素节点创建函数
function createElement(type, props, ...children) {
    return {
        type,
        props: {
            ...props,
            children: children.map(child => 
                typeof child === "string" 
                    ? createTextNode(child) 
                    : child
            )
        }
    }
}

四、递归渲染实现

function render(el, container) {
    const dom = el.type === "TEXT_ELEMENT"
        ? document.createTextNode("")
        : document.createElement(el.type);
​
    Object.keys(el.props).forEach(key => {
        if (key !== "children") {
            dom[key] = el.props[key];
        }
    });
​
    el.props.children.forEach(child => {
        render(child, dom);
    });
​
    container.appendChild(dom);
}

五、API层封装

// ReactDOM模块
const ReactDOM = {
    createRoot(container) {
        return {
            render(App) {
                render(App, container);
            }
        }
    }
}
​
// 使用示例
const App = createElement("div", { id: "app" }, "Hello World");
ReactDOM.createRoot(document.querySelector("#root")).render(App);

六、模块化架构

my-react/
├── core/
│   ├── React.js     // 核心创建方法
│   └── ReactDOM.js  // 渲染入口
├── App.js          // 应用组件
└── main.js         // 入口文件

总结

本文从零实现了React核心渲染逻辑，通过四步递进式开发：1）基础DOM操作 2）虚拟DOM设计 3）动态元素创建 4）递归渲染架构。最终实现了与React相似的API调用方式，支持组件化开发和虚拟DOM渲染。整个过程揭示了React底层工作原理，包括元素创建、属性处理、递归渲染等关键机制。虽然暂未实现JSX解析，但已搭建出可扩展的核心框架，为后续实现组件更新、状态管理等功能奠定基础。这种实践方式有助于深入理解现代前端框架的设计思想。

关键收获：理解虚拟DOM的作用、递归渲染的实现原理、模块化架构设计方法。后续可扩展实现：1）JSX解析 2）Diff算法 3）状态更新机制。