JSX

一、概念

　　1、JS：JavaScript 是一种直译式脚本语言

　　2、JSX  JavaScript XML 是一种在React组件内部构建标签的类XML语法，（像在js中写html）。

　　3、XML 是EXtensible Marku Language 的缩写，它是一种类似于HTML的标记语言，称为可扩展标记语言。所谓可扩展，指的是用户可以按照XML规则自定义标记。

　　4、React 自创了JSX语法，是一个 JavaScript 的语法扩展，官方建议在 React 中配合使用 JSX 来替代原始的 JS。因为JSX 可以更好的描述 UI 应该呈现出它应有交互的本质形式。JSX 看起来有点类似模版语言，但它具有 JavaScript 的全部功能。

　　5、JSX优点：JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。它是类型安全的，在编译过程中就能发现错误。使用 JSX 编写模板更加简单快速。

 

二、JS语法与JSX语法的区别

　　1、js中渲染一段html：

import React from 'react';
function App() {
  return '<div><h1>HELLO WORD</h1></div>' //加上单引号或双引号
}
export default App;
// 运行不起来

　　

import React from 'react';
function App() {
  return <div><h1>HELLO WORD</h1></div>    //JSX语法不用加引号
}
export default App;

-------
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';   //引入自己定义的组件，

ReactDOM.render(<App />,/*以标签的形式书写定义的组件，首字母要大写*/ document.getElementById('root'));

// 在React中当一个标签是以大写字母开头的，那么一般都是组件。否则可能就是html

三、JSX语法的使用

　　1、代码中嵌套多个 HTML 标签，但注意最外层需要使用一个 div 元素包裹它。

　　2、jsx中嵌入表达式：声明了一个名为 name 的变量，然后在 JSX 中使用它，并将它包裹在花括号中。（用花括号）

　　3、可以在 if 语句和 for 循环的代码块中使用 JSX，将 JSX 赋值给变量，把 JSX 当作参数传入，以及从函数中返回 JSX。

 

　　4、JSX特定属性：可以通过使用引号，来将属性值指定为字符串字面量；也可以使用大括号，来在属性值中插入一个 JavaScript 表达式。但是引号或大括号只能选择一种，不能同时使用。

　　5、注意：JSX 语法上更接近 JavaScript 而不是 HTML，所以 React DOM 使用 camelCase（小驼峰命名）来定义属性的名称，而不使用 HTML 属性名称的命名约定。

　　6、JSX对象编译：Babel 会把 JSX 转译成一个名为 React.createElement() 函数调用。并且React.createElement() 会预先执行一些编译检查，以帮助你编写无错代码。

// 写法1
const ele = (
  <h1 className="red">hello world</h1>
)

// 写法2
const ele = React.createElement(
  'h1',
  {className: 'red'},
  'hello world'
)

// 编译后简化代码，上两种写法效果一致
const ele = {
  type: 'h1',
  props: {
    className: 'red',
    children: 'hello world'
  }
}

　　

　　7、JSX防注入攻击：React DOM 在渲染所有输入内容之前，默认会进行转义。它可以确保在你的应用中，永远不会注入那些并非自己明确编写的内容。所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止 XSS（cross-site-scripting, 跨站脚本）攻击，使你在 JSX 当中插入用户输入内容更安全。