这两天看到一个交流群的前端人,使用react,jsx语法,把他折磨的生不如死;主要是因为未使用过react,更未使用过jsx,纯纯的赶鸭子上架,感觉可太难了!
话不多说,我们直接进入正题!
什么是JSX?
要想写jsx的语法,那么就得先了解jsx是什么,有什么用?借用百度的话:
JSX是一种JavaScript的语法扩展,运用于React架构中,其格式比较像是模版语言,但事实上完全是在JavaScript内部实现的。元素是构成React应用的最小单位,JSX就是用来声明React当中的元素,React使用JSX来描述用户界面。
那么本质就出来了,JSX说白了就是js语法的一个扩展,是一个看起来很像 XML 的 JavaScript 语法扩展!我们也许不一定使用JSX,但是需要知道JSX有什么优点!
- JSX 执行更快,因为它在编译为 JavaScript 代码后进行了优化
- 它是类型安全的,在编译过程中就能发现错误
- 使用 JSX 编写模板更加简单快速
很是推荐在React中使用jsx代替常规的js,使用jsx来描述用户界面!总的来说啊,用React不使用jsx,就像吃方便面不撒调料包,木有灵魂🤓
JSX语法规则
首先,我们就不去新建完整的React项目了,普通的html就好,主要引入以下几个js
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
说一下这几个js库分别的作用
第一个:react.development.js,这个是React的核心库
第二个:react-dom.development.js,react-dom库,用于支持react操作dom
第三个:babel.js,这个很熟悉,起转换的作用,这里是将jsx转化为js
好,整体如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jsx语法</title>
</head>
<body>
<div id="app"></div>
</body>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">
</script>
</html>
1. 定义虚拟DOM时,不要写引号
这个意思很简单,顾名思义,就是定义虚拟dom的时候,不要把它写成一个字符串。在js,jq中,我们应该写过这样的代码,jq的追加元素,我们追加的是字符串dom
var txt="<p>hello</p>"
$("body").append(txt);
在JSX中需要这么写!万万不要写成字符串了哦!
正确写法
<script type="text/babel">
const app = document.getElementById('app')
const VDOM = (
<div>
<h2>hello</h2>
</div>
)
ReactDOM.render(VDOM, app)
</script>
2.标签中混入js表达式的时候,需要使用 { }
小声bb,写vue写习惯了,上来就 {{ }} , 然后光荣报错
<script type="text/babel">
const app = document.getElementById('app')
const str = 'hello'
const VDOM = (
<div>
<h2>{str}</h2>
</div>
)
ReactDOM.render(VDOM, app)
</script>
得到的结果,与上图一致
3.样式的类名指定不要用class,需要使用className
分三种情况吧!
3.1 直接使用class类名
<style>
.import {
color: #ff0000;
}
</style>
...
<script type="text/babel">
const app = document.getElementById('app')
const VDOM = (
<div className="import">
<h2>hello</h2>
</div>
)
ReactDOM.render(VDOM, app)
</script>
3.2 使用类名变量
<style>
.big {
font-size: 50px;
font-weight: bold;
}
</style>
...
<script type="text/babel">
const app = document.getElementById('app')
const bigClass = 'big'
const VDOM = (
<div className={bigClass}>
<h2>hello</h2>
</div>
)
ReactDOM.render(VDOM, app)
</script>
3.3 综合,同时存在
<style>
.big {
font-size: 50px;
font-weight: bold;
}
.import {
color: #ff0000;
}
</style>
...
<script type="text/babel">
const app = document.getElementById('app')
const bigClass = 'big'
const VDOM = (
<div className={`${bigClass} import`}>
<h2>hello</h2>
</div>
)
ReactDOM.render(VDOM, app)
</script>
请记住,是className!!!
4.内联的样式,需要用style={{key:value}}的形式来编写
4.1 内联行内样式写法
<script type="text/babel">
const app = document.getElementById('app')
const VDOM = (
<div style={{color: '#ff0000', fontWeight: 'bold'}}>
<h2>hello</h2>
</div>
)
ReactDOM.render(VDOM, app)
</script>
4.2 变量式写法
<script type="text/babel">
const styles = {
color: 'red',
fontWeight: 'bold'
}
const VDOM = (
<div style={styles}>
<h2>hello</h2>
</div>
)
ReactDOM.render(VDOM, app)
</script>
效果同上
5. 只有一个根标签
这个也很好理解,我直接写个错误的例子
const VDOM = (
<div>
<h2>hello</h2>
</div>
<div>123</div>
)
这么写,编辑器上是直接就爆红的,至少webstorm是。。。页面错误打印为:
翻译是:相邻的JSX元素必须包装在一个封闭的标记中
6. 标签首字母
标签首字母为小写
会自动寻找与之匹配的html标签
<script type="text/babel">
const app = document.getElementById('app')
const VDOM = (
<div>
<img src="https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg" alt=''/>
</div>
)
ReactDOM.render(VDOM, app)
</script>
正常显示,没啥毛病
标签首字母大写
<script type="text/babel">
const app = document.getElementById('app')
const VDOM = (
<Goods>
hahahha
</Goods>
)
ReactDOM.render(VDOM, app)
</script>
大写的话,会自动去寻找我们写的自定义组件,这里不再过多的讲述,此时页面会输出
Goods is not defined
小写开头,但是是个不存在的html标签
<script type="text/babel">
const app = document.getElementById('app')
const VDOM = (
<qianjue>hahah</qianjue>
)
ReactDOM.render(VDOM, app)
</script>
qianjue这个标签是个不存在的html,且看页面怎么报的错
The tag <qianjue> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter
翻译过来就是:此浏览器无法识别标签<qianjue>。如果要呈现React组件,请以大写字母开头。
是不是瞬间恍然大悟了!
7. 表达式-判断
只要写js,就少不了判断,且看jsx中是如何进行 三元运算符的
<script type="text/babel">
const app = document.getElementById('app')
let type = 1;
const VDOM = (
<div className={type === 1 ? 'import' : ''} style={{color: type === 1 ? '#ff0000' : ''}}>
<h2>{type === 1 ? 'hello' : ''}</h2>
<h2>{type + 1}</h2>
</div>
)
ReactDOM.render(VDOM, app)
</script>
总结:
JSX的语法,其实并不复杂,其主要本身还是js,主要用于简化 创建虚拟的DOM
值得注意的是:JSX并不是字符串,也不是html/xml标签,JSX最终产生的就是一个js对象
可能刚开始接触jsx的时候,会觉得哪哪都别扭,写不习惯,多练练写写,找找感觉,去体会体会它的语法,设计理念,不要一味的抵触,害怕。加油,这根本就不是个事!
原创不易,最近也在参加新星计划的比赛,如果觉得写得还行,多少有点帮助,请您动动您发财的小手,给个赞或者收藏或者评论,有什么意见也可以提出来,感谢对我的帮助!先行谢过!