随笔分类 - react
摘要：方法1：那就按照字符串来配置 方法2：http-proxy-middleware 插件。 npm install http-proxy-middleware --save 然后在src目录下创建一个setupProxy.js文件。内容如下： const { createProxyMiddleware
阅读全文
摘要：在项目根目录新建.env文件（环境变量） //关闭source map GENERATE_SOURCEMAP=false //关闭自动打开浏览器 //BROWSER=none //本地host HOST=m.loubei.com //本地端口 PORT=80 本地hosts文件添加 127.0.0.
阅读全文
摘要：tsconfig.json添加： "baseUrl": ".", "paths": { "@/*": ["src/*"], "@assets/*": ["src/assets/*"], // css, html中需要 `~@assets/*` } config/webpack.config.js f
阅读全文
摘要：调整图片组件封装： import './index.scss' const ZoomImage = (props) => { const imageStyle = { backgroundImage: `url(${props.url})` } return ( <> <div className=
阅读全文
摘要：npm i sass-resources-loader --save-dev webpack.config.js添加配置： __dirname:当前文件路径 { test: sassRegex, exclude: sassModuleRegex, use: [...getStyleLoaders(
阅读全文
摘要：npm install -g create-react-app npx create-react-app my-app 1.npm run eject 2.html计算 <script> !(function (win, doc) { function setFontSize() { var bas
阅读全文
摘要：多个不同输入框共用一个方法时使用useCallback: params = initParams = {code: "code_test", name: "name_test"} const onInputChange = React.useCallback((e: React.ChangeEven
阅读全文
摘要：1. initialize project create a folder project Now we’ll turn this folder into an npm package. This creates a package.json file with default values. 2.
阅读全文
摘要：1. 测试类型 单元测试：指的是以原件的单元为单位，对软件进行测试。单元可以是一个函数，也可以是一个模块或一个组件，基本特征就是只要输入不变，必定返回同样的输出。一个软件越容易些单元测试，就表明它的模块化结构越好，给模块之间的耦合越弱。React的组件化和函数式编程，天生适合进行单元测试 功能测试：
阅读全文
摘要：useCallback把匿名回调“存”起来 避免在component render时候声明匿名方法，因为这些匿名方法会被反复重新声明而无法被多次利用，然后容易造成component反复不必要的渲染。 在Class component当中我们通常将回调函数声明为类成员： 使用useCallback h
阅读全文
摘要：useModal: use:
阅读全文
摘要：import * as _ from "lodash"; import paramCache from "../common/param-cache" import RequestPromise from "./axios-service/RequestPromise"; export const fetchSystemParams = () => { return RequestPr...
阅读全文
摘要：1、system-params-service 2、param-type (filter) 3、param-select component
阅读全文
摘要：define basic data: declare reducer: define useAsyncTable 传入相应的参数，通过userReducer执行不一样的action更新state数据，使用useEffect监听数据发生变化重新渲染页面 useEffect 监听请求 return re
阅读全文
摘要：define interface: use in Function Component:
阅读全文
摘要：import toastr @types/toastr toastr.ts @import "~toastr/build/toastr.min.css"; use:
阅读全文
摘要：define interface: useState: update imageId && imageSrc: antd inputchange: antd form onsubmit add window resizeLitener
阅读全文
摘要：Install Jest 1、install jest dependencies 2、jest.config.js 3、test jest foo.ts foo.test.ts Install Enzyme 1、install enzyme dependencies 2、configue enzym
阅读全文
摘要：1、webpack.config.js 2、tsconfig.json 3、declare images.d.ts 4、webpack.config.js 5、import * as Img from "./path/to/image.png";
阅读全文
摘要：Initialize the project create a folder project Now we’ll turn this folder into an npm package. This creates a package.json file with default values. I
阅读全文
