为啥 React.createElement() 会创建一个对象？

Posted 2023-02-21

【中文标题】为啥 React.createElement() 会创建一个对象？

【英文标题】：Why does `React.createElement()` create an object?为什么 React.createElement() 会创建一个对象？

【发布时间】：2022-01-15 18:45:00

【问题描述】：

我正在学习React，我认为React.createElement(type, [props], [...children])只是一个封装了DOM方法的方法。

所以，我认为这个 React 示例：React.createElement('h1', className: 'greeting', 'Hello, world!') 会执行类似以下语句的内容：

const element = document.createElement('h1');
element.setAttribute('class', 'greeting');
document.createTextNode('Hello World');

但是，我刚刚在他们的文档中读到此方法返回此对象：

// Note: this structure is simplified
const element = 
  type: 'h1',
  props: 
    className: 'greeting',
    children: 'Hello, world!'
  
;

有没有人知道它为什么创建一个对象，以及它是如何与 html 通信的？

【参考方案1】：

您可以阅读reconciliation，阅读Fiber architecture guide，查看React DOM source，以获得非常全面的了解。

从本质上讲，React DOM 充当了协调 DOM 状态与这些对象的中介。