react的基础使用

react中为什么使用jsx


React 认为渲染逻辑本质上与其他 UI 逻辑内在耦合,比如,在 UI 中需要绑定处理事件、在某些时刻状态发生变化时需要通知到 UI,以及需要在 UI 中展示准备好的数据。

react认为将业务代码和数据以及事件等等 需要和UI高度耦合。所以采用了jsx。

什么是jsx


jsx是javascript的语法扩展,类似模板写法格式(类似模板引擎)

JSX是一种JavaScript的语法扩展,首先运用于React中,其格式比较像是模版语言

特点:

React认为渲染逻辑本质上与其他UI逻辑内在耦合,比如,在UI中需要绑定处理事件、在某些时刻状态发生变化时需要通知到UI,以及需要在UI中展示准备好的数据。 [4]

JSX可以使用引号来定义以字符串为值的属性:

const element =

;

也可以使用大括号来定义以JavaScript表达式为值的属性:

const element =

;

因为JSX的特性更接近JavaScript而不是HTML,所以React DOM使用camelCase(小驼峰)命名来定义属性的名称,而不是使用HTML的属性名称。例如:class变成了className,而tableindex则对应着tableIndex

需要注意:  js+html 混合写法
属性命名:小驼峰
属性绑值:{}  直接赋值 ""
元素内容中写js代码:
<div>
{
   //代码
}
</div>
react组件中jsx写法格式:
function App() {
  let name = "小花";
  let cname = "active";
  return (
    <div className="App">
      测试
      <div className={cname}>{name}</div>
    </div>
  );
}

jsx可以防止注入攻击:

function App() {
  let name = "小花";
  let cname = "active";
  //注入脚本
  let str="<input src='www.***.com'/>";
  return (
    <div className="App">
      测试
      <div className={cname}>{name}</div>
      <div>{str}</div>
    </div>
  );
}

react中组件


  1. 函数组件

  1. 类组件

组件的书写格式遵循es5  es6

函数组件:

function App() {
  //必带返回
  return <div className="App">测试</div>;
}


let App = () => {
  return <div className="App">测试</div>;
};
在mainjs文件中引入app组件

该函数被执行 ,获取到的是编译之后的jsxDEV(‘div’,{className:’’})格式。

jsxDEV('div',{ className: "active" })
let ele=React.createElement("div", { className: "active" });
console.log(ele);

类组件写法:

import React from "react";
console.log(React.Component);
//es6 class  继承  react component class类
class App extends React.Component {
  constructor(props) {
    super(props);//执行父类的构造
  }
  //渲染函数
  render() {
    return <div>测试</div>;
  }
}

export default App;
export default App;

函数组件和类组件的使用场景


函数组件主要用于UI界面的渲染   react  16.8以前
16.8版本之后react  hooks API  函数可以写业务逻辑了。
类组件主要做复杂的业务逻辑的。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

竞赛无人机搭积木式编程——以2022年TI电赛送货无人机一等奖复现为例学习(7月B题)

在学习本教程前&#xff0c;请确保已经学习了前4讲中无人机相关坐标系知识、基础飞行控制函数、激光雷达SLAM定位条件下的室内定点控制、自动飞行支持函数、导航控制函数等入门阶段的先导教程。 同时用户在做二次开发自定义的飞行任务时&#xff0c;可以参照第5讲中2021年国赛植…

【uniapp小程序实战】—— 使用腾讯地图获取定位

文章目录&#x1f34d;前言&#x1f34b;正文1、首先看官网uni.getLocation(OBJECT)#注意2、腾讯位置服务平台申请密钥和下载SDK2.1 申请开发者秘钥2.2 开通webserviceAPI服务2.3 下载微信小程序JavaScriptSDK2.4 安全域名设置3、配置manifest.json文件4、示例代码展示4.1 引用…

面试重难点问题(C++)

持续更新&#xff01;&#xff01;&#xff01;&#xff01;&#xff01; 网络部分 1.问&#xff0c;四次挥手的过程&#xff0c;和双方状态变化&#xff1f; 挥手这前&#xff0c;两边都是established状态&#xff0c;客户端发起断开请求&#xff0c;向服务器发送fin请求&…

Docker6种网络配置详解,网络模式应该这么选

文章目录一、Bridge网络模式二、Host网络模式三、Overlay网络模式四、None网络模式五、Macvlan网络模式六、Ipvlan网络模式七、网络模式选择在Docker中&#xff0c;网络配置是一个重要的主题&#xff0c;因为容器需要与其他容器或外部网络进行通信。Docker提供了多种网络模式和…

注意下C语言整形提升

C语言整形提升 C语言整形提升是指在表达式中使用多种类型的数据时&#xff0c;编译器会自动将较小的类型转换为较大的类型&#xff0c;以便进行运算。在C语言中&#xff0c;整型提升规则如下&#xff1a; 如果表达式中存在short类型&#xff0c;则将其自动转换为int类型。 如…

【JavaEE】初识线程

一、简述进程认识线程之前我们应该去学习一下“进程" 的概念&#xff0c;我们可以把一个运行起来的程序称之为进程&#xff0c;进程的调度&#xff0c;进程的管理是由我们的操作系统来管理的&#xff0c;创建一个进程&#xff0c;操作系统会为每一个进程创建一个 PCB&…

C++之深浅拷贝

一、浅拷贝 我们看下以下代码 Test.h 文件 #pragma once #include<iostream> using namespace std; class Student { public:Student(){}~Student(){if (m_Id ! nullptr){delete m_Id;m_Id nullptr;}}Student(int id, string strName){m_Id new int[id];m_strName s…

