使用 Mobx + Hooks 管理 React 应用状态

时间:2022-4-22   作者:lininn   分类:   热度:339°    
时间:2022-4-22   分类:    热度:339  
Step 1️:创建一个 Store Model // ./src/stores/todo.ts import { action, observable, computed } from 'mobx'; export interface ITodo { id: number; name: string; desc: string; done?: boolean; } let id = 0; export class TodoStore { @observable todos: ITodo[] = []; // 利用计算属性计算完成个未完成个数 @compu...

阅读全文>>

vscode eslint

时间:2022-4-13   作者:lininn   分类:   热度:388°    
时间:2022-4-13   分类:    热度:388  
settings.json: "eslint.options": { "overrideConfig": { "env": { "browser": true, "es6": true }, "parserOptions": { "ecmaVersion": 2020, "sourceType": "module", "ecmaFeatures": { "jsx": true } }, "rules": { "no-debugger": "off" } } },

阅读全文>>

热门 MiniCssExtractPlugin less不能热更新

时间:2022-3-7   作者:lininn   分类:   热度:552°    
时间:2022-3-7   分类:    热度:552  
原本打包过后是css-in-js,配置完MiniCssExtractPlugin后,可以将css单独打包出来 配置 1,安装npm install --save-dev mini-css-extract-plugin 2,将style-loader替换成MiniCssExtractPlugin.loader (style.loader,支持HMR,但MiniCssExtractPlugin目前正在支持(还没)) 3,安装npm install --save-dev optimize-css-assets-webpack-...

阅读全文>>

热门 vite Uncaught ReferenceError: require is not defined

时间:2022-3-4   作者:lininn   分类:   热度:612°    
时间:2022-3-4   分类:    热度:612  
优先通过修改源代码来解决;修改后记得重启,有的依赖需重新处理 其次通过预构建或 CommonJS 插件处理; 为了解决这一问题,我对搜索到的数个 CommonJS 插件进行简单地试用,最终基于成熟、可靠、全面等几方面的考虑,采用 @rollup/plugin-commonjs 。 import commonjs from '@rollup/plugin-commonjs'; export default defineConfig({ plugins: [ commonjs...

阅读全文>>

TypeError: Cannot read property 'javascript' of undefined + terser webpack plugin + react js

时间:2022-1-19   作者:lininn   分类:   热度:495°    
时间:2022-1-19   分类:    热度:495  
Hi you are using Webpack 4 and Terser ^5.0.0. This version of Terser is for Webpack 5, you need to set version "terser-webpack-plugin": "^4.2.3", in package.json file 您正在使用Webpack 4和精简版^5.0.0。此版本的Terser适用于网页包5,您需要在软件包中设置版本“terser webpack plugin”:“^4.2.3”json文件

阅读全文>>

热门 element table表格闪动

时间:2021-11-16   作者:lininn   分类:   热度:668°    
时间:2021-11-16   分类:    热度:668  
1.el-table 增加99.9%的宽度 2.   .el-table__header,.el-table__body,.el-table__footer{ border-collapse: collapse!important; } 3. 将表格外层元素的width宽度减去滚动条的宽度就解决了 类似这样: <div :style={width: `calc(100% - ${scrollbarWidth})`}> <el-table/> </div> 4.el...

阅读全文>>

热门 React 性能优化之组件动态加载(react-loadable)

时间:2021-11-15   作者:lininn   分类:   热度:592°    
时间:2021-11-15   分类:    热度:592  
React 项目打包时,如果不进行异步组件的处理,那么所有页面所需要的 js 都在同一文件中(bundle.js),整个js文件很大,从而导致首屏加载时间过长。 所有,可以对组件进行异步加载处理,通常可以使用 React-loadable。 React-loadable 使用 例如,对于项目中的detail组件(/src/pages/detail/),在 detail 目录下新建 loadable.js: import React from 'react'; import Loadable from 'react-loadable'; const LoadableC...

阅读全文>>

返回顶部    首页    手机版本    后花园   会员注册   
版权所有:覆手为雨    站长: lininn