React 学习之 createElement

React 元素

在 React 中，元素是 React 应用的最小构建块。
一个 React 元素是 React 对象的一个轻量级、静态的表示。
它们被 React 用于知道屏幕上什么应该被渲染，并在数据改变时保持 UI 的更新。

React 元素是不可变的：一旦创建，就不能更改它的子元素或属性。
一个元素就像电影的单帧：它代表 UI 在某一时间点的样子。

尽管 React 元素在技术上是一个对象，但它们并不是实际的 DOM 元素。
React 使用这些对象来构建 DOM，并在必要时更新它。
React 元素是 React 的抽象表示，而不是 DOM 的直接表示。

总的来说，React 元素确实可以被视为普通的 JavaScript 对象，但它们在 React 的工作流中扮演着特殊的角色，用于描述 UI 的结构和属性。

React.createElement

用来创建一个React元素

参数：

标签名元素的名称（HTML标签必须小写）
属性标签中的属性
- 在设置事件时，属性名需要修改为驼峰命名法值为一个函数
- 例如：onClick 需要修改为 onClick
- Warning: Invalid DOM property class. Did you mean className? class -> className
子元素标签中的子元素
- 例如：
  这是一个div
  
  子元素为”这是一个div”
- 子元素可以是字符串、数字、React元素、数组、布尔值、null、undefined
返回值：一个React元素
注意点：
- React 元素最终会通过虚拟DOM转换为真实的DOM元素
- React 元素是一个普通的JS对象

React.createElement 是 React 库中的一个函数，用于在 JavaScript 中创建 React 元素。在 JSX 语法被引入之前，React.createElement 是创建 React 组件树的主要方式。尽管现在 JSX 在 React 社区中非常流行，但理解 React.createElement 仍然很重要，因为它实际上是 JSX 在编译时转换为的东西。

React.createElement 函数接受三个参数：

类型 (type)：这通常是一个字符串（表示一个 DOM 元素，如 ‘div’ 或 ‘span’）或一个 React 组件类（或函数）。
配置对象 (config)：一个可选的对象，包含该元素的 props。
子元素 (children)：可以是任何有效的 React 子元素，可以是一个或多个。
示例：

const element = React.createElement(  
  'div',  
  { id: 'myDiv', className: 'myClass' },  
  'Hello, world!',  
  React.createElement('span', null, 'This is a span.')  
);

这个示例创建了一个 div 元素，它有一个 ID 和一个类名，以及两个子元素：一个文本节点和一个 span 元素。

当你使用 JSX 时，上述代码可以写为：

const element = (  
    
    Hello, world!  
    This is a span.  
    
);

尽管 JSX 提供了更简洁、更易于理解的语法，但理解 React.createElement 仍然有助于你理解 React 的底层工作原理。

React createElement 示例



  
    
    
    React learning

参考

React 官方中文文档 https://react.docschina.org/

千百度

1.本站内容仅供参考，不作为任何法律依据。用户在使用本站内容时，应自行判断其真实性、准确性和完整性，并承担相应风险。

2.本站部分内容来源于互联网，仅用于交流学习研究知识，若侵犯了您的合法权益，请及时邮件或站内私信与本站联系，我们将尽快予以处理。

3.本文采用知识共享署名4.0国际许可协议 [BY-NC-SA] 进行授权

4.根据《计算机软件保护条例》第十七条规定“为了学习和研究软件内含的设计思想和原理，通过安装、显示、传输或者存储软件等方式使用软件的，可以不经软件著作权人许可，不向其支付报酬。”您需知晓本站所有内容资源均来源于网络，仅供用户交流学习与研究使用，版权归属原版权方所有，版权争议与本站无关，用户本人下载后不能用作商业或非法用途，需在24个小时之内从您的电脑中彻底删除上述内容，否则后果均由用户承担责任；如果您访问和下载此文件，表示您同意只将此文件用于参考、学习而非其他用途，否则一切后果请您自行承担，如果您喜欢该程序，请支持正版软件，购买注册，得到更好的正版服务。

5.本站是非经营性个人站点，所有软件信息均来自网络，所有资源仅供学习参考研究目的，并不贩卖软件，不存在任何商业目的及用途

THE END

react框架