首页 > 其他分享 >React基础-上

React基础-上

时间:2024-02-21 11:13:20浏览次数:29  
标签:const App 基础 React export 组件 return

React

目录

JSX

概念

JSX 是 JavaScript 和 XML(HTML)的缩写,表示在 JS 代码中编写 HTML 模版结构,它是 React 中构建 UI 的方式。

优势:

  1. HTML 的声明式模版写法
  2. JavaScript 的可编程能力

本质

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

image.png.


JSX 场景 — JS 表达式

在 JSX 中可以通过 大括号语法{} 识别 JavaScript 中的表达式,比如常量(字符串、数字、布尔值)、变量、函数调用、方法调用等。

  1. 使用引号传递字符串
  2. 使用 JS 变量
  3. 函数调用和方法调用
  4. 使用 JavaScript对象

⚠️ 注意:if 语句、switch 语句、变量声明不属于表达式,不能出现在 {}

const App = () => {
	const message = '识别 JavaScript 变量'
	const fn = () => {
		return '函数调用'
	}
    
	return (
		<div>
			App Component
			{/* 字符串识别 */}
			{'使用引号传递字符串'}
			{/* 变量识别 */}
			{message}
			{/* 函数调用 */}
			{fn()}
			{/* 方法调用 */}
			{new Date().getFullYear()}
			{/* 对象识别 */}
			<div style={{color: "red"}}>使用 JavaScript 对象</div>
		</div>
	)
}

export default App

JSX 场景 — 列表渲染

在 JSX 中可以使用原生 js 中的 map方法 实现列表渲染

const App = () => {
	const list = [
		{id: 1001, name: 'Vue'},
		{id: 1002, name: 'React'},
		{id: 1003, name: 'Angular'}
	]
    
	return (
		<div>
			<ol>
				{list.map(item => <li key={item.id}>{item.name}</li>)}
			</ol>
		</div>
	)
}

export default App

image-20240220170707230.


JSX 场景 — 条件渲染

在 React 中,可以通过逻辑与运算符 &&、三元表达式( ?: ) 实现基础的条件渲染

const App = () => {
	const show = true
	const flag = true
    
	return (
		<div>
			{show && <div>逻辑与运算符 &&</div>}
			{flag ? '三元运算符:true' : '三元运算符:false'}
		</div>
	)
}

export default App

image-20240220174030573.


JSX 场景 — 复杂条件渲染

自定义函数 + 判断语句

const App = () => {
	const type = 'else if'
    
	const getType = () => {
		if (type === 'if') {
			return 'if'
		} else if (type === 'else if') {
			return 'else if'
		} else {
			return 'else'
		}
	}
    
	return (
		<div>
			{getType()}
		</div>
	)
}

export default App



React 事件绑定

基础实现

React 中的事件绑定,通过语法 on + 事件名称 = { 事件处理程序 },整体上遵循小驼峰命名法。

const App = () => {
	const handleClick = () => {
		console.log('按钮被点击了...')
	}

	return (
		<div>
			<button onClick={handleClick}>点击</button>
		</div>
	)
}

export default App

使用事件参数(event)

在事件回调函数中设置形参 e 即可

const App = () => {
	const handleClick = (e) => {
		console.log('按钮被点击了...', e)
	}

	return (
		<div>
			<button onClick={handleClick}>点击</button>
		</div>
	)
}

export default App

传递自定义参数

语法:①、事件绑定的位置改造成箭头函数的写法,②、在执行 clickHandler 实际处理业务函数的时候传递实参。

const App = () => {
	const handleClick = (name) => {
		console.log('按钮被点击了...', name)
	}

	return (
		<div>
			<button onClick={() => handleClick('软柠柠吖')}>点击</button>
		</div>
	)
}

export default App

⚠️ 注意:不能直接写函数调用,这里事件绑定需要一个函数引用


同时传递事件对象和自定义参数

语法:在事件绑定的位置传递事件实参 e 和自定义参数,clickHandler 中声明形参,注意顺序对应

