认识JSX语法

最新推荐文章于 2024-01-02 12:54:18 发布

桔子是只猫

最新推荐文章于 2024-01-02 12:54:18 发布

阅读量224

点赞数

分类专栏： js 文章标签： jsx

本文链接：https://blog.csdn.net/weixin_41838201/article/details/118526863

版权

js 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

这篇博客介绍了React中JSX的基本使用，包括如何在JSX中嵌入变量和表达式，以及其与React.createElement的关系。重点强调了React中state数据的不可变性原则，即不能直接修改state，必须通过this.setState()来更新。此外，还解释了JSX的本质是转化为ReactElement树结构，最后映射到真实的DOM。

摘要由CSDN通过智能技术生成

jsx笔记

环境

html代码中必须先引入babel 的包，并且script 必须添加type='text/babel’属性，才能识别jsx；

基础使用

const element = <div>这就是一句JSX代码</div>

一些小注意

注释：{/*这里写注释*/}；
元素的class名变为className，label元素的for属性变为htmlFor；
单标签例如img 结尾必须用 />；
使用变量的时候，不使用""；如<img src={url} />

嵌入变量

只显示 string,number,Array类型的变量;
如果是null,undefined,boolean值时则不显示内容，想要显示的话，需要先转变为字符型，转变方式有：toString(),+ ,String()等；
对象类型不能作为子元素；

嵌入表达式

运算符
三元表达式
执行一个函数

	{10 + 20}
	{true?10:20}
	{this.func()}

本质

使用React.createElement(type,config,children)语法糖；参数有三个：第一个是元素标签类型，第二个是元素的属性，第三个是元素的子元素；

	React.createElement(
		"div",
		null,
		React.createElement(
			"div",
			{className:'header'},
			React.createElement(
				"h2",
				null,
				"hello world"
			),
			React.createElement(
				"h2",
				null,
				"hello world1"
			)
		)
	)
用babel转换过来就是:
<div>
	<div className="header">
		<h2>hello world</h2>
		<h2>hello world1</h2>
	</div>
</div>

可以在 babeljs.io 官网的 try it out中试一试

虚拟DOM

jsx => createElement => ReactElement 树结构 =>ReacDOM.render()映射到真实DOM上；即：

jsx:
	<div>
		<div className="header">
			<h2>hello world</h2>
			<h2>hello world1</h2>
		</div>
	</div>
	
通过babel转换为 createElement:

	React.createElement(
			"div",
			null,
			React.createElement(
				"div",
				{className:'header'},
				React.createElement(
					"h2",
					null,
					"hello world"
				),
				React.createElement(
					"h2",
					null,
					"hello world1"
				)
			)
		)

生成一个ReactElement对象，也称树结构：
通过ReactDOM.render()函数将虚拟DOM映射到真实DOM上；

react中state数据不可变性原则

不能直接修改state中的数据，想要修改必须通过this.setState()方法:

state={
	books:[
		{
			id:1,
			name:'aa',
			count:1
		},
		{
			id:2,
			name:'bb',
			count:1
		},
		{
			id:2,
			name:'cc',
			count:1
		},
	]
}
若想要修改指定index的count值：
changeBookCount(index){
	const newBooks = [...this.state.books]
	newBooks[index].count += 1
	this.setState({
		books:newBooks
	})
}

若想要删除books中指定index的数据，可以这样做：（直接用splice会修改掉原books）
removeBook(index){
	this.setState({
		books:this.state.books.filter((item,indey)=>index != indey)
	})
}