React 源码剖析 2-1：深入了解 createElement() API

React.createElement() API 简介

React.createElement() 是一个用来创建虚拟DOM元素的核心函数。它接收三个参数：

• type ：要创建的元素的类型。这可以是字符串（例如，'div' 或 'button'），也可以是组件类或函数。
• config ：一个对象，其中包含要应用于该元素的属性和事件处理程序。
• children ：一个数组，其中包含该元素的子元素。

例如，以下代码创建了一个带有文本内容“Hello World”的 <div> 元素：

const element = React.createElement('div', null, 'Hello World');

type 参数

type 参数指定要创建的元素的类型。它可以是字符串（例如，'div' 或 'button'），也可以是组件类或函数。

字符串类型

当 type 参数是字符串时，React 将创建一个具有该名称的原生HTML元素。例如，以下代码创建了一个 <div> 元素：

const element = React.createElement('div');

组件类或函数类型

当 type 参数是组件类或函数时，React 将创建一个该组件的实例。例如，以下代码创建了一个 MyComponent 组件的实例：

const element = React.createElement(MyComponent);

config 参数

config 参数是一个对象，其中包含要应用于该元素的属性和事件处理程序。属性是键值对，其中键是属性的名称，值是属性的值。事件处理程序是函数，当该元素上的事件发生时，它们将被调用。

例如，以下代码创建了一个带有 id 属性和 onClick 事件处理程序的 <div> 元素：

const element = React.createElement('div', {
  id: 'my-div',
  onClick: () => {
    console.log('The div was clicked!');
  }
});

children 参数

children 参数是一个数组，其中包含该元素的子元素。子元素可以是字符串、组件实例或其他虚拟DOM元素。

例如，以下代码创建了一个带有文本内容“Hello World”的 <div> 元素，其中包含一个带有文本内容“This is a child element”的 <p> 元素：

const element = React.createElement('div', null, 'Hello World', React.createElement('p', null, 'This is a child element'));

总结

React.createElement() API 是一个用来创建虚拟DOM元素的核心函数。它接收三个参数：type、config 和 children。type 参数指定要创建的元素的类型。config 参数是一个对象，其中包含要应用于该元素的属性和事件处理程序。children 参数是一个数组，其中包含该元素的子元素。通过对 createElement() API 的深入理解，我们将对 React 的工作原理有一个更深入的认识。