const App = () => {
	const handleClick = (name, e) => {
		console.log('按钮被点击了...', name, e)
	}

	return (
		<div>
			<button onClick={(e) => handleClick('软柠柠吖', e)}>点击</button>
		</div>
	)
}

export default App



React 组件

概念

一个组件就是一个用户界面的一部分,它可以有自己的逻辑和外观,组件之间可以互相嵌套,也可以复用多次。
image.png.


组件基础使用

在 React 中,一个组件就是首字母大写的函数,内部存放了组件的逻辑和视图 UI,渲染组件只需要把组件当成标签书写即可。

// 1、定义组件
const Button = () => {
	return (
		<button onClick={() => alert('软柠柠吖')}>点击</button>
	)
}
// 2、使用组件
const App = () => {

	return (
		<>
			{/* 自闭和 */}
			<Button/>
			{/* 成对标签 */}
			<Button></Button>
		</>
	)
}

export default App



组件状态管理 — useState

基础使用

useState 是一个 React Hook(函数),它允许我们向组件添加一个状态变量, 从而控制影响组件的渲染结果。

和普通 JS 变量不同的是,状态变量一旦发生变化,组件会重新渲染,组件的视图 UI 也会跟着变化(数据驱动视图)。

image.png.

import {useState} from "react";

console.log('初始化数据,只会执行一次...')

const App = () => {
	console.log('渲染 App 组件...')
	const [count, setCount] = useState(0)

	return (
		<div>
			<button onClick={() => setCount(count + 1)}>+{count}</button>
		</div>
	)
}

export default App

状态的修改规则

在 React 中状态被认为是只读的,我们应该始终 替换它而不是修改它,直接修改状态不能引发视图更新。

image.png.


修改数组状态

import {useState} from "react";

console.log('初始化数据,只会执行一次...')
const App = () => {
	console.log('渲染 App 组件...')
	const [list, setList] = useState([0, 1, 2])

	return (
		<div>
			<button onClick={() => setList([list.length, ...list])}>头部添加</button>

			<ul>
				{list.map(item => <li key={item}>{item}</li>)}
			</ul>

			<button onClick={() => setList([...list, list.length])}>尾部添加</button>
		</div>
	)
}

export default App

image-20240220203804208.


修改对象状态

对于对象类型的状态变量,应该始终给 set 方法一个 全新的对象 来进行修改。

import {useState} from "react";

console.log('初始化数据,只会执行一次...')
const App = () => {
	console.log('渲染 App 组件...')
	const [obj, setObj] = useState({
		id: 1,
		name: '软柠柠吖',
	})

	return (
		<>
			<div>obj.name:{obj.name}</div>
			<button onClick={() => setObj({...obj, name: 'rnny'})}>修改姓名</button>
		</>
	)
}

export default App

image.png.



组件样式处理

基础样式

React 组件基础的样式控制有 2 种方式,行内样式和 class 类名控制。

.app {
    color: purple;
}
import './index.css'

const App = () => {

	return (
		<>
			<div style={{color: 'red'}}>行内样式</div>
			<div className={'app'}>class 类名</div>
		</>
	)
}

export default App

动态样式

import './index.css'
import {useState} from "react";

const App = () => {
	const [active, setActive] = useState('0')
	const tabList = [
		{type: 0, text: '动态 class ①'},
		{type: 1, text: '动态 class ②'}
	]
	
	return (
		<>
			{tabList.map(item =>
				<span
					className={`app ${active === item.type && 'active'}`}
					onClick={() => setActive(item.type)}
					key={item.type}
				>{item.text}</span>)}
		</>
	)
}

export default App
.app {
    color: purple;
}
.active {
    color: goldenrod;
}

标签:const,App,基础,React,export,组件,return
From: https://www.cnblogs.com/rnny/p/18024724

