200 行代码实现 React 之旅：全面探索 React 基础构建

React 基础：揭开前端开发新世界的大门

React 是当今最受欢迎的前端 JavaScript 框架之一，它凭借其高效、灵活和组件化的特性，成为了构建复杂 Web 应用的首选工具。React 的核心思想是通过构建组件来创建用户界面，这些组件可以被重用、组合和动态更新，从而大大提高了开发效率和代码的可维护性。

createElement：构建 React 组件的基础

createElement 是 React 的核心 API 之一，它是创建 React 组件的基础。createElement 函数接收两个参数：第一个参数是组件的类型，可以是字符串（表示原生 HTML 元素）或组件类（表示自定义组件）；第二个参数是组件的属性，是一个对象，包含了组件的属性值。

const element = createElement('div', { id: 'root' });

上面的代码创建了一个 div 元素，并将其 id 属性设置为 "root"。这个元素可以被传递给 React 的其他 API，如 createRoot 和 render，以将其渲染到 DOM 中。

createRoot：将 React 组件挂载到 DOM 中

createRoot 是另一个 React 的核心 API，它用于将 React 组件挂载到 DOM 中。createRoot 函数接收一个参数：一个 DOM 元素，表示要将 React 组件挂载到的位置。

const root = createRoot(document.getElementById('root'));

上面的代码获取了 id 为 "root" 的 DOM 元素，并将其传递给 createRoot 函数，从而创建了一个 React 根实例。这个根实例可以被用来渲染 React 组件。

JSX：React 的语法糖

JSX 是 React 的一种语法糖，它允许我们在 JavaScript 代码中使用类似于 HTML 的语法来创建 React 组件。JSX 在渲染时会被编译成 createElement 函数的调用。

const element = (
  <div id="root">
    <h1>Hello, world!</h1>
  </div>
);

上面的代码使用 JSX 创建了一个 div 元素，并在其中包含了一个 h1 元素。这个元素可以被传递给 React 的其他 API，如 createRoot 和 render，以将其渲染到 DOM 中。

组件渲染：构建动态的用户界面

React 的组件渲染过程是一个非常重要的概念。当 React 需要渲染一个组件时，它会先调用组件的 render 方法来生成一个 React 元素，然后将这个元素传递给 createRoot 或 render 函数来将其渲染到 DOM 中。

class MyComponent extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello, {this.props.name}!</h1>
      </div>
    );
  }
}

const root = createRoot(document.getElementById('root'));
root.render(<MyComponent name="John" />);

上面的代码定义了一个名为 MyComponent 的组件，并将其渲染到了 DOM 中。当组件的 props 发生变化时，React 会自动调用组件的 render 方法来重新生成 React 元素，并将其渲染到 DOM 中。

结语

在本文中，我们从零开始实现 React 的基本 API，如 createRoot 和 createElement，并通过分析 JSX 在渲染时的实际结构进行了简单的组件渲染逻辑。希望您已经对 React 的基础原理有了更深入的了解。在下一篇博文中，我们将继续深入探索 React 的世界，带您领略更多激动人心的特性和技术。