react语法介绍

最新推荐文章于 2023-12-06 17:57:24 发布
最新推荐文章于 2023-12-06 17:57:24 发布
阅读量207 收藏
点赞数
分类专栏： 前端学习 文章标签： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39715822/article/details/106807389
版权

react语法介绍

介绍

特性：

  1. 声明式
  2. 组件化
  3. 灵活：支持单/多页面，服务端渲染，RN-App.

编写hello,world

cdn引入

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script crossorigin src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

note:前两个必须要，babel用于解析es6语法。

npm引入

如果插件拉取失败，可以npm获取，src改成文件路径名。

基本语法

  • ReactDOM.render()：渲染组件：1.插入哪个标签，多个需用包裹父标签2.插到哪
  • ReactDOM.createElement()：创建元素：1.标签名，2.标签属性，3.默认值
  • ReactDOM.Component：创建组件

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
		<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
	
	</head>
	<body>
		<!-- ... 其它 HTML ... -->
		
		<div id="app"></div>
		
		<script>			
			var hello = ReactDOM.createElement('h1',{},"hello world");
			ReactDOM.render(hello,document.getElementById('app'));
		</script>
	</body>
</html>

jsx介绍

概念：js中编写html代码

ReactDOM.render(
<h1>hello,world</h1>
,document.getElementById('app'));
  • 样式里面的class要用className
  • 引入直接用大括号

元素渲染

元素发生变化时，对比后渲染差异部分。
单向绑定，可获取状态。

组件和props

  • React…creactClass() :早期，已废弃
  • 函数式组件：无状态
  • React.Component

操作：
函数式：

			function hello(props){
				return 
				 <div>
				<h1> 111111{props.name}</h1>
				<p>年龄：{props.age}</p>
				</div>
			}
			
			ReactDOM.render(<hello name = "jack" , age = "30"/>,document.getElementById('app'));

继承式：

class hello extends React.Component{
				render(){
				return
				 <div>
				<h1> 111111{this.props.name}</h1>
				<p>年龄：{this.props.age}</p>
				</div>		
				}
			}
			ReactDOM.render(<hello name = "jack" , age = "30"/>,document.getElementById('app'));

生命周期

四个阶段：

  1. 组件初始化阶段
  2. 组件加载阶段
  3. 数据更新阶段
  4. 组件销毁阶段

在这里插入图片描述

			class hello extends React.Component{
				constructor(props){
					//初始化props，对应属性
					super(props);
					//初始化状态
					this.state = {
						name : 'jack',
						age: 30
					}
				}
				//组件加载阶段
				componentWillMount(){
						//组件加载前
				}
				componentDidMount(){
						//组件加载后
				}
				//------
				updateUser=()=>{
					//this.state.name = 'Tim';错误！不会触发render
					this.setState({
						name : 'Tim',
						age:32
					})
				}
				
				//数据更新
				shouldComponentUpdate(){//数据是否需要更新
					return true;//返回真则更新
				}
				componentwillUpdate(){
						//数据将要更新
				}
				componentDUpdate(){
						//数据已经更新
				}
				render(){
					//组件加载或者数据更新
				return
				 <div>
				<h1> 111111{props.name}</h1>
				<p>年龄：{props.age}</p>
				<button onClick = {this.updateUser}>按钮</button>
				</div>		
				}
			}
			ReactDOM.render(<hello name = "jack" , age = "30"/>,document.getElementById('app'));

事件处理

  1. 箭头函数
  2. 构造函数里bind绑定this
  3. 绑定事件时onclick = {()=>this.updateUser}
  4. onClick = {this.updateUser.bind(this)}

点击button改变值
在这里插入图片描述

列表渲染

class List extends React.Component{
				state = {
					list : [1,2,3,4,5]
				}
				render(){
					const arr = this.state.list;
					const listItem = []
					arr.map((item)=>{
						let li = <li>{item}</li>;
						listItem.push(li);
					})
					return <div>
						<ul>
							{listItem}
						</ul>
						
					</div>
				}
			}
			
		ReactDOM.render(<List/>,document.getElementById('app'));

列表应用

		class List extends React.Component{
			
			state = {
				val : '',
				list : [1,2,3,4,5]
			}
			handleInput = (event,index)=>{
				this.setState({
					val : event.target.value;
				})
			}
			handleAdd = ()=>{
				// const val = this.state.val;
				// const list = this.state.list;
				const {val,list} = this.state;
				list.push(val);
				this.setState({
					list//list : list,key 和valuey一样时可以省略key
					//数据发生变化必须及时set更改
				
				})
			}
			render(){//setState 就会执行
				const val = this.state.value;
				const arr = this.state.list;
				const listItem = []
				arr.map((item)=>{
					let li = <li key={index}>{item}</li>;
					listItem.push(li);
				})
				return <div>
					<div>
						<input type="text" value ={val} onChange = {this.handleInput}/>
						<button onClick = {this.handleAdd}>添加</button>
					</div>
					
					
					
					<ul>
						{listItem}
					</ul>
					
				</div>
			}
		}
		
	ReactDOM.render(<ToDoList/>,document.getElementById('app'));
