1.跨域配置
npm i http-proxy-middleware -S
项目src中新建文件setupProxy.js，名字不能更改，必须是这个
//setupProxy.js内容
const proxy = require('http-proxy-middleware')
module.exports = function(app) {
app.use(
proxy.createProxyMiddleware('/api', {
target: process.env.REACT_APP_BASE_URL, //你需要访问的地址
changeOrigin: true,
// secure: false,
pathRewrite: {'^/api': ''}
})
)
}
2.自定义覆盖webpack配置
npm i customize-cra react-app-rewired -S
项目根目录新建文件config-overrides.js，名字不能更改，必须是这个
//injectBabelPlugin
const { override, addDecoratorsLegacy, addWebpackAlias, addWebpackResolve, fixBabelImports, adjustStyleLoaders, addLessLoader } = require("customize-cra");
const path = require('path')
process.env.GENERATE_SOURCEMAP = "false";
module.exports = {
webpack: override (
// 路径别名
addWebpackAlias({
'@': path.resolve(__dirname, 'src')
}),
// 导入文件的时候可以不用添加文件的后缀名
addWebpackResolve({
extensions: ['.tsx', '.ts', '.js', '.jsx', '.json', '.css', '.scss']
}),
// 装饰器
addDecoratorsLegacy(),
// antd按需加载
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: true
}),
// antd定制化主题
addLessLoader({
lessOptions:{
javascriptEnabled: true,
modifyVars: { '@primary-color': '#5FE0B7' }
}
}),
adjustStyleLoaders(rule => {
if (rule.test.toString().includes("scss")) {
rule.use.push({
loader: require.resolve("sass-resources-loader"),
options: {
resources: "./src/styles/var.scss" //公共scss变量
}
});
}
})
)
}
更改 package.json 中的 scripts 配置，如下所示。即用 react-app-rewired命令代替 react-scripts
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-app-rewired eject"
},
3.react-router-cache-route缓存路由
配合react v17版本和react-dom v17版本使用报错，解决办法使用16.13.1版本的react和react-dom
4. react-scripts react-app-rewired 配置多环境运行命令
1.dotenv
安装工具dotenv-cli
在根目录下新建文件
// .env.development 开发的配置文件
REACT_APP_BASE_URL=https://xxxxx
REACT_APP_ENV=development
// .env.test 测试的配置文件
REACT_APP_BASE_URL=https://xxxxx
REACT_APP_ENV=test
// .env.production 生产的配置文件
REACT_APP_BASE_URL=https://xxxxx
REACT_APP_ENV=production
修改package.json中的scripts指定环境
"build:dev": "dotenv -e .env.development react-app-rewired build",
"build:pro": "dotenv -e .env.production react-app-rewired build",
使用
html中：%REACT_APP_ENV%
js/jsx中：可以在process.env中访问
2.cross-env
安装 cross-env
npm install cross-env -D
或
yarn add cross-env -D
package.json 的 scripts 里面添加代码
"start:dev": "cross-env REACT_APP_ENV=development react-app-rewired start",
"start:test": "cross-env REACT_APP_ENV=test react-app-rewired start",
"start:prod": "cross-env REACT_APP_ENV=production react-app-rewired start",
通过使用REACT_APP_ENV就可以获取到不同环境的变量，根据此变量就可以设置不同环境的地址。
参考：https://www.jianshu.com/p/779e4fb250af
5. 函数组件中ref使用方法
import {useRef } from 'react';
...
const editContentInput = useRef()
...
<div ref={editContentInput} />
...
console.log(editContentInput)
6.函数组件中使用useEffect，每次useState修改其他数据，g2图表实例会被清除（原因：父组件数据改变，子组件会重新渲染）
使用memo包裹子组件函数
import {memo} from 'react'
const AComponent = memo(()=> {
})
扩展：memo useMemo useCallback的区别
7.全局Header组件中使用withRouter可在每次路由跳转获取页面路由信息
可用来控制Header组件的显示和隐藏
import {withRouter } from 'react-router-dom'
function Header () {
return (
<div></div>
)
}
export default withRouter(Header);
8.react div滚动条滚动到到最底部
import { useState,useRef } from 'react';
...
const scrollEle = useRef()
...
<div ref={scrollEle}></div>
...
//元素滚动条滚动到底部
function scrollToBottom (ele) {
if (ele && ele.current) {
const scrollHeight = ele.current.scrollHeight;//里面div的实际高度
const height = ele.current.clientHeight; //网页可见高度
const maxScrollTop = scrollHeight - height;
ele.current.scrollTop = maxScrollTop > 0 ? maxScrollTop : 0;
}
}
scrollToBottom(scrollEle)
9.阻止默认事件
//在react中，阻止事件冒泡有两种形式：
//1、e.stopPropagation() 在没有涉及到原生事件注册只有react事件时使用。
//2、e.nativeEvent.stopImmediatePropagation() 用document.addEventListener注册了原生的事件后使用。
<div onClick={(e)=>clickFunction(e)}></div>
...
function clickFunction (e) {
e.stopPropagation()
}
10.react操作dom元素
1.使用选择器：
import ReactDom from 'react-dom'
...
<span id='tip'></span>
...
var span = document.getElementById('tip')
...
ReactDom.findDOMNode(span).style.color = 'red'
2.使用ref属性
<span ref='tip'></span>
...
this.refs.tip.style.color = "red"
3.hook函数组件中
import {useRef} from 'react'
const a = useRef()
<span ref={a}></span>
console.log(a)
11. react使用ant input组件，onChange事件获取输入框值
e.persist();
12.react组件专属样式（效果等同vue style标签的scoped）
普通方式(教程默认js和css文件同级目录)：
//index.css样式文件
.red {
color: red;
}
//index.js组件中引入样式
import './index.css'
...
//添加类名
<div className='red'></div>
组件专属样式
//样式文件命名 index.module.css
.red {
color: red;
}
.blue-text {
color: blue;
}
//index.js组件中引入样式,xxx为自定义命名
import xxx from './index.module.css'
...
//添加类名
<div className={xxx.red}></div>
<div className={xxx['blue-text']}></div>
13.图片懒加载
react-lazyload
14.React类式组件和函数式组件的区别有哪些呢？
主要要以下几个区别：
（1）语法不同、设计思想不同
（2）生命周期、状态变量
（3）复用性：
（4）优缺点
一、语法不同、设计思想不同
函数式组件是函数式编程思想，而类组件是面向对象编程思想。面向对象编程将属性和方法封装起来，屏蔽很多细节，不利于测试。
二、生命周期、状态变量
类式组件：使用state对象定义状态变量，有诸如componmentDidMount、shouldComponentUpdate等生命周期钩子函数；
函数式组件：没有this,使用一系列的内置hooks实现对应的功能，比如使用useState创建状态变量，使用useEffect实现类似于componmentDidMount、shouldComponentUpdate等生命周期钩子函数的功能。
三、复用性
类式组件：使用hoc（高阶组件）、render propss实现组件的逻辑复用、拓展组件的功能。
函数式组件：使用自定义hooks实现组件的逻辑复用。
四、优缺点
函数式组件：
优点：
相对于类式组件，一般情况而言，代码量更少，代码更简洁，可读性更强；
更易于拆分组件和测试；
缺点：
在业务逻辑巨复杂，状态依赖关系错乱的情况下，使用useEffect、useMemo等hooks，对其依赖项数组的思考为开发者带来了更大的心智负担；
不具备处理错误边界等业务情况的hooks；
类式组件：
优点：
功能完备，具有componentDidsCatch、getDerivedStateFromError等钩子函数处理边界错误；
缺点：
在复用性上，hoc组件等会出现诸如嵌套地狱、重名props被覆盖、难以拆分和测试等问题；
五、总结
类式组件和函数式组件各有其优点，关键是看自己的需求是什么；如果你开发的业务逻辑和状态并不复杂，那么函数式组件可能会更合适；
但是如果你要处理错误边界或者是业务逻辑巨复杂的情况，那么类式组件更合适；
持续更新！！！
