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 -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变量
}
});
}
})
)
}
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()
...
...
console.log(editContentInput)
6.函数组件中使用useEffect，每次useState修改其他数据，g2图表实例会被清除（原因：父组件数据改变，子组件会重新渲染）
使用memo包裹子组件函数
import {memo} from 'react'
const AComponent = memo(()=> {
})
7.全局Header组件中使用withRouter可在每次路由跳转获取页面路由信息
可用来控制Header组件的显示和隐藏
import {withRouter } from 'react-router-dom'
function Header () {
return (
)
}
export default withRouter(Header);
8.react div滚动条滚动到到最底部
import { useState,useRef } from 'react';
...
const scrollEle = useRef()
...
...
//元素滚动条滚动到底部
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注册了原生的事件后使用。
clickFunction(e)}>
...
function clickFunction (e) {
e.stopPropagation()
}
10.react操作dom元素
1.使用选择器：
import ReactDom from 'react-dom'
...
...
var span = document.getElementById('tip')
...
ReactDom.findDOMNode(span).style.color = 'red'
2.使用ref属性
...
this.refs.tip.style.color = "red"
3.hook函数组件中
import {useRef} from 'react'
const a = useRef()
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'
...
//添加类名
组件专属样式
//样式文件命名 index.module.css
.red {
color: red;
}
.blue-text {
color: blue;
}
//index.js组件中引入样式,xxx为自定义命名
import xxx from './index.module.css'
...
//添加类名
13.图片懒加载
react-lazyload
持续更新！！！