一、什么是JSX
JSX是React提供的一种js封装语法。相当于将js代码做了封装。
JSX= JS+XML JS代码和标签语言结合起来。
XML：也是一种标签语法。可扩展的标签语言。
HTML：超文本标记语言。
你们可以再JS代码中直接签到标签代码，数据的动态绑定。一旦数据变化，可以直接JS代码中修改渲染的内容。
Vue中采用{{}}的形式来获取js的代码。React采用{}模板语法来获取数据
JSX特点：
- JSX执行更快，编译过程中就已经优化了代码。
- JSX是类型安全的，编译过程中就会发现错误。
- JSX来开发更见简单。避免了以前JS和HTML结合，字符串拼接
浏览器能不能直接识别JSX语法？
不能
再浏览器运行，必须将JSX代码进行编译。编译为JS代码。
babel工具。
只要你的项目是通过脚手架的方式来创建，提供完整工具链。其中有一个工具babel
babel：将你们js高版本的语法可以转化为低版本语法，让浏览器识别。
也可以将JSX语法转化为js语法。让浏览器识别。
babel文档地址：www.babeljs.cn/
一般babel运行在webpack中。
二、JSX语法
1、嵌入表达式
function App() {
const username = "xiaowang";
return ( // 页面模板
<div className="App"> 主页{username} </div>
);
}
{}括号代表的意思，占位符的意思。当代码运行的时候，{}括号加载里变量。
2、算数运算
{1+1}{item.price * item.number}
3、条件运算
条件：{gender==0?"男":"女"}
4、对象表达式
const user = {
id:1,name:"xiaowang"
}
<div>{user}</div> //报错。jsx不支持直接渲染一个对象<div>{user.id}</div> 支持这种写法
5、jsx函数表达式
function show(){
return "小王"
}
<div>{show}</div> //jsx不支持<div>{show()}</div> 正确
6、数组表达式
const array = ["孵化园王一博","高新刘德华"]数组：{array}
7、JSX防注入攻击
脚本注入：再浏览器的文本框里面输入脚本代码。让这段代码运行再你的程序中
<script>
document.getElementById("root").remove()
</script>
<script>
for(){
ajax({
url:"http://web.woniulab.com:8080",
method:"get"
})
}
</script>
再jsx中设计下面的代码
{<script>alert()</script>}
页面上不会将script渲染成js代码。ReactDOM.render再进行内容渲染之前，默认会将jsx模板要渲染的内心进行解析/发现里面有脚本语法会转化为字符串的方式输出，浏览器不会识别。
sql 注入：这个问题现在已经不再很严重的安全问题。后端框架一般都会有防sql注入
select * from user where username="xiaowang" and password="xiaofei"
select * from user where 1=1
react中没有任何一个指令。
执行数据遍历
function App2() { const user = [ { id: 1, name: "xiaowang" }, { id: 2, name: "xiaofei" } ] //生成一个jsx，节点数组 const result = user.map(item=>{ return ( //动态绑定key值 <li key={item.id}> <span>{item.id}</span> <span>{item.name}</span> </li> ) }) console.log(result); return ( <div> <ul> {result} //生成过后的节点数组，渲染 </ul> </div> )}export default App2
JSX使用的一些特性
组件中return返回对应的节点。
function App(){ return <div></div>}
返回的节点比较复杂
function App(){ return ( <div> <p></p> </div> )}
如果组件中有多个标签，我们可以增加一个空标签
<> <div></div> <div></div></>
jsx编译的时候，不会空标签渲染出来。类似于Vue template
