【React】类组件，JSX语法，JSX原理，传递参数，条件渲染，列表渲染

news2024/12/24 21:33:10

❤️ Author： 老九
☕️ 个人博客：老九的CSDN博客
🙏 个人名言：不可控之事 乐观面对
😍 系列专栏：

文章目录

  • React
    • 使用组件（类组件）
    • JSX语法
      • 书写规范
      • JSX插入的内容
      • JSX属性绑定
      • JSX类绑定
    • JSX本质及原理
      • React事件绑定
    • 事件传递参数
    • 条件渲染
    • 列表渲染

React

  • 需要引入三个依赖包，React，React-dom，Babel
    在这里插入图片描述
  • 在React18之前，使用的是ReactDOM.render()来渲染页面，React18之后用createRoot之后再.render实现
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root"></div>
    <div id="app"></div>
    <script
      crossorigin
      src="https://unpkg.com/react@18/umd/react.development.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
    ></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script type="text/babel">
      //React18之前,React
      ReactDOM.render(<h2>Hello World</h2>, document.querySelector("#root"));
      //React18之后
      const app = ReactDOM.createRoot(document.querySelector("#app"));
      app.render(<h2>Hello React!</h2>);
    </script>
  </body>
</html>
  • 案例
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app"></div>
    <script
      crossorigin
      src="https://unpkg.com/react@18/umd/react.development.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
    ></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script type="text/babel">
      //React18之后
      const app = ReactDOM.createRoot(document.querySelector("#app"));
      let message = "hellow World";
      function btnClick() {
        message = "hellow react";
        rootRender();
      }
      rootRender();
      function rootRender() {
        app.render(
          <div>
            <h2>{message}</h2>
            <button onClick={btnClick}>修改文本</button>
          </div>
        );
      }
    </script>
  </body>
</html>

使用组件（类组件）

补充：
1.默认函数this绑定的是window，在严格模式下绑定的是undefined
2.为什么改变this绑定不能用call或者apply
在这里插入图片描述
3.super函数执行步骤
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app"></div>
    <script
      crossorigin
      src="https://unpkg.com/react@18/umd/react.development.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
    ></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script type="text/babel">
      //类名必须大写
      class App extends React.Component {
        constructor() {
          super();
          this.state = {
            message: "hello world",
            name: "why",
            age: 18,
          };
          //对需要绑定的方法，提前绑定好this也是可以的
          // this.btnClick = this.btnClick.bind(this);
        }

        btnClick() {
          //内部完成了两件事：1.讲state中的值修改掉2.自动重新执行render函数
          this.setState({
            message: "hello React",
          });
        }

        render() {
          return (
            <div>
              <h2>{this.state.message}</h2>
              <button onClick={this.btnClick.bind(this)}>修改文本</button>
            </div>
          );
        }
      }

      const app = ReactDOM.createRoot(document.querySelector("#app"));
      app.render(<App />);
    </script>
  </body>
</html>
  • 案例，JSX大括号里不能写对象，可以写数组
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root"></div>
    <script
      crossorigin
      src="https://unpkg.com/react@18/umd/react.development.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
    ></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script type="text/babel">
      class App extends React.Component {
        constructor() {
          super();
          this.state = {
            movies: ["1", "2", "3", "4", "5", "6", "7", "8", "9"],
          };
        }

        render() {
          return (
            <div>
              <h2>电影列表</h2>
              <ul>
                {this.state.movies.map((movie, index) => {
                  return <li key={index}> {movie}</li>;
                })}
              </ul>
            </div>
          );
        }
      }

      const root = ReactDOM.createRoot(document.querySelector("#root"));
      root.render(<App />);
    </script>
  </body>
</html>

JSX语法

在这里插入图片描述

  • 其实就是将html的代码写在了js上面，然后通过render函数进行渲染，它用于描述我们的UI界面，完成可以和js融合在一起使用

书写规范

  • 1.jsx只能有一个根元素
  • 2.JSX解构通常惠包裹一个()，将整个JSX当作一个整体，实现换行
  • 3.注释：在这里插入图片描述

JSX插入的内容

  • Number，String，Array类型是可以直接显示的
  • 如果是undefined，null，true类型在界面上显示为空，如果想显示的话，就转成字符串String(xxx)，或者加一个+“”
  • Object类型不能作为子元素显示
  • 可以插入表达式，例如firstName + " " + lastName
  • 可以插入三元运算符
  • 可以执行一个函数

JSX属性绑定

在这里插入图片描述

JSX类绑定

  • 如果是静态类，写成className
  • 如果是动态加载Class，有两种方式，一种是模板字符串，一种是数组
    在这里插入图片描述
  • 如果动态绑定样式，在JSX中写一个对象，注意只有在JSX中间插入内容的时候不能写成对象，但是作为属性是可以写成对象的，并且JS不支持-，所以需要写成驼峰式
    在这里插入图片描述

