React基础知识

说明:react版本为 18.3.1

React是什么

React由Meta公司研发,是一个用于构建Web和原生交互界面的库。(开发基于浏览器的web应用和基于mac和android的移动应用)

React的优势

1.相较于传统基于DOM开发的优势:组件化的开发方式、不错的性能。
2.相较于其他前端框架的优势:丰富的生态、跨平台支持。

开发环境搭建: 使用create-react-app快速搭建开发环境

create-react-app是一个快速创建React开发环境的工具,底层由Webpack构建,封装了配置细节,开箱即用。
执行命令:`npx create-react-app react-basic`
1. npx: Node.js工具命令,查找并执行后续的包命令
2. create-react-app 核心包(固定写法),用于创建React项目
3. react-basic React项目的名称(可以自定义)

其他创建方式:https://zh-hans.react.dev/learn/start-a-new-react-project

JSX

什么是JSX

概念:JSX是JavaScript和XML(HTML)的缩写,表示在js代码中编写HTML模板结构,它是React中编写UI模板的方式。
优势:1.HTML的声明式模板写法2.JS的可编程能力

JSX的本质

JSX并不是标准的JS语法,他是JS的语法扩展,浏览器本身不能识别,需要通过`解析工具`做解析后才能在浏览器中运行。

JSX中使用JS表达式

在JSX中可以通过大括号语法`{}`识别JavaScript中的表达式,比如常见的变量、函数调用、方法调用等。
1. 使用引号传递字符串
2. 使用JavaScript变量
3. 函数调用和方法调用
4. 使用JavaScript对象
const name = 'macy'function getName () {return name;
}function App() {return (<div>hello react{/*使用引号传递字符串*/}{'======'}{/*识别js变量*/}{name}{/*函数调用*/}{getName()}{/*方法调用*/}{new Date().getFullYear()}{/*使用js对象*/}<div style={{color: 'red'}}>看看</div></div>);
}

JSX实现列表渲染

const list = [{id: 1, name: '张三', age: 32},{id: 2, name: '李四', age: 30},{id: 3, name: '王五', age: 28},
]function App() {return (<div>{/*列表渲染*/}<ul>{list.map(item => <li key={item.id}>{item.name}</li>)}</ul></div>);
}

JSX实现条件渲染

语法:在React中,可以通过`逻辑与运算符&&`、`三元表达式(?:)`实现基础的条件渲染。
1. `逻辑与运算符&&`:{flag && <span>xxx</span>}
2. `三元表达式(?:)`:{flag ? <span>xxx</span> : <div>yyy</div>}
const loading = true;function App() {return (<div>{/* 条件渲染*/}{loading && <span>加载中</span>}{loading ? <span>加载中</span> : <span>加载成功!</span>}</div>);
}

JSX实现复杂的条件渲染

多if语句
const type = 1; // 类型 0, 1 ,2function getTempByType(type){if(type === 0){return <div>天气:晴🌤</div>}else if(type === 1){return <div>天气:雨🌧</div>}else if(type === 2){return <div>天气:雪🌨</div>}
}function App() {return (<div>{/* 复杂的条件渲染*/}{getTempByType(type)}</div>);
}

React中的事件绑定

语法:on + 事件名称 = {事件处理程序},整体上遵循驼峰命名法,如onClick、onMouseOver。
function App() {const change = () =>{console.log('---点击按钮' )}return (<div><button onClick={change}>按钮</button></div>);
}
1.使用事件对象参数,语法:在事件回调函数中设置形参e
function App() {const change = (e) =>{console.log('---点击按钮',e )}return (<div><button onClick={change}>按钮</button></div>);
}
2.传递自定义参数,语法:事件绑定的位置改造成箭头函数的写法,在执行实际处理业务函数的时候传递实参(注意:不能直接写成函数调用,这里事件绑定需要一个函数引用)
function App() {const change = (name) => {console.log('---传递的参数:',name)}return (<div><button onClick={() => change('macy')}>按钮</button></div>);
}
3.同时传递事件对象和自定义参数,语法:在事件绑定的位置传递实参e和自定义参数,在处理函数中声明形参,注意顺序对应
function App() {const change = (name,e) => {console.log('---传递的参数:',name,e)}return (<div><button onClick={(e) => change('macy',e)}>按钮</button></div>);
}

