【react】react18的学习

一、安装

$ create-react-app [Project name]

• 默认支持sass

二、核心依赖

react：react 核心

react-dom：用于开发渲染web 应用；

react-scripts：封装webpack服务；

    "start": "react-scripts start",// 开发环境"build": "react-scripts build",// 生产环境打包"test": "react-scripts test",// 单元测试"eject": "react-scripts eject"// 暴露配置，用于自定义修改

react-native：用于开发渲染 App 应用；

三、暴露配置文件

$ yarn eject

新增文件

• config 文件夹：react框架webpack的配置
• scripts 文件夹：项目运行的构建脚本文件

配置修改

1、解决严格模式eslint报错

// package.json 
"babel": {"presets": [["babel-preset-react-app",false],"babel-preset-react-app/prod"]}

常见配置修改

• 移除默认的 sass，使用 less 替换；config\webpack.config.js

• 增加别名：@==》src；config\webpack.config.js

alias: {'@': paths.appSrc,

• 修改端口号

// scripts\start.js
const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
const HOST = process.env.HOST || '0.0.0.0';
// 方式一：直接修改
const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 9527;
const HOST = process.env.HOST || '127.0.0.1';
// 方式二：修改环境变量 process.env
// 安装：yarn add cross-env
// 修改启动脚本："start": "cross-env PORT=9527 node scripts/start.js",

• 修改浏览器兼容：package.json==>browserslist

// 这里可以实现对【postcss-loader:控制css3的前缀】生效
// 这里可以实现对【babel-loader:控制ES6的转换】生效
// 还有一个ES6内置API的转换需要额外配置【@babel/polyfill】；
方式一：在入口文件之间引入该依赖包；
方式二：使用提供的react-app-polyfill（react对上面依赖包的重写）
// 入口文件引入

• 配置开发环境代理

// src\setupProxy.js
// yarn add http-proxy-middleware
// vue 代理devServer: {port: 8080, // 本地跑的端口，默认是8080，proxy: {"/api": {  // 请求路径中含 /apitarget: "http://localhost:9000", 目标服务器},},}
//react 代理
const { createProxyMiddleware } = require('http-proxy-middleware')
module.exports = function (app) {app.use(createProxyMiddleware('/jian', {target: 'https://www.jianshu.com/asimov',changeOrigin: true,ws: true,pathRewrite: { '^/jian': '' },}));app.use(createProxyMiddleware('/zhi', {target: 'https://news-at.zhihu.com/api/4',changeOrigin: true,ws: true,pathRewrite: { '^/zhi': '' },}));
}

四、MVC和MVVM

react 思想

MVC：model数据 （state）> view视图 > controller 控制器 > model数据

• 数据驱动视图，

• 视图改变数据，需要开发者手动实现；

vue 思想

MVVM：model数据 > viewModel 数据视图监听层 > view视图 > vm

双向驱动：

• 数据驱动视图：m > vm > v，通过绑定

• 视图驱动数据：v >vm >m，通过监听

五、jsx

胡子语法{}：必须是js表达式；

• number/string：原样输出，其他基本类型显示为空；
• 对象：数组纯数字可以，其他报错
• 行内样式：style={{fontSize:“12px”}}；驼峰命名；
• 类名：className=“box”
• 常用写法：
  • 三元运算符（判断）；
  • Array.map()（循环）返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值；不会改变原始数组；

底层机制

• 第一步：将jsx语法编译成虚拟DOMvirtual DOM

• 第二步：首次渲染将整个虚拟DOM渲染成真实DOM；

• 第三步：后续数据改变，通过dom-diff算法进行新老虚拟dom对比，以最少的修改操作真实DOM打补丁；

• 相比原生dom操作，多了首次生成虚拟dom的时间；

• 后续页面修改就比原生快了，所以框架用于页面交互的项目，静态页面没必要用；

编译插件

• babel-preset-react-app
• 此插件，将jsx标签内容解析为React.createElement([元素标签名],[属性对象],[元素子节点]...)
• createElement()方法执行后生成一个对象：即虚拟DOM={}，也有人称之为：JSX对象、JSX元素、ReactChild对象等
• 可在Babel官网在线解析生成；