React（03）：React中的JSX语法

前言

React（02）：React基础语法及核心的概念

这一篇来讲React很重要的部分：react中使用JSX语法

正文

什么是JSX语法：就是符合 xml 规范的 JS 语法；（语法格式相对来说，要比HTML严谨很多）可以将HTML语言直接写在JavaScript语言之中，不加任何引号，它允许HTML与JavaScript的混写。这就是JSX的语法。

一、使用JSX语法特点及注意事项

1. 当 编译引擎在编译JSX代码的时候，如果遇到了<那么就把它当作 HTML代码去编译，如果遇到了 {} 就把 花括号内部的代码当作 普通JS代码去编译；

2. jsx 语法的本质：并不是直接把 jsx 渲染到页面上，而是 内部先转换成了 createElement 形式，再渲染的；

3. 在 jsx 中混合写入 js 表达式：在 jsx 语法中，要把 JS代码写到 { } 中

4. 在 jsx 中 写注释：推荐使用{ /* 这是注释 */ }

5. 使用 camelCase（小驼峰命名）来定义属性的名称：需要使用className 来替代 class；htmlFor替换label的for属性；tabindex 则变为 tabIndex;

6. 在JSX创建DOM的时候，所有的节点，必须有唯一的根元素进行包裹；

7. 在 jsx 语法中，标签必须 成对出现，如果是单标签，则必须自闭和！

8. JSX允许直接在模板插入JavaScript变量。如果这个变量是一个数组，则会展开这个数组的所有成员。

9. React DOM在渲染之前默认会过滤所有传入的值。它可以确保应用不会被注入攻击。所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止XSS(跨站脚本攻击)

10. Babel转译器会把JSX转换成一个名为React.createElement()的方法调用。

11. 因为React独有的JSX语法跟JavaScript不兼容。如果在普通的html里面要写jsx语法，凡是使用JSX的地方，都要加上type=“text/jsx”。

二、react中使用JSX语法

2.1 JSX语法使用

首先引入 babel 插件转译器

<script src="/js/babel.min.js"></script>

• 创建虚拟dom元素,再渲染；

const arrStr = ['zs','asd','fff']
const list =[]
arrStr.forEach(item=>{
   
    const name = <p>{
   item}</p>
    list.push(name)
})
ReactDOM.render(list,document.getElementById('app'))

• 直接在内部循环渲染虚拟dom

const arrStr = ['zs','asd','fff']
ReactDOM.render(
  <div>
    {
   arrStr.map(item=><h3 key={
   item}>{
   item}</h3>)}
  </div>,
  document.getElementById('app')
)

• 渲染虚拟dom对象数组的形式

const arrStr2 = [{
   id:1,name:'小明',age:<