一、概念
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 当中插入用户输入内容更安全。