2021-07-29 jsx浅入了解

jsx:①运用在react框架中，或者说react基于jsx在读取渲染服务端界面；②jsx是一种javaScript的语法扩展，其格式类似于模板语言，但实际上完全是在javaScript内部实现的；③jsx用来声明react当中的元素，react使用jsx来描述用户界面。

jsx特性（属性）：

①jsx可以使用引号（‘’，“”）来定义字符串为值的属性，例如：const element =

       jsx就会在渲染的时候为这个

元素绑定一个属性名为tableIndex值为0的这样一个属性，代替了原始javaScript中添加标签属性 document.createElement("div") && div.setAttribute("id", "newDiv")，因此jsx的简单粗暴代替了复杂占内存的原生js，化繁为简。

②jsx可以使用大括号{}来定义javaScript表达式为值的属性，例如：const elelment =    这里通过大括号就可以获取图片路径，只需要将大括号例的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并保持数据内容一致。