对于 React 中 JSX 的一些理解 ？

前言：

---

当我们从类似 jQuery 操作 DOM 的框架，步入以数据操作界面元素的 React 框架时，我们需要对它内部的 JSX 有所掌握。它 作为 React 框架的特性之一，本身并不复杂，只是细微的语法需要熟练和注意。首先我们得清除 JSX 语法为何出现 ？我们知道，传统的操作 DOM 类型的框架转换成以数据操作界面的框架。核心变化在于虚拟DOM的出现，Vue 和 React 都是如此，那么在 React 中是怎么 构建虚拟 DOM 元素 的，这就要用到 JSX。

---

• 什么是 JSX ？

JSX：它是一种 Javascript 的扩展语言，由 Javascript 和 XML （定义标签时，只允许被一个标签包裹。标签一定要闭合）组合而成。在 React 中 JS 文件里面来构建描述 UI 界面的 HTML / HTML5 语言。

JSX ：

const ele = <h2>Hello World</h2>

JS ：

var element = React.createElement("h1",null,"Hello, world!");

• 在 JS 中使用 JSX ？

JSX 本身也是一个表达式，在编译后，会变为普通的 Javascript 对象。可以在 if 语句或者 for 循环中使用 JSX，也可以将它赋值给变量，可以将它作为参数接收，可以在函数中返回。

const result = true ? <h1>Hello Wolrd</h1> : <h2>wuhao</h2>
let list = ['html', 'css', 'js']
list.map((item, index) => {
    return <li>item</li>;
})

• 在 JSX 中使用 JS ？

上面了解了如何在 JS 中使用 JSX，那么如何在 JSX 中插入 JS 代码呢 ?

当你想 在 JSX 中使用 JS ，只需要使用 {} 即可 。可以这么理解，当遇到 <> ，会当作 HTML 来解析，遇到 {} 会当作 JS 来解析 。

function format(user) {
  return user.first + ' ' + user.last;
}
const user = { first: 'Harper', last: 'Perez' }
// 外部加（），内部可以允许换行
const element = (
  <h1>
    Hello, {format(user)}!
  </h1>
)
ReactDOM.render(element, document.getElementById('root'))

注意：在 JavaScript 中，表达式就是一个短语，Javascript 解释器会将其计算出一个结果，常量就是最简单的一类表达式。常用的表达式有：变量名；函数定义表达式；属性访问表达式；函数调用表达式；算数表达式；关系表达式；逻辑表达式；if 语句以及 for 循环不是JavaScript表达式，不能直接作为表达式写在{}中，但可以先将其赋值给一个变量（变量是一个JavaScript表达式）。

• 在 JSX 中添加属性值  ？

可以使用引号将 字符串字面量 指定为属性值：

// ”0” 是一个字符串字面量
const ele = <div tabIndex="0"></div>;

可以将一个 JavaScript表达式嵌在一个大括号 中作为属性值：

const ele = <img src={user.avatarUrl}></img>;
// 等价于
const ele = React.createElement("img", { src: user.avatarUrl });

注意：React DOM 结点使用 骆驼拼写法给属性命名 。React DOM在渲染之前默认会过滤所有传入的值。它可以确保应用不会被注入攻击。所有的内容在渲染之前都被转换成了字符串。这样可以 有效地防止XSS（跨站脚本攻击）。

• 一些相关注意事项  ?

1. 使用 JSX 时要引入 React 库。
2. 自定义组件首字母一定要大写。
3. 元素标签名不能使用表达式。
4. 在设置标签 style 属性的时候，要注意，我们是将一个描述 style 的对象以 JavaScipt 表达式的形式传入。因此应该 有 2 层大括号。<div style={{color:'red', margin:'10px auto'}}></div>
5. 添加类名时 使用 className，而不是 class。 
6. 在 label 辅助标签中的 for 属性，变为 htmlFor 去使用。
7. 在绑定函数时，类似 onclick 变为 onClick 。
8. 在 JSX 中 注释为 {/* 注释内容 */}。
9. 使用 骆驼拼写法给属性命名。

     。。。。。。