React的工程化/组件化开发

梳梳
97 阅读4分钟

image.png

image.png

image.png

image.png

image.png

image.png

React的工程化/组件化开发

  • React官方脚手架：create-react-app（默认把webpack的打包规则处理好）
  1. create-react-app基础运用

    • 安装脚手架

      npm i create-react-app -g 「mac前面要设置sudo」

    • 检查安装情况

      create-react-app --version

    • 基于脚手架创建React工程化的项目 $ create-react-app 项目名称

    • 项目名称要遵循npm包命名规范：使用“数字、小写字母、_”命名

    • 项目目录
      |- node_modules
      |- src：所以后续编写的代码，几乎都放在SRC下「打包的时候，一般只对这个目录下的代码进行处理」
      |- index.js
      |- public：放页面模板
      |- index.html
      |- package.json\

    • 一个React项目中，默认会安装：

      • react：React框架的核心
      • react-dom：React视图渲染的核心「基于React构建WebApp（HTML页面）」 ---> react-native：构建和渲染App的
      • react-scripts：脚手架把webpack打包的规则及相关的插件/LOADER等都隐藏到了node_modules目录下，是脚手架中自己对打包命令的一种封装，基于它打包，会调用node_modules中的webpack等进行处理！！
  • React是Web前端框架

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

      • 操作DOM比较消耗性能「主要原因就是：可能会导致DOM重排(回流)/重绘」
      • 操作起来也相对来讲麻烦一些
      • ... 数据驱动思想：
      • 我们不会在直接操作DOM
      • 我们去操作数据「当我们修改了数据，框架会按照相关的数据，让页面重新渲染」
      • 框架底层实现视图的渲染，也是基于操作DOM完成的
        • 构建了一套 虚拟DOM->真实DOM 的渲染体系
        • 有效避免了DOM的重排/重绘
      • 开发效率更高、最后的性能也相对较好

    • React框架采用的是MVC体系；Vue框架采用的是MVVM体系

      • MVC：model数据层 + view视图层 + controller控制层
        1. 我们需要按照专业的语法去构建视图（页面）：React中是基于jsx语法来构建视图的
        2. 构建数据层：但凡在视图中，需要“动态”处理的(需要变化的，不论是样式还是内容)，我们都要有对应的数据模型
        3. 控制层：当我们在视图中(或者根据业务需求)进行某些操作的时候，都是去修改相关的数据，然后React框架会按照最新的数据，重新渲染视图，以此让用户看到最新的效果！
      • “单向驱动”：数据驱动视图的渲染！！
        • 视图中的表单内容改变，想要修改数据，需要开发者自己去写代码实现！！
      • MVVM：model数据层 + view视图层 + viewModel数据/视图监听层
        1. 数据驱动视图的渲染：监听数据的更新，让视图重新渲染
        2. 视图驱动数据的更改：监听页面中表单元素内容改变，自动去修改相关的数据
        • “双向驱动”

JSX构建视图的基础知识

  • JSX：javascript and xml(html) 把JS和HTML标签混合在了一起
    1. vscode如何支持JSX语法「格式化、快捷提示...」
      • 创建的js文件，把后缀名设置为jsx即可，这样js文件中就可以支持JSX语法了
      • webpack打包的规则中，对.jsx这种文件，按照JS的方式进行处理的
    2. 在HTML中嵌入“JS表达式”，需要基于“{} 胡子语法”
      • JS表达式：执行有结果的
    3. 在ReactDOM.createRoot()的时候，不能直接把HTML/BODY做为根容器，需要指定一个额外的盒子「例如：#root」
    4. 每一个构建的视图，只能有一个“根节点”
      • 出现多个根节点则报错 Adjacent JSX elements must be wrapped in an enclosing tag.
      • React给我们提供了一个特殊的节点(标签)：React.Fragment 空文档标记标签 <></>， 既保证了可以只有一个根节点，又不新增一个HTML层级结构！！
    5. {}胡子语法中嵌入不同的值，所呈现出来的特点
      • number/string：值是啥，就渲染出来啥
      • boolean/null/undefined/Symbol/BigInt：渲染的内容是空
      • 除数组对象外，其余对象一般都不支持在{}中进行渲染，但是也有特殊情况:
        • JSX虚拟DOM对象
        • 给元素设置style行内样式，要求必须写成一个对象格式
        • 数组对象：把数组的每一项都分别拿出来渲染「并不是变为字符串渲染，中间没有逗号」
        • 函数对象：不支持在{}中渲染，但是可以作为函数组件，用方式渲染!!
    6. 给元素设置样式
      • 行内样式：需要基于对象的格式处理，直接写样式字符串会报错 
        <h2 style={{
   color: 'red',
   fontSize: '18px' //样式属性要基于驼峰命名法处理
 }}>
 ```
      • 设置样式类名：需要把class替换为className 
        <h2 className="box">

import React from 'react'; //React语法核心
import ReactDOM from 'react-dom/client'; //构建HTML(WebApp)的核心

//获取页面中#root的容器，作为“根”容器
const root = ReactDOM.createRoot(document.getElementById('root'));

//基于render方法渲染我们编写的视图，把渲染后的内容，全部插入到#root中进行渲染
root.render(
    ....
);
avatar
文章
阅读
粉丝