- 博客(70)
- 收藏
- 关注
RSS订阅原创 bind, call, apply 区别
不同点：bind是创建一个新的函数，而call和aplay是用来调用函数；call和apply作用一样，只不过call为函数提供的参数是逗号分割，而apply为函数提供的参数是一个数组。相同点：call、apply和bind都是JS函数的公有的内部方法，他们都是重置函数的this，改变函数的执行环节。apply() 里面传递时指向的对象及参数数组(会自动调用)call() 里面传递的是指向的对象和参数(会自动调用)bind() 里面传递的是对应指向的对象。
2024-07-18 16:12:09
171
原创 Electron 进程间通信
invoke（render 发送）handle（main 监听）send （render 发送）on （main 监听）
2024-07-11 16:23:38
336
原创 React 自定义 Hook
假如有两个组件都需要获取网络状态，我们可以取逻辑到自定义 Hook 中，避免代码重复import { useOnlineStatus } from './useOnlineStatus.js';function StatusBar() { const isOnline = useOnlineStatus(); return <h1>{isOnline ? '✅ Online' : '❌ Disconnected'}</h1>;}function SaveBu
2024-06-21 14:31:30
314
原创 React useEffect 执行时机
如果 React 的所有依赖项都与上次渲染时的值相同，则将跳过本次 Effect。默认情况下，Effect 在每次渲染（包括初始渲染）后运行。
2024-06-20 18:00:11
303
原创 React useRef 组件内及组件传参使用
将 ref 放在自定义组件上，默认情况下会得到 null。因为默认情况下，React 不允许组件访问其他组件的 DOM 节点。手动操作另一个组件的 DOM 节点会使你的代码更加脆弱。想要暴露其 DOM 节点的组件必须选择该行为。一个组件可以指定将它的 ref “转发”给一个子组件。
2024-06-18 16:10:44
335
原创 React useContext
组件会使用 UI 树中在它上层最近的那个 <LevelContext.Provider> 传递过来的值。不是同级，也不是更远的层级。useContext 允许父组件向其下层无论多深的任何组件提供信息，而无需通过 props 显式传递。
2024-06-18 10:02:58
245
原创 React useReducer 使用及 useImmerReducer
React 中的 reducer 和这个是一样的：它们都接受 目前的状态 和 action ，然后返回 下一个状态。传递给 reduce 的函数被称为 “reducer”。它接受 目前的结果 和 当前的值，然后返回 下一个结果。useReducer 实际上是以数组上的 reduce() 方法命名的。
2024-06-18 09:12:51
330
原创 js数组方法
改变原始数组返回一个新数组添加元素push，unshiftconcat，[…arr] 展开语法删除元素pop，shift，splicefilter，slice替换元素splice，arr[i] = … 赋值map排序reverse，sort先将数组复制一份
2024-06-13 11:02:12
131
原创 React state 更新时机以及强制更新
之前的 state 的值是 0，所以这就是 React 作为参数 n 传递给第一个更新函数的值。React 会保存 3 为最终结果并从 useState 中返回。通过传入一个更新函数。来更新state的值。
2024-06-12 22:42:14
520
原创 React 事件函数传播及捕获
事件处理函数将捕获任何来自子组件的事件。事件会沿着树向上“冒泡”或“传播”：它从事件发生的地方开始，然后沿着树向上传播。在 React 中所有事件都会传播，除了 onScroll，它仅适用于你附加到的 JSX 标签。e.stopPropagation() 阻止触发绑定在外层标签上的事件处理函数。e.preventDefault() 阻止少数事件的默认浏览器行为。
2024-06-12 15:38:17
483
原创 React.ReactElement 与 React.ReactNode
【代码】React.ReactElement 与 React.ReactNode。
2024-06-12 09:22:13
363
1
原创 git ssh建立连接
2. 打开文件，如果找不到文件，可以在文件夹根目录下输入文件路径（截止到文件夹，不包含文件名）回车来访问。3. 打开 id_rsa.pub 文件，复制里面的文本内容，粘贴到仓库的设置中的ssh keys 即可。直到出现 生成的 ssh 文件路径。
2024-03-13 16:12:26
276
原创 localStorage，sessionStorage 和 cookie区别
【代码】localStorage，sessionStorage 和 cookie区别。
2024-02-01 16:06:08
422
1
原创 webpack使用
1. 安装webpack，webpack-cli只安装webpack，运行webpack -v 提醒我需要安装webpack-clisudo cnpm install webpack -gsudo cnpm install webpack-cli -gwebpack -v # webpack: 5.72.0 webpack-cli: 4.9.2
2022-04-15 15:36:49
908
原创 react 打包时取消console和debugger
1. 安装uglifyjs-webpack-plugin# 使用--save安装，可能会提示webpack版本问题。cnpm install uglifyjs-webpack-plugin --save-dev2. 在config.js中配置chainWebpack// 引入const UglifyJsPlugin = require('uglifyjs-webpack-plugin');export default defineConfig({ ... chainWebpack:
2021-12-21 14:37:26
960
原创 使用verdaccio搭建私有npm库
1. 全局安装verdaccionpm install verdaccio -g2. 启动verdaccio此时，verdaccio已经启动，http://localhost:4873/ 已经可以访问，但是只能在本机访问。可以修改配置文件，通过访问ip的方式来访问。在 .config/verdaccio/config.yaml 文件末尾添加listen: 0.0.0.0:4873重新运行启动命令，便可以通过http://ip:4873的方式访问了。3. 使用pm2来启动verdacc
2021-12-02 17:32:51
1491
原创 正则表达式及常用的正则验证
字符描述^匹配开头$匹配结尾\将下一个字符标记为特殊字符*匹配0次或多次，相当于{0,}?匹配0次或1次，相当于{0,1}+匹配1次或多次，相当于{1,}{n}匹配n次{n,}至少匹配n次{n,m}至少匹配n次，最多匹配m次{n}匹配n次字符描述?跟在其他限制符后，表示非贪婪匹配，默认贪婪模式。例如对于字符串"ooo"，o+?匹配到"o"，o+匹配到"ooo".匹配除换行符外的...
2021-11-29 17:11:05
222
原创 ant-pro使用
取消默认登录页面1. src -> app.jsx 注释 getInitialState 函数下的 fetchUserInfo 方法2. src -> app.jsx 注释 layout 函数下的 onPageChange 方法
2021-11-23 10:42:06
1446
原创 git 命令
git 命令关于 tag1. 本地创建 taggit tag project_v1.0 无注释git tag -a project_v1 -m "项目1.0" 含注释2. 推送 tag 至远程git push origin tag project_v13.删除 taggit tag -d project_v1git push origin :refs/tags/project_v1关于 分支1.
2021-11-23 10:37:13
186
原创 将已有react+umi项目替换为MFSU启动方式
使用npm start启动项目时耗时长，使用umi dev可以加快启动速度，第一次使用会比较慢，之后启动时间在2s左右，热更新平均 600ms 左右MFSU issue地址 https://github.com/umijs/umi/issues/6766操作前先检查是否全局安装umiumi -v我的项目虽然使用了umi.js，但是没有全局安装。后面运行 umi dev时报错 umi: command not found。全局安装 uminpm install -g umi // win.
2021-07-30 11:06:43
2172
原创 react + ant-ProTable 表格跨页选择
protable 选择行设计到的api有onSelect - 单行选择onSelectMultiple - 多行选择（使用shift键可以触发多选）onSelectAll - 全选全不选onChange - 每次选择行都会触发onChange，并且是后执行。跨页选择逻辑cancleRowKeys - 取消选择的行mySelectedRowKeys - 选中的行选择行时，判断是选择还是取消选择，如果是取消选择，将行key存储至 cancleRowKeys 中在onChange 方法中
2021-07-02 10:40:02
1600
原创 excel 常用公式
身份证号提取性别=IF(MOD(MID(F1576,17,1),2),“男”,“女”)身份证号提取年龄=YEAR(TODAY())-MID(F3,7,4)查询重复身份证号=IF(SUMPRODUCT(–(F$1:F$1997=F1589))>1,“重复”,"")查询数字的小数位数，整数计算结果是-1=len(A1)-len(int(A1))-1...
2021-06-18 10:18:05
673
原创 vue3 teleport传送门
vue3 新增的teleport 可以实现将组件内的元素移动到组件外的dom节点内。to 指向渲染组件的dom // index.html<body> <div id="app"></div> <div id="modal"></div></body>// modalComp.vue<div> <div class="mask"></div> <teleport
2021-06-17 10:12:46
462
原创 vue 为路径设置别名
vue-cli3在vue.config.js文件中配置路径别名const path = require("path");const resolve = (dir) => { return path.join(__dirname, dir);};module.exports = { chainWebpack: config => { config.resolve.alias.set('@',resolve('src')) }};...
2021-06-16 17:16:31
109
原创 dom元素尺寸和位置
一、尺寸clientWidth /clientHeight 包含元素内容 + padding + border clientWidth 270 , clientHeight 100scrollWidth /scrollHeight 包含元素内容 + padding， scrollWidth 270 , scrollHeight 100 . 如果内容溢出该元素，并且存在滚动条，值为 真实内容高度（含溢出高度） +...
2021-05-26 11:23:45
105
原创 生成uuid
// 生成uuidexport function getUUID() { return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => { return (c === 'x' ? (Math.random() * 16 | 0) : ('r&0x3' | '0x8')).toString(16) })}
2021-05-19 11:04:53
174
原创 vue 路由传参的3种方式
1. 路由配置// 页面路由格式 /detail/1// 页面刷新后路由参数依然在。// 路由定义{ name:'Detail', path:'/detail/:id', component:Detail}// 页面跳转this.$router.push({ path:'/detail/1',})// 或者同方式2this.$router.push({ name:'Detail', params:{id:1}})// Deta
2021-05-17 17:32:14
213
原创 vue slot插槽
1. 匿名插槽<!-- parent --><Children> <h4>标题内容</h4><!-- 匿名插槽默认用default做参数，v-slot仅能用于template标签 <template v-slot:default> <h4>标题内容</h4> </template> --></Children><!-- chil
2021-05-08 15:26:38
137
原创 vue 组件通信
1. 父子组件通信1.1 父传子值props// parent<Children msg="success" />// childrenprops: { msg: String}1.2 子传父值，父改子值$refs// parent<Children ref="cld" />mounted(){ console.log(this.$refs.cld.content) this.$refs.cld.content='我是父
2021-05-07 11:14:43
112
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人