React组件

组件是什么(组件化开发可以让开发者像搭积木一样构建一个完整的庞大的应用)
概念:一个组件就是用户界面的一部分,它可以有自己的逻辑和外观,组件之间可以互相嵌套,也可以复用多次
在react中,一个组件就是首字母大写的函数,内部存放了组件的逻辑和视图UI,渲染组件只需要把组件当成标签书写即可
//1.定义组件
// function MyComponent() {
//     return <div>这是自定义组件内容</div>
// }
// 或者箭头函数方式
const MyComponent = () => {return <div>这是自定义组件内容</div>
}
function App() {return (<div>{/* 2.使用组件/渲染组件*/}{/*自闭和*/}<MyComponent />{/*    成对标签*/}<MyComponent></MyComponent></div>);
}

useState

useState基础使用

useState是一个React Hook(函数),它允许我们向组件添加一个状态变量,从而控制影响组件的渲染结果
本质:和普通JS变量不同的是,状态变量一旦发生变化,组件的视图UI也会跟着变化(数据驱动视图)
语法:const [状态变量, 设置状态的函数] = useState(初始值)
例如:cosnt [count, setCount] = useState(0);1.useState是一个函数,返回值是一个数组2.数组中第一个参数是状态变量,第二个参数是set函数用来修改状态变量3.useState的参数将作为初始值
// useState实现一个计数器按钮
import { useState } from "react";
function App() {// 1.调用useState添加一个状态变量// count: 状态变量// setCount: 更新状态变量的函数const [count, setCount] = useState(0);// 2.点击事件回调const handleClick = () => {// 作用:1.用传入的新值修改count 2.重新使用新的count值渲染UIsetCount(count + 1);}return (<div><button onClick={handleClick}>{count}</button></div>);
}

修改状态的规则

状态不可变:在react中,状态被认为是只读的,我们应该始终替换它而不是修改它,直接修改状态不能引发视图更新
const handleClick = () => {// 1.不能触发视图更新// count ++// 2.可以触发视图更新setCount(count + 1);
}
修改对象状态
规则:对于对象类型的状态变量,应该始终传给set方法一个全新的对象来进行修改
import { useState } from "react";
function App() {// 1.调用useState添加一个状态变量const [user, setUser] = useState({name: 'macy', gender: '男'});// 2.点击事件回调const handleClick = (gender) => {// 1.错误写法// user.gender = gender// 2.正确写法setUser({...user,gender,})}return (<div><div>{user.name} --- {user.gender}</div><button onClick={() => handleClick('女')}>点击</button></div>);
}

组件的样式处理

组件基础样式方式

react组件基础的样式控制有两种方式:1.行内样式(不推荐)  2. css类名控制
/*index.css文件内容:*/
.my-style{color: green;font-size: 50px;
}
.new-style{color: pink;
}
.foo{font-weight: bold;
}
//导入样式
import './index.css'const style = {color: 'blue',fontSize: '28px'
}
const flag = true
function App() {return (<div>{/* 行内样式控制 */}<div style={{color: 'red',fontSize: '18px'}}>hello react</div><div style={style}>hello react!!!</div>{/* 通过class类名控制*/}<div className="my-style">hello world</div>{/* 通过条件控制类名*/}<div className={`my-style ${flag && 'new-style'}`}>hello world</div></div>);
}

引入classnames库

地址:https://github.com/JedWatson/classnames
代码片段:

    {/*引入classnames库*/}<div className={classNames('my-style', {'new-style':flag, 'foo': flag})}>hello world</div>

受控表单绑定

概念:使用React组件的状态(useState)控制表单的状态React(state) <====> <input/> (value)    1.state绑定到input的value属性2.把input最新的value值设置给state
  1. 准备一个react状态值
    const [value, setValue] = useState('')
  2. 通过value属性绑定状态,通过onChange属性绑定状态同步的函数
<input type="text" value={value} onChange={(e) => setValue(e.target.value)}/>

demo:

import {useState} from "react";function App() {// 通过value属性绑定react状态const [value, setValue] = useState('');return (<div><p> 状态值:{value}</p>{/*绑定onChange事件,通过参数e拿到输入框最新的值,反向修改到react状态*/}<input type="text" value={value} onChange={(e) => setValue(e.target.value)}/></div>);
}