JSX本质及原理

  • List item

这段代码是经过babel转换的，每当遇到一个标签，都会转换成React.createElement(“div”,{classNamexxxx},[])，之后就会形成一个树结构，这个树结构就是虚拟DOM，实际上JSX就是React.createElement(component,props,…children)的函数的语法糖
最后创建出来了一个ReactElement对象，React利用ReactElement对象组成了一个JavaScript对象树，这个对象树就是虚拟DOM
在Vue中，有专门的源码用来解析template，然后解析完之后变成render函数，render函数中调用了大量的h函数，h函数调用完之后变成了一个一个的对象，对象于对象之间的联系，形成了虚拟DOM树，再变成真实DOM
在这里插入图片描述

React事件绑定

  • 三种方式，一种是写成变量等于 箭头函数，一种是bind绑定，一种是直接传入箭头函数
    在这里插入图片描述

  • 通过setState进行修改值的操作

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root"></div>
    <script
      crossorigin
      src="https://unpkg.com/react@18/umd/react.development.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
    ></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script type="text/babel">
      class App extends React.Component {
        constructor() {
          super();
          this.state = {
            message: "Hello, world!",
            counter: 100,
          };
          this.btn1Click = this.btn1Click.bind(this);
        }
        btn1Click() {
          this.setState({ counter: this.state.counter + 1 });
        }
        btn2Click = () => {
          this.setState({ counter: 1000 });
        };
        btn3Click() {
          this.setState({ counter: 9999 });
        }
        render() {
          const { message } = this.state;
          return (
            <div>
              <button onClick={this.btn1Click}>按钮1</button>
              <button onClick={this.btn2Click}>按钮2</button>
              <button
                onClick={() => {
                  this.btn3Click();
                }}
              >
                按钮3
              </button>
              <h2>{this.state.counter}</h2>
            </div>
          );
        }
      }
      const root = ReactDOM.createRoot(document.querySelector("#root"));
      root.render(<App />);
    </script>
  </body>
</html>

事件传递参数

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root"></div>
    <script
      crossorigin
      src="https://unpkg.com/react@18/umd/react.development.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
    ></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script type="text/babel">
      class App extends React.Component {
        constructor() {
          super();
          this.state = {
            message: "Hello, world!",
          };
        }
        btnClick(event, name, age) {
          console.log("btnClick", event, name, age);
        }
        render() {
          return (
            <div>
              <button
                onClick={(event) => {
                  this.btnClick(event, "kobe", 19);
                }}
              >
                按钮
              </button>
            </div>
          );
        }
      }
      const root = ReactDOM.createRoot(document.querySelector("#root"));
      root.render(<App />);
    </script>
  </body>
</html>

条件渲染

  • 通过变量if判断
    在这里插入图片描述

列表渲染

  • 展示列表最多的方式就是使用高阶函数map，需要绑定key
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root"></div>
    <script
      crossorigin
      src="https://unpkg.com/react@18/umd/react.development.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
    ></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script type="text/babel">
      class App extends React.Component {
        constructor() {
          super();
          this.state = {
            message: "学生列表数据",
            students: [
              { id: 111, name: "why", score: 199 },
              { id: 112, name: "kobe", score: 98 },
              { id: 113, name: "james", score: 199 },
              { id: 114, name: "curry", score: 188 },
            ],
          };
        }

        render() {
          const { message, students } = this.state;
          const filterStudents = students.filter((item) => {
            return item.score > 100;
          });
          const sliceStudents = filterStudents.slice(0, 2);
          return (
            <div>
              <h2>{message}</h2>
              <div className="list">
                {students
                  .filter((item) => item.score > 100)
                  .slice(0, 2)
                  .map((item) => {
                    return (
                      <div className="item" key={item.id}>
                        <h2>学号: {item.id}</h2>
                        <h3>姓名: {item.name}</h3>
                        <h1>分数: {item.score}</h1>
                      </div>
                    );
                  })}
              </div>
            </div>
          );
        }
      }
      const root = ReactDOM.createRoot(document.querySelector("#root"));
      root.render(<App />);
    </script>
  </body>
</html>

————————————————————————
♥♥♥码字不易，大家的支持就是我坚持下去的动力♥♥♥
版权声明：本文为CSDN博主「亚太地区百大最帅面孔第101名」的原创文章

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/612897.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

前端基础（CSS）——css介绍 常用样式 案例—进化到Bootstrap——进化到Element-UI（未完待续）

前端基础（CSS）——css介绍 常用样式 案例—进化到Bootstrap——进化到Element-UI（未完待续）

