React中的JSX和React elements的概念

最新推荐文章于 2025-10-03 18:07:03 发布

原创最新推荐文章于 2025-10-03 18:07:03 发布 · 768 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#react #jsx #react jsx #react element #react concept

React 专栏收录该内容

5 篇文章

订阅专栏

本文深入探讨了JSX语法在React中的应用，解释了JSX如何转换为React元素对象，以及这些元素如何被渲染成DOM节点的过程。通过具体示例，展示了JSX与React.createElement方法之间的等价性。

Introducing `JSX`

JSX语法实际上是在创建对象，产生的对象称为React elements;
对这些React elements进行渲染，构建出DOM

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);
// => 等于如下写法：
const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

// => 创建出的对象（React elements）如下形式：
// Note: this structure is simplified
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};