React-创建虚拟Dom四种方法

news/2024/7/24 9:29:39 标签: react.js, javascript, 前端

1.声明div

javascript">const Son1=<div>我言秋日胜春招</div>

2.声明函数

javascript">function Son() {

  return <div>自古逢秋多寂寥</div>;

}

3.createElement方法

说明:React.createElement: 这是 React 提供的用于创建元素的函数。它接受三个参数:元素的类型、元素的属性(在这里是 null,表示没有属性)、元素的子元素或文本内容。

javascript">const Son2 = React.createElement('h1', null, '儿童相见不相识');

4.Component方法

说明:React中,React.Component是一个基础的类,用于定义React组件的基本结构。它是React组件类的父类,其他的组件可以继承这个类来定义自己的组件。React.Component类提供了一些核心功能,包括状态管理、生命周期方法和事件处理等。通过继承React.Component,开发者可以利用React提供的强大功能来构建自己的组件。

javascript">class Son4 extends React.Component{
  constructor(props){
     super(props)
     this.state={
      name:'名字'
     }
  }
  render(){
    return <div>笑问{this.state.name}与谁同行</div>
  }
}

5.源码

javascript">import React from "react";

function Son() {
  return <div>自古逢秋多寂寥</div>;
}
const Son1=<div>我言秋日胜春招</div>

const Son2=React.createElement('h1',null,'儿童相见不相识')

class Son4 extends React.Component{
  constructor(props){
     super(props)
     this.state={
      name:'名字'
     }
  }
  render(){
    return <div>笑问{this.state.name}与谁同行</div>
  }
}

function App() {

  return (
    <div>
      <Son></Son>
       {Son1}
       {Son2}
       <Son4></Son4>
    </div>
  );
}

export default App;


http://www.niftyadmin.cn/n/5443806.html

相关文章

STM32最小核心板使用HAL库ADC读取MCU温度(使用DMA通道)

STM32自带CPU的温度数据&#xff0c;需要使用ADC去读取。因此在MX创建项目时如图配置&#xff1a; 模块初始化代码如下&#xff1a; void MX_ADC1_Init(void) {/* USER CODE BEGIN ADC1_Init 0 *//* USER CODE END ADC1_Init 0 */ADC_ChannelConfTypeDef sConfig {0};/* USER…

官宣|阿里巴巴捐赠的 Flink CDC 项目正式加入 Apache 基金会

摘要&#xff1a;本文整理自阿里云开源大数据平台徐榜江 (雪尽)&#xff0c;关于阿里巴巴捐赠的 Flink CDC 项目正式加入 Apache 基金会&#xff0c;内容主要分为以下四部分&#xff1a; 1、Flink CDC 新仓库&#xff0c;新流程 2、Flink CDC 新定位&#xff0c;新玩法 3、Flin…

久菜盒子|留学|推荐信|专业课老师|人工智能

留学毕业设计就找久菜盒子 我很高兴为 19 同学写下这封推荐信。该生学习的热忱以及较好的领悟能力、学习的积极进取都让我印象深刻,因此,我很支持他申请贵校,并相信他进入贵校能够发挥他更大的潜力。 他是一名优秀的学生。人工智能导论是计算机科学的重要基础课,也是人工智能学…

华为校招机试 - 循环依赖(20240320)

题目描述 给定一组元素,及其依赖关系,一个元素可以依赖于多个元素(不包括自己,被依赖元素不会重复),一个元素也可被多个元素依赖。 假定总是存在唯一的循环依赖,请输出该循环依赖。 输入描述 第一行是个正整数 N (1 < N < 100),表示依赖关系的个数。 下面每…

稀碎从零算法笔记Day24-LeetCode:存在重复元素

前言&#xff1a;本打算练习下机写快排&#xff0c;但是快排超时了(为什么sort没超时啊。。) 题型&#xff1a;排序、哈希表 链接&#xff1a;存在重复元素 - 提交记录 - 力扣&#xff08;LeetCode&#xff09; 来源&#xff1a;LeetCode 题目描述 题目样例 题目思路 C代…

Docker 笔记(七)--打包软件生成镜像

目录 1. 背景2. 参考3. 文档3.1 使用docker container commit命令构建镜像3.1.1 [Docker官方文档-docker container commit](https://docs.docker.com/reference/cli/docker/container/commit/)Description&#xff08;概述&#xff09;Options&#xff08;选项&#xff09;Exa…

灵境矩阵:开启无代码写作新时代,AI智能平台引领创作潮流

灵境矩阵 “灵境杯”智能体创意大赛&#xff0c;瓜分百万超级奖励 在当今数字化快速发展的时代&#xff0c;人工智能&#xff08;AI&#xff09;技术正逐渐渗透到我们生活的方方面面。从智能家居到自动驾驶&#xff0c;AI的应用领域不断扩大&#xff0c;而今天&#xff0c;我们…

第六章 Java 正则表达式

正则表达式定义了字符串的模式。 正则表达式可以用来搜索、编辑或处理文本。 正则表达式并不仅限于某一种语言&#xff0c;但是在每种语言中有细微的差别。 一、 正则表达式实例 一个字符串其实就是一个简单的正则表达式&#xff0c;例如 Hello World 正则表达式匹配 "…