React是web前端框架

 后端   大苹果   2023-12-05 17:30   194
  React JavaScript

React是web前端框架

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

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

操作DOM思想

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

数据驱动思想

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