前言

概述

目前主流的前端框架之一（世占第一(stackoverflow可查)）。
核心思想：MVC

MVC：数据驱动视图

M：Model（数据层）
V：View（视图层）
C：Controller（控制层），内部逻辑，实现数据驱动视图。
- 一般包含虚拟DOM
- 有效减少DOM的重排、重绘。
优点：开发效率更高，且性能相对提高（虚拟DOM减少真实DOM渲染）。
特点：单向数据流，React默认没有实现双向数据改变。

Vue & React

Vue：MVVM的架构模型（双向数据流）。内置语法糖（v-model）实现双向数据流（数据驱动视图，视图修改也可改变数据）。
React：MVC的架构模型（单向数据流）。默认没有实现数据双向绑定的语法糖，需要开发者自己手动监听实现。

版本差

react16：大部分公司在用的版本
react17：与react16语法基本一致，底层代码优化了。
react18：目前的主流推荐版本（通过脚手架生成的项目默认都是18）。

基于脚手架创建项目

安装脚手架npm i create-react-app -g
创建项目create-react-app 项目名称（小写字母、数字、_。）
默认安装的依赖
- react：react框架的核心，类似Vue3中的effect
- react-dom：渲染视图的核心（基于该依赖构建webapp，即浏览器）。
- babel-preset-react-app：对原有的babel-preset-env重写，让其支持JSX语法编译。
- react-scripts:脚手架为了让项目目录看起来干净一些，把webpack打包的规则及相关的plugin/loader等都隐藏到了node_modules目录下，react-scripts就是脚手架中自己对打包命令的-种封装，基于它打包，会调用node_modules中的webpack等进行处理!!
  - 安装react项目打包、运行所需依赖。见于：app/package.json。
  - 封装react项目打包、运行的webpack配置。见于：app/config/。
  - 封装react项目打包、运行的script标签具体运行逻辑。见于：app/scripts/。
- 扩展：react-native（默认不安装），这是构建手机app的。
- 理解：
  - react跟Vue3的结构不同，Vue3是自定义dom操作即可适配平台，react是将两者拆分开并不默认安装。
  - 对项目的操作（run、build、test等），都是基于react-scripts的。

跨域处理

新建src/setupProxy文件：

注意点

package.json.scripts.eject：暴露react默认的webpack配置，一旦暴露，无法复原（在真实场景中一般选择暴露并修改）。
- 默认情况下，react会将若干配置封装至react-scripts中，并由该依赖启动、打包项目。
- 暴露的配置说明：
  - /app/package.json
  - /app/config
  - /app/scripts

index.js理解

// React语法核心
import React from "react";

// 构建HTML视图（webapp）的核心
import ReactDOM from "react-dom/client";

// 获取真实DOM：#root。并将该DOM作为根入口（容器）渲染
// 注：不能以HTML或者BODY作为容器
const root = ReactDOM.createRoot(document.getElementById("root"));
// 基于render方法渲染root。
// render构建视图时只能有一个根节点。
root.render(
// 空文档标记标签，不会新增层级结构，一般用于占位(React.Fragment)
// React.StrictModel：react的严格模式，开启后一些废弃的或者不规范的API不可用（会报错）
// 一般不建议使用，早期开发的语法不符合该模式。
  <>
    <div>xxx</div>
    <button>btn</button>
  </>
);

JSX语法

概述

React专属构建视图语法

JSX：javascript and xml，将JS与HTML混合在一起的语法。
XML：与html类似，但是可以自定义标签并自定义解析规则。

表达式引用语法：{ JS表达式 }

JS表达式：
- 变量：{str}
- 数学运算：{ x+y }
- 判断：{ x == 1 ? 'ok' : 'no'}
- 循环：借助有执行结果的数组迭代方法：如map

渲染表达式细节

正常渲染：字符串、数字
渲染为空：true、false、undefined、null、void、Symbol、bigInt
复杂数据
- 不支持渲染的对象：普通对象、正则对象、日期等（除数组对象外，一般不支持，除了JSX虚拟DOM）。
- 数组：将每一项都拿出来（渲染在一个元素中，join('')），再渲染，若数组中有对象，则报错。
- 函数：不支持函数对象渲染，但是可以作为函数式组件渲染。

语法细节

行内样式(style)设置：需要用大括号包裹，若非变量则需要双大括号，且需要用大驼峰语法。
样式类名：class => className

<div className="demo" style={{fontSize:'16px';}}></div>

JSX底层编译逻辑

创建虚拟DOM

基于babel-preset-react-app把JSX语法编译为JS语法：
再通过React语法创建虚拟DOM(virtual Dom，也称JSX对象、JSX元素)：React.createElement(ele,props,children)
- ele：元素标签名/组件。
- props：元素的属性集合（若无任何属性则为null）。
- children：第三个及以后的参数，均视为元素子节点或者文本内容。