游啊游游啊
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
React简单介绍
10-19
总而言之，React 以其高效的性能、组件化的开发方式和易读的 JSX 语法，已经成为现代前端开发的重要工具，吸引了众多开发者加入其生态系统。随着社区的不断壮大，React 的周边库和工具也在持续完善，为开发者提供了...
介绍react的语法
m0_57236802的博客
04-22 110
函数式组件是用纯函数编写的，它们接收一组属性（props）作为参数，并返回一个React元素。React组件可以具有自己的内部状态，通常用于存储与组件相关的动态数据。React Hooks是React 16.8中引入的一项新特性，它允许你在不编写类的情况下使用状态和其他React功能。React的核心概念是组件，组件是UI的独立、可重用的构建模块。React应用程序由许多组件组成，组件可以是函数式组件或类组件。在类组件中，React提供了一组生命周期方法，让你在组件的不同阶段执行自定义操作。
React基础语法整理
Start的小笔记
12-06 2447
<h4>当前信息{JSON.stringify(person)}</h4>
免费CDN汇总
Idonng的专栏
10-09 1030
DnsPod：国内老牌DNS服务商，为各类网站提供高质量的电信、网通、教育网双线或者三线智能DNS免费解析，提高网站解析速度。 DnsPod国际版：国内的IP是不可以在国际版注册的，需要有国外的IP才行，或者把浏览器语言改为英语才能正常访问。 Webluker：一站式运维服务综合平台，虽然整个技术团队比较年轻，但是已经成长为国内最知名的CDN服务商了。不过好东西是要收费的！
react的语法
口袋的天空的博客
11-26 3178
------------------------------------入门-------------------------------------------------- 一.react的概述 1.react是什么 React是一个用于构建用户界面的Javascript库。 用户界面：前端HTML界面。react主要是用来写HTML页面，或构建web应用。 如果从MVC的角度看，react仅仅是视图层（V），也就是负责视图的渲染，而并非提供了完整的M和C的功能。 2.react的特点 声明式 只需
React 基础介绍 1 （语法介绍）
唐僧的专栏
06-15 301
React 基础介绍 最近观察了几个 混合APP 的方案，感觉各有优势， 底层原理也各自不同。适合的项目 复杂度也各自不同； 感觉大家可以 按照自己的 项目复杂度 以及类型；选取合适的 项目解决方案 ReactNative 支持热更新， 比较适合大型项目 Flutter 不支持热更新，适合大型项目 由于 UI 库是独...
React学习基本语法
02-20
这是我学习 React 写的第一个程序，也是React的最基本的语法，上传到这里，和大家交流学习
React基本技术介绍
最新发布
06-11
### React基本技术介绍 #### 一、React简介与特点 React 是一款由 Facebook 开发的用于构建用户界面的 JavaScript 库。它主要关注于前端应用的视图层，并且通过虚拟 DOM 和 Diffing 算法等技术显著提高了前端开发...
React框架基本介绍
06-11
React使用JSX语法，这是一种JavaScript的扩展，允许我们在JavaScript中混合HTML-like语法。JSX使得编写UI模板更加直观，同时也保留了JavaScript的灵活性。例如，下面是一个使用JSX定义的Hello组件： ```jsx ...
react react-redux基本语法
08-26
react react-redux基本语法
JSX语法及特点介绍_v4
04-25
JSX语法简介 React的核心机制之一就是可以在内存中创建虚拟的DOM元素。React利用虚拟DOM来减少对实际DOM的操作从而提升性能。 JSX简介 JSX就是Javascript和XML结合的一种格式。React发明了JSX，利用HTML语法来创建虚拟DOM。当遇到<，JSX就当HTML解析，遇到{就当JavaScript解析。
react基础语法——学习笔记（一）
Knight__D
08-04 2398
一、HTML模板 使用react的网页源码结构： !DOCTYPE html> html> head> script src="../build/react.js">/script> script src="../build/react-dom.js">/script> script src="../build/browser.min.js">/script>
React介绍
menglong0329的博客
07-11 1125
React Native移动跨平台开发一、移动平台开发分类Native App       优点：性能优越、功能强大       缺点：版本维护和更新体验不太好Web App      优点：开发成本低、升级简单      缺点：与原生App相比，性能和体验还是相差比较大Hybrid App       介于Native与Web之间。原生 App二、React介绍       在Web应用开发的早...
RGB与CMYK这两大色彩模式的区别
游啊游游啊
06-10 4233
：RGB色彩模式是发光的，存在于屏幕等显示设备中。不存在于印刷品中。CMYK色彩模式是反光的，需要外界辅助光源才能被感知，它是印刷品唯一的色彩模式。 ：色彩数量上RGB色域的颜色数比CMYK多出许多。但两者各有部分色彩是互相独立(即不可转换)的。 ：RGB通道灰度图中偏白表示发光程度高；CMYK通道灰度图中偏白表示油墨含量低。反而反之。 特别注意第2条：两者各有部分色彩是互相独立(即不可转换)的。如下图中绿色大圆表示RGB色域，蓝色小圆表示CMYK色域。这一大一小表示RGB的色域范围(即色彩..
photoshop-CMYK色彩模式
游啊游游啊
06-10 749
CMYK色彩模式 CMYK是一种依靠反光的色彩模式，和RGB模式一样，CMYK模式也有通道，而且是4个，C、M、Y、K各一个。在Photoshop中调入如下左图。注意上面的图像输入Photoshop后是RGB模式的。图像的色彩模式和其它一些信息可以从图像窗口的标题区看到。标题区显示着图像名称、缩放比例、色彩模式和颜色通道数。 CMYK通道的灰度图和RGB类似，是一种含量多少的表示。RGB灰度表示色光亮度，CMYK灰度表示油墨浓度。 但两者对灰度图中的明暗有着不同的定义： RGB通道灰度图中较白表示亮度较高
Photoshop-RGB色彩模式
游啊游游啊
06-10 706
RGB色彩模式三原色光色相谱灰度色彩模式 三原色光 电脑屏幕上的所有颜色，都由这红色绿色蓝色三种色光按照不同的比例混合而成的。一组红色绿色蓝色就是一个最小的显示单位。屏幕上的任何一个颜色都可以由一组RGB值来记录和表达。这红色绿色蓝色又称为三原色光，用英文表示就是R(red)、G(green)、B(blue)。 在电脑中，RGB的所谓“多少”就是指亮度，并使用整数来表示。通常情况下，RGB各有256级亮度，用数字表示为从0、1、2…直到255。注意虽然数字最高是255，但0也是数值之一，因此共256级。 2
photoshop-HSB色彩模式
游啊游游啊
06-10 568
HSB色彩模式 HSB色彩就是籍由这种模式而来的，它把颜色分为色相、饱和度、明度三个因素。注意它将我们人脑的“深浅”概念扩展为饱和度(S)和明度(B)。所谓饱和度相当于家庭电视机的色彩浓度，饱和度高色彩较艳丽。饱和度低色彩就接近灰色。明度也称为亮度，等同于彩色电视机的亮度，亮度高色彩明亮，亮度低色彩暗淡，亮度最高得到纯白，最低得到纯黑。 在HSB模式中，S和B的取值都是百分比，唯有H的取值单位是度，这个度是什么意思？是角度，表示色相位于色相环上的位置，将我们前面学过的色相环加上角度标志就明白了。 ...
photoshop-建立选区
游啊游游啊
06-11 528
建立选区选区选区运算建立任意选区 选区 选区是封闭的区域，可以是任何形状，但一定是封闭的。不存在开放的选区。 选区一旦建立，大部分的操作就只针对选区范围内有效。如果要针对全图操作，必须先取消选区。 取消选区：选择->取消选择，快捷键：ctrl+d 观看选区大小：F8 Photoshop中的选区大部分是靠使用选取工具来实现的。选取工具共8个，集中在工具栏上部。分别是矩形选框工具、椭圆选框工具、单行选框工具、单列选框工具、套索工具、多边形套索工具、磁性套索工具、魔棒工具。其中前4个属于规则选取工具。
如何才能做到色彩平衡？
游啊游游啊
06-11 390
冷暖色平衡 冷色：青色，蓝色。 暖色：红色，橙色，黄色。 中性：紫色，绿色。 大面积使用冷暖色对比会使情感更夸张，通常饱和度高的搭配会使产品更炫酷。 背景冷，前景暖，信息的可读性会更强。 互补色平衡 色环180度的颜色互补。 互补色能补充色彩情感的缺失感，调节明度和饱和度能改变情感走向。 深浅色平衡 可以调节画面节奏感，使画面层次更加丰富。 黑白灰平衡 一个完整的页面应该出现黑白灰的三种平衡关系，最亮和最暗是这个画面中最极端的点，灰色是黑白之间的比例。 ...
react 语法高亮
05-25
React 语法高亮是指在编写 React 代码时，通过代码编辑器或插件对代码进行高亮显示，使代码更易读、易懂。一般来说，React 语法高亮的实现需要配合相应的插件或编辑器进行，比如 VS Code 的 "Reactjs code snippets...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值