初识 React 与 JSX
加载引入
- 基于浏览器 \<script\> 的模式
- 基于自动化的集成环境模式
基于浏览器 \<script\> 的模式
React.js 框架本身包含两个部分
- react.js：提供 React.js 核心功能代码，如：虚拟 dom，组件
- react-dom.js：提供了与浏览器交互的 DOM 功能，如：dom 渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="./js/react.production.min.js"></script>
<script src="./js/react-dom.production.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
XSS
为了有效的防止 `XSS` 注入攻击，`React DOM` 会在渲染的时候把内容（字符串）进行转义，所以字符串形式的标签是不会作为 `HTML` 标签进行处理的
ReactDOM.render
ReactDOM.render(element, container[, callback])
element：要渲染的内容
container：要渲染的内容存放容器
callback：渲染后的回调函数
编程范式
就是编程的一种模式，比较流行的一些编程范式
- 命令式编程
- 声明式编程
- 函数式编程
- ......
命令式编程
告诉计算机怎么做（How？） - 过程
在前面的原生 WebComponent 中，我们 UI 的构建是使用了命令式的编程方式来完成的
声明式编程
告诉计算机我们要什么（What？） - 结果
React.js 中的声明式 UI
使用 JSX 加载babel：语法转换工具
引入JSX解析库
babel-standalone.js：在浏览器中处理JSX
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel" src="js/app.js"></script>
> 注意：如果包含或引入的代码中包含JSX，需要设置 `script` 标签的 `type` 属性为：text/babel
`JSX` 是一个基于 `JavaScript` + `XML` 的一个扩展语法
- 它可以作为 `值` 使用
- 它并不是 `字符串`
- 它也不是 `HTML`
- 它可以配合 `JavaScript 表达式` 一起使用
DOM对象与 Virtual DOM
DOM 对象
浏览器会把页面中的元素映射为 JavaScript 中的对象，在 JavaScript 中通过对这些对象的访问来获取页面中对应元素及其内容。
同时，对这些对象进行某些操作，又会反馈到页面中对应的元素上面。
但是，原生 JavaScript DOM 对象内容和结构太复杂，有很多的特性是我们平时很少用到的，而且我们对对象的操作会立即反馈
到页面（渲染），影响性能
虚拟 DOM
virtual DOM，参考原生 DOM 对象构建的一个对象，它的结构足够简单，同时优化渲染逻辑，减少变化带来的渲染性能影响
JSX语法规则
结构
每一个独立 `JSX` 结构的顶层有且只能有一个顶级父元素
在JSX中嵌入表达式
在 `JXS` 中可以使用 <u>{表达式}</u> 嵌入`JavaScript`表达式
表达式：产生值的一组代码的集合
- 变量
- 算术运算
- 函数调用
- ……
JSX语法示例
在 `JSX` 中，表达式输出的内容类型与使用位置也有一些区别
JSX中的注释
输出数据类型
- 字符串、数字：原样输出
- 数组：转成字符串，数组.join('')
- 使用 空字符串 而不是默认的 逗号 连接
- 其它对象不能直接输出
- 布尔值、空、未定义 会被忽略
在属性上使用 表达式
JSX 中的表达式也可以使用在属性上，但是使用的时候需要注意
- 当在属性中使用 { } 的时候，不要使用引号包含
JSX 更偏向 JavaScript， 所以对于一些特殊的属性，使用的是 JavaScript 中的属性名风格
为了更加方法的操作元素的 style，针对 style 这个属性有特殊的处理
这里的两个 {{}} ，外部的大括号表示的是前面说的表达式语法中的大括号，里面的大括号是表示对象的大括号
列表渲染
如果需要渲染一组数据，我们可以通过遍历（数组遍历、对象变量……）等操作，返回一组 JSX
数据
数组
对象
key
默认情况下，React 从性能上考虑，会尽可能的复用结构，针对 同组可变列表 结构，为了避免出现某些方面的问题，通常会给
每一个列表添加一个 唯一的 key
条件渲染
三元运算符
与或运算符
网友评论