React 学习之 createElement

  • A+
所属分类:以太坊ETH

chatGPT账号

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 = (  
  <div id="myDiv" className="myClass">      Hello, world!      <span>This is a span.</span>    </div>  
);

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

React createElement 示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React learning</title>
    <script src="script/react.development.js"></script>
    <script src="script/react-dom.development.js"></script>
  </head>

  <body>
    <button id="btn">我是一个按钮</button>
    <div id="root"></div>

    <script>      
    /*        
    在 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 设置               
    - 子元素 元素的内容(子元素)           
    - 返回值:一个React元素            
    - 注意点:                
    - React 元素最终会通过虚拟DOM转换为真实的DOM元素                
    - React 元素是一个普通的JS对象                
    - React 元素是不可变的,一旦创建,就不能更改它的子元素或者属性 React 元素一旦创建就无法修改,                    
    如果想要修改,只能重新创建新的元素,即只能通过新创建的元素进行替换                */      
    // 创建一个React元素      
    const button = React.createElement(        "button",        {          id: "btn",          type: "button",          className: "hello",          onClick: () => {            alert(123);          },        },        "点我一下"      );      // 创建一个div      
    const div = React.createElement("div", {}, "这是一个div", button);      // 获取根元素      
    const root = ReactDOM.createRoot(document.getElementById("root"));      // 将React元素渲染到根元素中 将元素在根元素中显示      
    root.render(div);      // 获取按钮对象      
    const btn = document.getElementById("btn");      
    btn.addEventListener("click", () => {        // 点击按钮后,修改div中button中的文字为 click me       
    const button = React.createElement(          "button",          {            id: "btn",            type: "button",            className: "hello",            onClick: () => {              alert(123);            },          },          "click me"        );        // 创建一个div        
    const div = React.createElement("div", {}, "这是一个div", button);        // 修改React元素后,必须重新渲染React根元素      
    // 当调用render渲染页面时,React会自动比较两次渲染的元素,只在真实DOM中更新发生变化的部分,没发生变化的保持不变       
    // 这样可以提高页面的性能        
    // 重新渲染React根元素       
    root.render(div);      });    </script>
  </body>
</html>
免责声明

发文时比特币价格:$71249

当前比特币价格:[crypto coins=”BTC” type=”text” show=”price”]

当前比特币涨幅:[crypto coins=”BTC” type=”text” show=”percent”]

免责声明:

本文不代表路远网立场,且不构成投资建议,请谨慎对待。用户由此造成的损失由用户自行承担,与路远网没有任何关系;

路远网不对网站所发布内容的准确性,真实性等任何方面做任何形式的承诺和保障;

网站内所有涉及到的区块链(衍生)项目,路远网对项目的真实性,准确性等任何方面均不做任何形式的承诺和保障;

网站内所有涉及到的区块链(衍生)项目,路远网不对其构成任何投资建议,用户由此造成的损失由用户自行承担,与路远网没有任何关系;

路远区块链研究院声明:路远区块链研究院内容由路远网发布,部分来源于互联网和行业分析师投稿收录,内容为路远区块链研究院加盟专职分析师独立观点,不代表路远网立场。

本文是全系列中第5 / 284篇:行业技术

  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的电报
  • 这是我的电报扫一扫
  • weinxin
chatGPT账号
路远

发表评论

您必须登录才能发表评论!