React - 02 React的工程化/组件化开发

标签：02 react 渲染 DOM 视图 React 工程化数据

我们可以基于webpack自己去搭建一套工程化打包的架子，但是这样非常的麻烦/复杂；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目录下，react-scripts就是脚手架中自己对打包命令的一种封装，基于它打包，会调用node_modules中的webpack等进行处理！！

React是Web前端框架 1.目前市面上比较主流的前端框架

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

2.MVC与MVVM

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

MVC：model数据层 + view视图层 + controller控制层

@1 我们需要按照专业的语法去构建视图（页面）：React中是基于jsx语法来构建视图的

@2 构建数据层：但凡在视图中，需要“动态”处理的(需要变化的，不论是样式还是内容)，我们都要有对应的数据模型

@3 控制层：当我们在视图中(或者根据业务需求)进行某些操作的时候，都是去修改相关的数据，然后React框架会按照最新的数据，重新渲染视图，以此让用户看到最新的效果！数据驱动视图的渲染！！视图中的表单内容改变，想要修改数据，需要开发者自己去写代码实现！！ “单向驱动”

MVVM：model数据层 + view视图层 + viewModel数据/视图监听层

@1 数据驱动视图的渲染：监听数据的更新，让视图重新渲染

@2 视图驱动数据的更改：监听页面中表单元素内容改变，自动去修改相关的数据 “双向驱动”

3.jsx构建视图的基础知识

JSX构建视图的基础知识 JSX：javascript and xml(html) 把JS和HTML标签混合在了一起「并不是我们之前玩的字符串拼接」

@1 vscode如何支持JSX语法「格式化、快捷提示...」

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

@2 在HTML中嵌入“JS表达式”，需要基于“{} 胡子语法”

JS表达式：执行有结果的变量/值({text}) 数学运算({x+y}) 判断(三元表达式、逻辑或与) 循环：借助于数组的迭代方法如map、filter等有返回值的

@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：渲染的内容是空
除数组对象外，其余对象(普通对象、日期对象、正则对象、函数对象、Number对象、String对象)一般都不支持在{}中进行渲染，但是也有特殊情况:
JSX虚拟DOM对象
给元素设置style行内样式，要求必须写成一个对象格式
数组对象：把数组的每一项都分别拿出来渲染「并不是变为字符串渲染，中间没有逗号」
函数对象：不支持在{}中渲染，但是可以作为函数组件，用方式渲染!!
...

@6 给元素设置样式

行内样式：需要基于对象的格式处理，直接写样式字符串会报错 + 设置样式类名：需要把class替换为className

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

React - 02 React的工程化/组件化开发_react