【react】react18的学习

一、安装

$ create-react-app [Project name]


• 默认支持sass

二、核心依赖

react&＃xff1a;react 核心

react-dom&＃xff1a;用于开发渲染web 应用&＃xff1b;

react-scripts&＃xff1a;封装webpack服务&＃xff1b;

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


react-native&＃xff1a;用于开发渲染 App 应用&＃xff1b;

三、暴露配置文件

$ yarn eject


新增文件

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

配置修改

1、解决严格模式eslint报错

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


常见配置修改

• 移除默认的 sass&＃xff0c;使用 less 替换&＃xff1b;config\webpack.config.js

• 增加别名&＃xff1a;&＃64;&＃61;&＃61;》src&＃xff1b;config\webpack.config.js

alias: {&＃39;&＃64;&＃39;: paths.appSrc,


• 修改端口号

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


• 修改浏览器兼容&＃xff1a;package.json&＃61;&＃61;>browserslist

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

• 配置开发环境代理

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


四、MVC和MVVM

react 思想

MVC&＃xff1a;model数据 &＃xff08;state&＃xff09;> view视图 > controller 控制器 > model数据

• 数据驱动视图&＃xff0c;

• 视图改变数据&＃xff0c;需要开发者手动实现&＃xff1b;

vue 思想

MVVM&＃xff1a;model数据 > viewModel 数据视图监听层 > view视图 > vm

双向驱动&＃xff1a;

• 数据驱动视图&＃xff1a;m > vm > v&＃xff0c;通过绑定

• 视图驱动数据&＃xff1a;v >vm >m&＃xff0c;通过监听

五、jsx

胡子语法{}&＃xff1a;必须是js表达式&＃xff1b;

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

底层机制

• 第一步&＃xff1a;将jsx语法编译成虚拟DOMvirtual DOM

• 第二步&＃xff1a;首次渲染将整个虚拟DOM渲染成真实DOM&＃xff1b;

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

• 相比原生dom操作&＃xff0c;多了首次生成虚拟dom的时间&＃xff1b;

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

编译插件

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