字符函数和字符串函数(上)-C语言详解

CSDN的各位友友们你们好,今天千泽为大家带来的是C语言中字符函数和字符串函数的详解,掌握了这些内容能够让我们更加灵活的运用字符串,接下来让我们一起走进今天的内容吧!写这篇文章需要在cplusplus.com上大量截图,十分不易!如果对您有帮助的话希望能够得到您的支持和帮助,我会持…

信号处理-小波变换4-DWT离散小波变换概念及离散小波变换实现滤波

连续小波变换的适用场景&#xff1a;能够获取某一段信号的瞬时信息、时频信息 缺点&#xff1a;计算量大&#xff0c;无法进行数据压缩- 针对连续小波存在的缺点提出离散小波变换 离散小波变换 离散小波变换 分解过程&#xff1a;&#xff08;离散2进正交&#xff09; cD1: …

数据结构与算法——栈和队列<也不过如此>

&#x1f3c6;作者主页&#xff1a;king&南星 &#x1f384;专栏链接&#xff1a;数据结构 &#x1f3c5;文章目录一、&#x1f947;栈1、&#x1f948;概念理解2、&#x1f948;链表头插头删实现栈1、&#x1f949;预备准备2、&#x1f949;创建结点函数3、&#x1f949;遍…

SPI读写SD卡速度有多快?

SD卡是一个嵌入式中非常常用的外设&#xff0c;可以用于存储一些大容量的数据。但用单片机读写SD卡速度一般都有限&#xff08;对于高速SD卡&#xff0c;主要是受限于单片机本身的接口速度&#xff09;&#xff0c;在高速、实时数据存储时可能会有影响。但具体速度可以达到多少…

vue2+高德地图web端开发使用

创建vue2项目我们创建一个vue2项目&#xff0c;创建vue2项目就不用再多说了吧&#xff0c;使用“vue create 项目名 ”创建即可注册高德地图高德地图官网地址&#xff1a;https://lbs.amap.com/如果是第一次使用&#xff0c;点击注册然后进入我们的控制台注册完之后进入控制台&…

<Linux>计算机体系结构和操作系统

计算机体系结构(冯 • 诺依曼体系)和操作系统&#xff08;Operator System&#xff09; 文章目录计算机体系结构(冯 • 诺依曼体系)和操作系统&#xff08;Operator System&#xff09;一、冯 • 诺依曼体系结构1.存储器&#xff08;内存&#xff09;2.运算器和控制器&#xff…

系统重装漏洞

zzcms系统重装漏洞 一、配置zzcms环境 1. 使用小皮搭建zzcms框架 2. 安装zzcms 按照下面的操作进行,傻瓜式操作即可 3. 打开网站 二、漏洞利用 在访问install目录的默认文件后,会出现zzcms安装向导 http://www.zzcms.com/install/index.php 但是会显示 “安装向导…

HTTPS,SSL(对称加密和非对称加密详解)

上一篇博客&#xff08;HTTP详解_徐憨憨&#xff01;的博客-CSDN博客&#xff09;详细讲解了关于HTTP的知识&#xff0c;了解到HTTP协议下的数据传输是一种明文传输&#xff0c;既然是明文传输&#xff0c;可能导致在传输过程中出现一些被篡改的情况&#xff0c;此时就需要对所…

MATLAB | 给热图整点花哨操作(三角,树状图,分组图)

前段时间写的特殊热图绘制函数迎来大更新&#xff0c;基础使用教程可以看看这一篇&#xff1a; https://slandarer.blog.csdn.net/article/details/129292679 原本的绘图代码几乎完全不变&#xff0c;主要是增添了很多新的功能&#xff01;&#xff01;&#xff01; 工具函数完…

【链表OJ题(六)】链表分割

​ ​&#x1f4dd;个人主页&#xff1a;Sherry的成长之路 &#x1f3e0;学习社区&#xff1a;Sherry的成长之路&#xff08;个人社区&#xff09; &#x1f4d6;专栏链接&#xff1a;数据结构 &#x1f3af;长路漫漫浩浩&#xff0c;万事皆有期待 文章目录链表OJ题(六)1. 链表…

燕山大学-面向对象程序设计实验-实验三 类和对象—构造函数与析构函数-实验报告

CSDN的各位友友们你们好,今天千泽为大家带来的是燕山大学-面向对象程序设计实验-实验三 类和对象—构造函数与析构函数,接下来让我们一起进入c的神奇小世界吧,相信看完你也能写出自己的 实验报告!如果对您有帮助的话希望能够得到您的支持和帮助,我会持续更新的!&#x1f680;3.…

硬刚ChatGPT!文心一言能否为百度止颓?

引言&#xff1a;近年来&#xff0c;人工智能领域的发展突飞猛进&#xff0c;尤其是在自然语言处理&#xff08;NLP&#xff09;方面。OpenAI的ChatGPT无疑是这个领域的佼佼者[1]。那么&#xff0c;面对这样一款高度智能的AI模型&#xff0c;国内市场上是否有相应的产品能与之抗…

你是真的“C”——指针进阶知识分享【上篇】

你是真的“C”——指针进阶知识分享【上篇】&#x1f60e;前言&#x1f64c;指针初阶必备小知识~&#x1f60a;一. 字符指针&#x1f60a;二. 指针数组&#x1f60a;三、数组指针&#x1f60a;数组指针的定义&#x1f618;四、 &数组名VS数组名&#x1f60a;总结撒花&#…
最新文章