相关文章

  • vue3项目模板:新建一个vite+vue3项目,并做基础化建设
    原文地址:https://blog.csdn.net/weixin_43239880/article/details/130355138新建一个vite+vue3项目,并做基础化建设1.使用npmcreatvite@latest新建一个vue3项目2.生成git仓库3.将prettier的规则加入到eslint中(可选操作,建议有)4.添加commitLint(可选操作,建议有)5.加入UI组件库,以ele......
  • 神经网络基础
    (个人学习所用,内容来源于网络,侵权删)1.感知机感知机由Rosenblatt在1957年提出,是神经网络的基础,该思想受生物学启发(参照下图),在其看来,人的大脑可以看作一个生物的神经网络,其最小的单元是神经元。人的神经网络由这样的一些神经元组成,它接受一些信号,这些信号可能是眼睛看到的光学......
  • [转]多端统一框架Taro基础教程(支持转小程序/React Native(安卓/iOS)/鸿蒙)
    原文地址:多端统一框架Taro基础教程-知乎随着微信小程序越来越火,其它平台也都推出了自己的小程序产品(支付宝、快应用、百度、抖音)。小程序最大的特点就是平台能为你提供强大的流量,所以小程序开发变成了前端必会知识。作为一个从来不想写程序,一心只想泡妹子的程序员,我一直期盼......
  • babel 基础概念 & 从零到一写一个 babel 插件
    babel基础概念简单来说,做语法转换兼容的,复杂一点的说,babel可以将我们写的ES6+的Javascript语法转换为向后兼容的语法,以便能够在旧版本的浏览器或者其他环境运行。babel生成代码的三个阶段解析(parse)输入:源码输出:AST转换(transform)输入:AST输出:AST(此AST非彼AST,是被......
  • 深度学习-卷积神经网络基础2-43
    目录1.池化层2.CNN的一般架构3.经典的LeNet4代码5代码21.池化层为什么要有池化层?目标就是降采样subsample,shrink,减少计算负荷,内存使用,参数数量(也可防止过拟合)正如卷积神经网络一样,在池化层中的每个神经元被连接到上面一层输出的神经元,只对应一小块感受野的区域。我们必......
  • Java基础01:注释
    1.注释:1.1.平时编写代码,在代码量比较少的时候,还可以看懂自己写的,但是当项目结构一旦复杂,就需要用到注释1.2.注释不会被执行,是给写代码的人看的1.3.养成注释的好习惯2.java中的注释有三种:2.1单行注释2.2多行注释2.3文档注释1.创建一个......
  • ControNet基础学习
    1.使用背景AI绘画虽然能够利用图生图的方式,生成类似图片风格特征的一种新图片,但是,大体上还是无法精准控制整体图片的细节特征,如果用于自娱自乐的倒也可以,但是在更专业的场景上,精准控制出图成为了AI绘画的一个重大难题。2.基础原理在控制原理上ControNet和LoRA是有很多相似的......
  • 记录--源码视角,Vue3为什么推荐使用ref而不是reactive
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助ref 和 reactive 是Vue3中实现响应式数据的核心API。ref 用于包装基本数据类型,而reactive用于处理对象和数组。尽管 reactive 似乎更适合处理对象,但 Vue3官方文档更推荐使用 ref。 我的想法,ref就......
  • 热辣滚烫,Salesforce开发入门指南:零基础学习宝典!
    开发人员将Salesforce组织扩展到声明式配置之外,构建应用程序,进而优化业务运营。Salesforce开发人员通常会使用两种编程语言:Apex和JavaScript。然而,Salesforce开发不仅仅只包括代码。为了在职业道路上脱颖而出,开发人员还需要了解声明性功能,将组织的设计和性能保持最佳状态。Sal......
  • 2024牛客寒假算法基础集训营4
    A.直接计算#include<bits/stdc++.h>usingnamespacestd;#defineintlonglongconstintN=1e5+10;#defineinf0x3f3f3f3fvoidsolve(){inta,b,k;cin>>a>>b>>k;if(a>=k*b)cout<<"good";elsecout<&l......