React是web前端框架

 前端   大苹果   2023-12-05 17:30   124

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>
);