React是web前端框架
- 目前市面上比较主流的前端框架
- React
- Vue
- Angular "NG"
主流思想：不在直接取操作DOM，而是改为“数据驱动思想”
操作DOM思想
- 操作DOM比较消耗性能“主要原因是：可能导致DOM重排（回流）/重绘”
- 操作起来相对来讲麻烦一些
数据驱动思想
- 我们不会直接操作DOM
- 我们去操作数据“当我们修改了数据，框架会按照相关的数据，让页面重新渲染”
- 框架底层实现的视图的渲染，也是基于操作DOM完成的
- 构建了一套虚拟DOM->真实DOM的渲染体系
- 有效避免了DOM的重排/重绘
- 开发效率更高、最后的性能也相对较好
- React框架采用的是MVC体系；Vue框架采用的是MVVM体系；
MVC: M是model，是数据层，V是View视图层 + C是controller是控制层
- 我们需要安照专业的语法去构建视图（页面）：React中基于jsx语法来构建视图的
- 构建数据层：但凡在视图中，需要“动态”处理的（获取需要变化的，不论是样式还是内容），我们都需要有对应的数据模型
- 控制层：当我们在视图中（或者根据业务需求）进行某些操作的时候，都是去修改相关的数据，然后React框架会按照最新的数据，重新渲染视图，以此让用户看到最新的效果，
- 数据驱动视图的渲染，
- 视图中的表单内容改变，想要修改数据，需要开发者自己去写代码实现！！
- “单向驱动”
MVVM: M是model，是数据层，V是View视图层 +VM是viewModel数据/视图监听层
- 数据驱动视图的渲染：修改数据，视图会跟着更新
- 视图驱动数据的更改：监听页面中表单元素内容改变，自动去修改相关的数据
- “双向驱动”
JSX构建视图的基础知识
JSX: javascript and xml(html)把js和html标签混合在了一起（并不是我们之前玩的字符串拼接）
- vscode如何支持JSX语法（格式化、快捷提示）
- 创建的js文件，我们把后缀设置为jsx即可，这样js文件中就可以支持JSX语法了
- webpack打包规则中，也会对.jsx这种文件，按照js的方式进行处理的
- 在html中嵌入“JS表达式”，需要基于“{}胡子语法“
- JS表达式：执行有结果的
- JS表达式 {text}, 数学运算 {i+1} -> {2} {x+y}
- 判断：三元运算符 {1 === 1 ？ ok : no}
- 循环：借助于数组的迭代方法处理“map”
- 这不算js表达式
if (i === 1) { } switch(num) {} 所有命令式编程的循环 “for” for/in for/of while等 { for（let i = 0; i<=10; i++）{ } }
在ReactDom.createRoot()的时候，不能直接把HTML/BODY作为根容器，需要指定一个额外的盒子“例如：#root”
每一个构建的视图，只能有一个“根节点”
- 出现多个根节点时会报错提示 Adjacent JSX elements must be wrapped in an encloseing tag.
- React给我们提供了一个特殊的节点（标签）：React.Fragment 空文档标记标签
<></>
既保证了可以只有一个根节点，又不会新增一个HTML层级结构！！- {}胡子语法中嵌入不同的值，所呈现出来的特点
- number/string: 值是啥，就渲染出来啥
- boolean: 渲染的内容是空
- 除数组对象外，其余对象一般不支持在{}中进行渲染，但是也有特殊情况；
- JSX虚拟DOM对象
- 给元素设置style行内样式，要求必须写成一个对象格式
- 不支持渲染：普通对象
- 数组对象：把数组的每一项都分别拿出来渲染“并不是变为字符串渲染，中间没有逗号”
- 函数对象：不支持在{}中渲染，但是可以作为函数组件，用
<Componet/>方式渲染- 给元素设置样式
行内样式：需要基于对象的格式处理，直接写样式字符串会报错
<h2 style={{ color: 'red', fontSize: '18px' // 样式属性要基于驼峰命名法处理 }}>设置样式类名：需要把class替换为className
<h2 className='box'>
import React from 'react'; // React核心语法
import ReactDOM from 'react-dom/client'; //构建HTML(WebApp)的核心
// 获取页面中id为root的容器，作为“根“容器
const root = ReactDOM.createRoot(document.getElementById('root'));
// 基于render方法渲染我们编写的视图
root.render(
<div>完美起航</div>
);