React中获取DOM

在React组件中获取/操作DOM,需要使用useRef钩子函数,分为两步:

  1. 使用useRef创建ref对象,并于jsx绑定
    const inputRef = useRef(null)
  2. 在DOM可用时,通过inputRef.current拿到DOM对象
    console.log(inputRef.current)
import {useRef} from "react";function App() {// useRef生成ref对象,并绑定到dom标签上const inputRef = useRef(null)// dom可用时,ref.current获取dom// 渲染完毕之后dom生成之后才可用const handleClick = () => {console.dir(inputRef.current)}return (<div><input type="text" ref={inputRef}/><button onClick={handleClick}>点击</button></div>);
}

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【物流配送中心选址问题】基于退火算法混合粒子群算法

课题名称&#xff1a; 基于退火算法混合粒子群算法的物流配送中心选址问题 改进方向&#xff1a;模拟退火算法优化粒子群算法 代码获取方式&#xff08;付费&#xff09;&#xff1a; 模型说明&#xff1a; 待补充 Matlab仿真结果&#xff1a; 1. 模型优化后的仿真结果 2…

Java入门:11.抽象类,接口,instanceof,类关系,克隆

1 JDK中的包 JDK JRE 开发工具集&#xff08;javac.exe&#xff09; JRE JVM java类库 JVM java 虚拟机 jdk中自带了许多的包&#xff08;类&#xff09; &#xff0c; 常用的有 java.lang 该包中的类&#xff0c;不需要引用&#xff0c;可以直接使用。 例如&#xff1…

Flash Attention:高效注意力机制的突破

近年来&#xff0c;注意力机制(Attention)已成为自然语言处理和深度学习领域的重要工具。然而&#xff0c;传统的注意力实现在处理长序列时存在计算和内存效率低下的问题。为了解决这一挑战&#xff0c;研究者们提出了Flash Attention&#xff0c;一种快速、内存高效的注意力算…

人类与人工智能的和谐关系

人类与人工智能的和谐关系 打不过就加入吧,人类在人工智能为基础的智能机器面前 毫无优势可言,这方面的介绍 见我之前的文章《智能机器是世界上的新物种》 第一、人不要想着与机器对抗 人不要想着与机器竞争&#xff0c;或者是比赛&#xff0c;哪怕规则都是人类定的&#xf…

vscode中安装python的包

首先需要调出命令行。然后运行代码&#xff0c;找到你所需要的环境。 PS C:\Users\Administrator\AppData\Local\ESRI\conda\envs\arcgispro-env> conda env list # conda environments: #C:\ProgramData\Anaconda3 base * C:\Users\Administrator\.con…

搭子小程序:全新在线找搭子,满足社交

搭子作为一种新的社交方式&#xff0c;为大众带来的各种陪伴型的社交模式&#xff0c;不管是饭搭子、健身、遛狗、学习等&#xff0c;都可以找到适合自己的搭子。搭子主打各个领域的陪伴&#xff0c;双方都能够在社交相处中保持着边界感&#xff0c;不涉及情感纠葛等&#xff0…

vue 入门二

参考&#xff1a;丁丁的哔哩哔哩 11.组件基础 传递 props 父组件 <BlogPost title"My journey with Vue" />子组件 <script setup> defineProps([title]) </script><template><h4>{{ title }}</h4> </template>props第…

ORACLE 19C创建多个不同字符集PDB

现在需要在一个测试环境创建1个为AL32UTF8的PDB,2个ZHS16GBK的PDB 这种情况下,必须先创建的CDB为AL32UTF8,下面是具体步骤: 1.AL32UTF8的pdb在建实例的时候一起创建完成 2.创建第一个ZHS16GBK的PDB cdr,通过pdbseed来克隆: SQL> create pluggable database cdr admin us…

python入门教程

Python 是一种非常流行的编程语言&#xff0c;因其简单易学的语法和广泛的应用领域&#xff08;如数据分析、人工智能、Web 开发等&#xff09;而备受欢迎。以下是一个入门级 Python 教程&#xff0c;适合初学者快速掌握 Python 的基础知识。 1. 安装 Python 你可以从 Python…

【论文翻译】HTVGNN:一种用于交通流量预测的混合时间变化图神经网络

