React中的JSX和React elements的概念

简介: Introducing JSXJSX语法实际上是在创建对象,产生的对象称为React elements;对这些React elements进行渲染,构建出DOM

React中的JSX和React elements的概念



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!'
  }
};
目录
相关文章
|
2月前
|
前端开发 JavaScript
学习react基础(3)_setState、state、jsx、使用ref的几种形式
本文探讨了React中this.setState和this.state的区别,以及React的核心概念,包括核心库的使用、JSX语法、类与函数组件的区别、事件处理和ref的使用。
60 3
学习react基础(3)_setState、state、jsx、使用ref的几种形式
|
3月前
|
XML JavaScript 前端开发
React Jsx语法入门
【8月更文挑战第13天】React Jsx语法入门
41 4
|
3月前
|
设计模式 存储 前端开发
React开发设计模式及原则概念问题之自定义Hooks的作用是什么,自定义Hooks设计时要遵循什么原则呢
React开发设计模式及原则概念问题之自定义Hooks的作用是什么,自定义Hooks设计时要遵循什么原则呢
|
13天前
|
XML 前端开发 JavaScript
React JSX
React 使用 JSX(一种类似 XML 的 JavaScript 语法扩展)来替代传统 JavaScript 编写 UI。JSX 使代码更简洁、执行更快且类型安全。例如,`&lt;h1&gt;Hello, world!&lt;/h1&gt;` 实际上是创建一个 React 元素,通过 `ReactDOM.render()` 渲染到 DOM。注意,JSX 中使用 `className` 替代 HTML 的 `class` 属性。
|
23天前
|
XML 前端开发 JavaScript
React JSX
10月更文挑战第7天
13 2
|
3月前
|
前端开发 JavaScript 数据处理
如何学习React的高级概念?
【8月更文挑战第26天】如何学习React的高级概念?
38 2
|
3月前
|
前端开发 JavaScript
React Server Component 使用问题之添加jsx的组件化能力,如何操作
React Server Component 使用问题之添加jsx的组件化能力,如何操作
|
3月前
|
前端开发 JavaScript 开发者
React组件与JSX之间的区别是什么
【8月更文挑战第9天】 React组件与JSX之间的区别是什么
61 4
|
3月前
|
存储 前端开发 JavaScript
React 中的 Memoization 概念
【8月更文挑战第31天】
35 0
|
3月前
|
前端开发
React 中的 Hook 概念
【8月更文挑战第31天】
29 0