React中对JSX的理解

首先JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。下面来演示下具体的语法

React创建项目这里我就不多介绍了,在index.js中

我们先引入

import React from 'react';
import ReactDOM from 'react-dom';

let time = new Date().toLocaleTimeString()
let str ='当前时间是:'
let element = (
  <div>
<h1>{str+time}</h1>
  </div>
)
此时需要在这里面调用
ReactDOM.render(
element,
document.querySelector('#root')
)

这里扩展一下，这个时间它不动，我们给他封装个方法

function clock(){
  let time = new Date().toLocaleTimeString()
  let element = (
  <div>
  <h1>现在的时间是{time}</h1>
  </div>
  )
}
clock()
setInterval(clock,1000)
这样就好了，每秒走一次

JSX里面也可以互相使用,举个例子

let element3 =(
<div>
<span>哈哈</span>
<span>哈哈</span>
 </div>
)
let man = "正常"
let element2 =(
  <div>
    <h1>今天是否隔离</h1>
<h2>{man =="发热"?"隔离":element3}</h2>
  </div>
)

我们也可以在jsx里面加标签,例如

<h2>{man =="发热"?<button>隔离</button>:"躺床上"}</h2> 可以为jsx对象


总结一下JSX优点吧，虽然现在VUE确实很强，很好用，但是多掌握一门框架也是挺好的啊
优点:
1.jsx执行更快,编译为javaScript代码时进行优化
2.类型更安全,编译过程如果出错就不能编译，及时发现错误
3.jsx编写模版更加简单快速(不要跟VUE比)

注意:
1.jsx必须要有根节点
2.正常的普通HTML元素要小写，如果是大写，默认认为是组件

jsx表达式

1.有HTML元素构成
2.中间如果需要插入变量用{}
3.{}中间可以使用表达式
4.{}中间表达式中可以使用jsx对象
5.属性和HTML内容一样都是用{}来插入内容