题目A Novel Hybrid Time-Varying Graph Neural Network For Traffic Flow Forecasting论文链接https://arxiv.org/pdf/2401.10155v4关键词交通流预测&#xff0c;图神经网络&#xff0c;Transformer&#xff0c;多头自注意力 摘要 实时且精确的交通流量预测对于智能交通系统的…

bpmn-js 元素与布局渲染

BPMN-JS 是基于 BPMN 2.0来定义元素关联关系,并通过Diagram-js库来实现web可视化的显示和编辑工作。Diagram-js 也是由BPMN.IO组织开发的一个专门用于业务流程建模符号(BPMN)的可视化开源 JavaScript 库。 元素(Elements) BPMN 2.0(Business Process Model and Notation…

大数据-158 Apache Kylin 安装配置详解 集群模式启动

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; 目前已经更新到了&#xff1a; Hadoop&#xff08;已更完&#xff09;HDFS&#xff08;已更完&#xff09;MapReduce&#xff08;已更完&am…

Windows环境mysql 9安装mysqld install报错:Install/Remove of the Service Denied!

Windows环境mysql 9安装mysqld install报错&#xff1a;Install/Remove of the Service Denied! 解决方案&#xff1a; 控制台/批处理命令窗口需要以系统管理员身份运行。 mysql数据库环境配置和安装启动&#xff0c;Windows-CSDN博客文章浏览阅读920次。先下载mysql的zip压缩…

一台电脑轻松接入CANFD总线-来可CAN板卡介绍

在工业控制领域&#xff0c;常常使用的总线技术有CAN(FD)、RS-232、RS-485、Modbus、Profibus、Profinet、EtherCAT等。RS-485以其长距离通信能力著称&#xff0c;Modbus广泛应用于PLC等设备&#xff0c;EtherCAT则以其低延迟和高实时性在自动化系统中备受青睐。 其中&#xf…

MySQL9的3个新特性

【图书推荐】《MySQL 9从入门到性能优化&#xff08;视频教学版&#xff09;》-CSDN博客 《MySQL 9从入门到性能优化&#xff08;视频教学版&#xff09;&#xff08;数据库技术丛书&#xff09;》(王英英)【摘要 书评 试读】- 京东图书 (jd.com) 本文讲解MySQL9的3个新特性&…

Taro 中 echarts 图表使用

1 下载 echarts4taro3 yarn add echarts4taro3 或 pnpm add echarts4taro3 或 npm i echarts4taro3 --save2 图表初始化需要先加载echarts模块 import * as echarts from "echarts4taro3/lib/assets/echarts"; // 这里用了内置的&#xff0c;也可以用自定义的 echa…

【ICPC】The 2021 ICPC Asia Shanghai Regional Programming Contest G

Edge Groups #树形结构 #组合数学 #树形dp 题目描述 Given an undirected connected graph of n n n vertices and n − 1 n-1 n−1 edges, where n n n is guaranteed to be odd. You want to divide all the n − 1 n-1 n−1 edges to n − 1 2 \frac{n-1}{2} 2n−1​…

linux 中快速卸载 MySQL

在 Linux 上完全卸载 MySQL 并重新安装通常涉及几个步骤。这里是一个通用的步骤指南&#xff0c;但请注意&#xff0c;具体的命令可能会根据你的 Linux 发行版和你的具体安装方式有所不同。 完全卸载 MySQL 1.停止 MySQL 服务&#xff1a; systemctl stop mysqld在这之前先进…

最全方案解决Android Studio中使用lombok插件错误: 找不到符号的问题

直接原因 先直接说原因&#xff0c;小部分是因为配置错误导致的&#xff0c;注意查看下面的步骤即可&#xff0c;另一大部分是因为Java和Kotlin混编的问题&#xff0c;lombok和kapt冲突&#xff0c;其实你用了kotlin基本不需要用lombok&#xff0c;多此一举&#xff01;所以可…

SpringBoot实现电子文件签字+合同系统!

一、前言 二、项目源码及部署 1、项目结构及使用框架 2、项目下载及部署 三、功能展示 一、前言 今天公司领导提出一个功能,说实现一个文件的签字+盖章功能,然后自己进行了简单的学习,对文档进行数字签名与签署纸质文档的原因大致相同,数字签名通过使用计算机加密来验证 (…