React是web前端框架

React是web前端框架

1. 目前市面上比较主流的前端框架
   1. React
   2. Vue
   3. Angular "NG"

主流思想：不在直接取操作DOM，而是改为“数据驱动思想”

操作DOM思想

• 操作DOM比较消耗性能“主要原因是：可能导致DOM重排（回流）/重绘”
• 操作起来相对来讲麻烦一些

数据驱动思想

• 我们不会直接操作DOM
• 我们去操作数据“当我们修改了数据，框架会按照相关的数据，让页面重新渲染”
• 框架底层实现的视图的渲染，也是基于操作DOM完成的
  • 构建了一套虚拟DOM->真实DOM的渲染体系
  • 有效避免了DOM的重排/重绘
• 开发效率更高、最后的性能也相对较好

2. 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标签混合在了一起（并不是我们之前玩的字符串拼接）

1. vscode如何支持JSX语法（格式化、快捷提示）

• 创建的js文件，我们把后缀设置为jsx即可，这样js文件中就可以支持JSX语法了
• webpack打包规则中，也会对.jsx这种文件，按照js的方式进行处理的

2. 在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>
);