jsx:①运用在react框架中,或者说react基于jsx在读取渲染服务端界面;②jsx是一种javaScript的语法扩展,其格式类似于模板语言,但实际上完全是在javaScript内部实现的;③jsx用来声明react当中的元素,react使用jsx来描述用户界面。
jsx特性(属性):
①jsx可以使用引号(‘’,“”)来定义字符串为值的属性,例如:const element = <div tableIndex="0"></div> jsx就会在渲染的时候为这个<div>元素绑定一个属性名为tableIndex值为0的这样一个属性,代替了原始javaScript中添加标签属性 document.createElement("div") && div.setAttribute("id", "newDiv"),因此jsx的简单粗暴代替了复杂占内存的原生js,化繁为简。
②jsx可以使用大括号{}来定义javaScript表达式为值的属性,例如:const elelment = <img src={assest.imgUrl} /> 这里通过大括号就可以获取图片路径,只需要将大括号例的imgUrl="http:xxxxxx.png"提前定义出来,在dom渲染时就会获取到图片路径,代码简洁方便。
③jsx特性接近于javaScript而不是html,所以camelCase(小驼峰)来命名定义属性,例如:class使用className,tableindex使用tableIndex。
④jsx嵌套格式,如html标签一样结尾使用/>
⑤jsx使用表达式,在jsx里可以任意使用javaScript表达式,但是要包含在大括号里,例如:
⑥jsx防注入攻击,在jsx中嵌入用户输入时安全的
react dom在渲染之前默认会过滤所有传入的值,它可以确保应用不会被注入攻击。所有的内容再渲染之前都被转换了字符串。这样可以有效的防止xss(跨站脚本攻击)
⑦jsx表示对象,babel转译器会把jsx转换为一个名为react.createElement()的方法调用。例如:
react.createElement()这个方法首先会进行一些避免bug的检查,之后会返回一个类似下面例子的对象
这样的对象被称为“react元素”。它代表所有显示再屏幕上的东西。react通过读取这些对象来构建Dom并保持数据内容一致。