目录 引出CSS相关1.css写在哪里&#xff1f;2.css的选择器【重要】&#xff08;1&#xff09;标签选择器---div{}&#xff08;2&#xff09;id选择器----#div01{}&#xff08;3&#xff09;类选择器---class"div01"&#xff0c;.dav01{}&#xff08;4&#xff09;后代…
阅读更多...
saas产品私有化(一) 缓存中间件适配

saas产品私有化(一) 缓存中间件适配

一.背景 名词解释:私有化一般指的是在对客交付过程中,客户由于自身数据敏感,成本控制等原因要求交付乙方将售卖的服务利用现有甲方的硬件设备或者云服务进行服务的部署. 面向场景:一般特制的是saas化的云服务软件提供商的对特殊客群的场景.其中saas行业中比较起步和规模比较大的…
阅读更多...
流氓软件篡改微软EDGE浏览器主页面的那些伎俩

流氓软件篡改微软EDGE浏览器主页面的那些伎俩

微软的EDGE浏览器很好用&#xff0c;但也很容易被绑架&#xff0c;在网上下载各类免费软件&#xff0c;只要你安装完&#xff0c;十有八九就给你把主页改成某某导航了。尽管打开EDGE直接进入360、毒霸、好123等链接对上网影响也不大&#xff0c;打开这些导航页面后&#xff0c;…
阅读更多...
IMX6ULL裸机篇之I2C实验主控代码说明二

IMX6ULL裸机篇之I2C实验主控代码说明二

一. I2C实验 I2C实验内容&#xff1a; 学习如何使用 I.MX6U 的 I2C 接口来驱动 AP3216C&#xff0c;读取 AP3216C 的传感器数据。 I2C读写数据时序图&#xff1a; I2C写数据时序图如下&#xff1a; I2C读数据时序图如下&#xff1a; 二. I2C主控读写时序 1. 读数据与写数…
阅读更多...
MMDetection学习记录（二）之配置文件

MMDetection学习记录（二）之配置文件

文件结构 config文件 在 config_base_ 文件夹下有 4 个基本组件类型&#xff0c;分别是&#xff1a;数据集(dataset)&#xff0c;模型(model)&#xff0c;训练策略(schedule)和运行时的默认设置(default runtime)。 命名风格 {model}_[model setting]_{backbone}_{neck}_[no…
阅读更多...
微信小程序项目实例——密码管理器

微信小程序项目实例——密码管理器

今日推荐&#x1f481;‍♂️ 自疫情后武林广场的音乐喷泉再次开启⛲⛲⛲ 坐在最佳视角下观赏了一场久违的表演&#x1f386;&#x1f386;&#x1f386; &#x1f52e;&#x1f52e;&#x1f52e;&#x1f52e;&#x1f52e;往期优质项目实例&#x1f52e;&#x1f52e;&…
阅读更多...
在三台Linux虚拟机上完成构建集群的前置准备

在三台Linux虚拟机上完成构建集群的前置准备

前言 从现在开始进入到实操阶段&#xff0c;将要在VMware软件中创建多台Linux虚拟机&#xff0c;并进行系统设置。 需要同学们拥有前置知识&#xff1a; VMware的使用经验&#xff0c;知道什么是虚拟机并在VMware中创建过Linux虚拟机&#xff08;CentOS系统&#xff09; 熟…
阅读更多...
go语言学习——8

go语言学习——8

文章目录 文件操作打开文件文件读取写文件判读文件或文件夹是否存在拷贝文件统计文件字符命令行参数flag包解析命令行参数 文件操作 os.File封装所有文件相关操作&#xff0c;File是一个结构体 打开文件 package mainimport ("fmt""os" )func main() {file…
阅读更多...
重载运算符三个const的作用

重载运算符三个const的作用

const Point operator(const Point &point) const{ } 尝试去理解const,然后搞懂为什么这里放置const。 const 用于修饰其后面跟着的名字&#xff0c;使其为常量&#xff0c;不可被修改。 1.第一个const 的位置后面是函数返回值类型&#xff0c;表明函数返回的是常量&#…
阅读更多...
Yolov8涨点神器：创新卷积块NCB和创新Transformer 块NTB,助力检测，提升检测精度

Yolov8涨点神器：创新卷积块NCB和创新Transformer 块NTB,助力检测，提升检测精度

🏆🏆🏆🏆🏆🏆Yolov8魔术师🏆🏆🏆🏆🏆🏆 ✨✨✨魔改网络、复现前沿论文，组合优化创新 🚀🚀🚀小目标、遮挡物、难样本性能提升 🍉🍉🍉定期更新不同数据集涨点情况 本博客将具有部署友好机制的强大卷积块和变换块，即NCB和NTB，引入到yolo…
阅读更多...
spring源码的简单梳理之bean的初始化过程

spring源码的简单梳理之bean的初始化过程

我们都知道spring中最核心的就是容器的概念&#xff0c;而交于spring管理的对象称为bean对象。在spring中我们这次以xml配置bean的方式进行简单模拟spring创建bean的初始化过程。 1、首先我们先来一起研究一下一个xml文件中bean的结构。 我们可以看到一个bean是一个标签所扩住…
阅读更多...
【STM32CubeMX】WS2812彩灯

【STM32CubeMX】WS2812彩灯

前言 有时间我就按照网上的时序推理了WS2812的传输时序。之前就推过时序了&#xff0c;但是当时时序好像没对&#xff0c;因为没用逻辑分析仪查看&#xff0c;就以为通过电片机的运行主频&#xff0c;在控制NOP&#xff0c;就能得到us级的延时控制&#xff0c;但是真实的情况是…
阅读更多...
EBU6304 Software Engineering 知识点总结_5 项目管理_上

EBU6304 Software Engineering 知识点总结_5 项目管理_上

Software architecture 功能需求和软件架构关系紧密&#xff0c;非功能需求是软件架构的选择结果&#xff08;好的架构运行效率高之类的&#xff09;。可以以表格或图的形式&#xff0c;比如UML图。 设计难以更改。敏捷开发的早期阶段就是设计系统架构。 好处&#xff1a; …
阅读更多...
MMDet3D——数据增强Pipline‘GlobalRotScaleTrans‘和‘RandomFlip3D‘的Pytorch逆变换实现

MMDet3D——数据增强Pipline‘GlobalRotScaleTrans‘和‘RandomFlip3D‘的Pytorch逆变换实现

在点云的3D感知算法中&#xff0c;常用RandomFlip3D和GlobalRotScaleTrans的数据增强方式&#xff0c;这两个可以有效地增强模型的鲁棒性&#xff0c;提升模型的性能。 transforms[dict(typeRandomFlip3D,sync_2dFalse,flip_ratio_bev_horizontal0.5,flip_ratio_bev_vertical0.…
阅读更多...
Qt问题：Qt槽函数是否支持内联？

Qt问题：Qt槽函数是否支持内联？

Qt的信号和槽机制是基于Qt的元对象系统的&#xff0c;这个系统提供了一种在运行时获取对象信息的能力&#xff0c;如类名、信号和槽的数量和类型等。这个系统通过Qt的元对象编译器&#xff08;moc&#xff09;在编译时生成额外的代码来实现。 当一个信号被发射时&#xff0c;Q…
阅读更多...
独立站电商优选的客服工具

独立站电商优选的客服工具

遇到难题&#xff0c;寻找在线客服肯定是解决问题的首选途径了。但大多数独立站跨境电商网站的客服响应速度很难达到及时响应&#xff0c;一般普遍响应的时间从十几分钟到几小时、几十小时不等&#xff0c;甚至还有客服处于‘失联’状态。 去年黑五大促&#xff0c;Louella在某…
阅读更多...
SpringCloud Alibaba Nacos学习

SpringCloud Alibaba Nacos学习

SpringCloud Alibaba Nacos 文章目录 SpringCloud Alibaba Nacos1 Nacos 是什么&#xff1f;2 服务提供者 service-provider-nacos 配置3 服务消费者&#xff1a;server-consumer-nacos 配置 1 Nacos 是什么&#xff1f; 一句话: Nacos 就是注册中心[替代 Eureka]配置中心[替代…
阅读更多...
如何进行代码数据算法测试

如何进行代码数据算法测试

在此数据科学和机器学习教程中&#xff0c;获取有关如何从头到尾创建和运行分类模型的动手示例。本教程涵盖以下步骤&#xff1a; 数据探索数据预处理拆分数据以进行训练和测试准备分类模型使用管道组装所有步骤训练模型对模型运行预测评估和可视化模型性能 建立 本教程包括…
阅读更多...
解决 MacOS BigSur JD-GUI 打开失败的问题

解决 MacOS BigSur JD-GUI 打开失败的问题

前言JD-GUI是一款轻量级的 Java 反编译工具&#xff0c;对于一些没有源码的 Jar 包&#xff0c;直接拖进去就可以反编译源码&#xff0c;十分的方便。 在 MacOS 还是 Mojave 的时候&#xff0c;JD-GUI(下载地址)使用一切正常。 (apkTool下载地址 https://bitbucket.org/iBotP…
阅读更多...
c++学习——运算符重载

c++学习——运算符重载

运算符重载 **运算符重载的概念****加号运算符重载****减号运算符重载****左移运算符重载****右移运算符重载****赋值运算符重载****关系运算符重载****前置加加和后置加加** 运算符重载的概念 1.运算符重载&#xff0c;就是对已有的运算符重新进行定义&#xff0c;赋予其另一…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023