- 博客(52)
- 收藏
- 关注
RSS订阅原创 取消请求：axios.
不可重复使用: 一个 AbortController 只能取消一次，如需多次取消需创建新实例。兼容性: 所有现代浏览器均支持 AbortController，IE 需 polyfill。错误传播: 取消的请求会进入 .catch()，需明确区分取消和其他错误。浏览器的原生api。所有的请求库都能使用这个方法。如下图，这个接口就被cancel了。
2025-03-05 12:07:53
441
原创 部署到github-pages后， 切换路由，前端路由缺失github上的项目名【已解决】
原因：使用此方法，页面刷新，没有后端支持的路由 URI 会被 github pages 当做真实的地址去请求资源，从而导致被引导到 github 的404 页面。Github Pages无法处理history模式的前端路由。直接使用 hashRouter。同时注意修改【组件外】 【编程式路由导航】如下图step2所示。其他位置（比如路由表、组件内的编程式路由导航）是不需要修改的。且此方法部署后，刷新页面，不会404.或者 直接用hash模式。
2024-10-29 14:42:46
545
原创 部署后，页面白屏，获取静态资源的接口404 问题解决
（我在这里做了一个环境的区分。所以需要从环境变量文件里读取。打开控制台，发现静态资源的地址不对 缺少的项目名。
2024-10-29 11:44:12
254
原创 如何将一个前端项目装进 docker image 里
一般不要映射到 2 位数，2 位数的端口，尤其是 2 位数的端口，很多都是系统保护端口，有内置用途的，不开放的。自己的应用一般都是运行在 4 位数的端口，比如你前端默认就是 3000 端口，Java 服务默认 8000。下图是使用前两种方式做的 images. 可以看出 build 后使用 anywhere 会缩小 images 的 size。也支持在我们本地里使用。<源路径>：当前 dockerfile 文件所在的上下文（context）为基础的相对路径。<目标路径>：可以是/app 的相对路径。
2024-10-20 11:52:23
570
原创 react router v6
2种方式生成路由表备注：本案例，除了登录页所有页面都包含在 layout 组件里。layout 组件对应的路由为’/’
2024-09-22 12:15:22
508
原创 is NaN
isNaN : 如果给定值在被转换为数字后为 NaN 则返回值为 true；否则为 false。因为 任意字符串、undefined 被转换为数字后都为 NaN。lodash.isNumber : 数字、NaN Infinity, -Infinity 都为为true。Number.isNaN: 只有NaN 为true 其他都是false – 官网推荐使用。lodash .isNaN: 同上。
2024-09-11 15:29:09
126
原创 react 定时器内闭包的存在导致 数据无法及时更新
需求：React Hooks useEffect使用定时器，每3秒更新一次值实际，页面展示MyV 一直是 1。因为setInterval会行程一个闭包。此闭包内用到的的上下文的state都是创建时的初始值。因此时，MyV一直都是 0。
2024-06-24 18:09:49
459
原创 ExcelJS 下拉选择 dropdown、 加密(encryption)文件 、导出文件
使用 ExcelJS 给某一列设置下拉选择 的 3个方法。
2024-01-10 17:59:41
1392
1
原创 为什么react call api in cDidMount
3、渲染过程是非常快的，即使放到了cWM，也不会让接口快很多。API数据到达前端的时候，必定晚于初次渲染。必定会导致re-render，因此，放到cWM也会导致重新渲染。5、ssr 会让cWM走一次，然后管理端再走一次。–本人未实践，参考资料里这么写的。4、如果放到cWM，会让人误以为等到数据拿到后才去渲染页面。2、17版本后的react 由于fiber的出现导致 cWM 会调用多次！首先，放到constructor或者cWillMount不是语法错误。（那么，17之前的react为什么要如此建议呢？
2023-12-23 21:05:07
704
原创 ts declare 的用法、和export的区别、*.d.ts的使用说明
首先声明，declare 来声明全局变量或类型的目的是为了让 TypeScript编译器能够识别和理解这些外部环境中已存在的内容，而不需要在当前文件中提供具体的实现或定义。特点：如果一个全局类声明文件在 ts 处理范围内， 那么全局类声明文件中的 declare 会在全局生效。其他文件使用.这样就不用import了！*.d.ts文件 的 使用说明。
2023-12-05 11:27:46
5186
1
原创 debounce and throtlle
注： //在 JavaScript 中，arguments 是一个类数组对象，它表示传递给一个函数的参数集合。通过使用 arguments。对象，你可以在函数内部访问到传递给该函数的所有参数，即使你在函数声明中没有明确指定这些参数。
2023-11-04 17:04:05
357
原创 React的useEvent 和 ahooks 的 useMemorizedFn 的深度分析和对比
由此我们看出。其实二者的原理和出发点都是一致的，都是返回的是个固定的对象obj，该对象地址不变，但是调用的方法的时候相当于调用了obj.A，此属性的指向是会一直更新的。只不过更新的时候 ：useevent用了useLayoutCallback做更新，useMemorizedFn则使用了useMemo。保持地址不变的时候：useevent用的是useCallback ，useMemorizedFn使用的一个!memoizedFn.current + 新固定的function。
2023-10-31 12:04:51
999
原创 useswr基础使用和问题总结
useSwr 使用分析1、第一个参数是key ,下文是写成 getKey() 方法 返回的数据会给到第二个参数的入参。2、写成 key ，要保证全局是唯一的！重复的key 会被useswr认为是同一个，使用同样的缓存3、分页接口的情况下，必须写成 getKey() 方法，getKey的依赖项变化时，会导致 接口从第一页重新请求。4、return null 就是不调接口。1、就是接口函数，普通的useswr 直接用接口函数即可。
2023-10-29 11:32:52
1680
原创 super(props)与react类式组件
super是对父类构造器的调用。使用了后会自动继承父类的属性。要把super（）放到第一行是因为了以防在super（）之前，也就是没实例化父类之前，访问父类的属性。所以js将此作为一个语法点，必须这么写。网上看到很多回答 说是：不加props 构造器里没法访问 this.props。我试了根本不是这样。而是直接报错如上图。如果不加props，又调用了父类的构造器，就没把属性值传给父类啊！父类的属性都是undefined。
2023-10-28 18:49:30
160
原创 umi - history传参
params \ search \ state 其中 state不展示到页面。hash路由模式下，刷新会丢失。以下是 umi history.push 的入参定义的。解答：定义一个不存在于history.push入参里的属性即可。
2023-10-10 17:44:21
1138
原创 antd Form 监听数据变化的2种方式比较。onValuesChange vs Form.useWatch
此方式类似于 使用useState包裹的数据。
2023-09-07 14:27:50
6308
原创 微前端学习 - 问题记录
微前端、initGlobalState、onGlobalStateChange、获取最新initGlobalState数据、访问主应用的initGlobalState、webpackConfig 和 devServer
2023-08-31 11:27:24
101
原创 antd4 Form 自定义组件、以及改变表单数据的方式
参考例子注意点：被Form.Item包裹的【自定义组件】都会默认给传 一个 onChange 和 当前 formItem包裹下的数据value , 此value被form表单托管的此处的onChange跟普通的 组件的onChange是有区别的。（1） 普通组件是： 【onChange监听，setState 赋值 + value=state 】 控制受控组件的。在form里不能这么做，会导致有2个控制源同时更改同一个表单项。
2023-06-21 11:08:38
1945
原创 antd upload踩坑
当我们想要上传图片的时候，需要修改showUploadList={xx} + listType={xx}。同时，如果是卡片格式 那么Upload组件需要添加Image子组件。首先，这个例子里就先去调用logoUploadForm方法。获取到返回的数据后，做一些处理，生成newUploadInfo。其次，newUploadInfo的一个属性 url 才是真正的上传的接口，被传递给。项目中上传可能并不会直接给前端一个 上传的action对应的url。Upload组件是antd的上传组件。
2023-06-02 18:11:14
465
原创 useLayoutEffect与页面渲染
分析：首先点击了button ,testA变为大于0.5的数字，此时进入useLayoutEffect，如果按照上述的理解，useLayoutEffect是渲染前执行的，那么此时虽然 testA > 0.5 但是redDiv是还没来得及渲染出来呢！就不能获取到真实dom。输出：如果按照大多数资料里的意思，useLayoutEffect 是渲染前执行的，怎么可能获取到 真实dom（id=redDiv 的div）呢？
2023-04-24 18:26:10
250
原创 React性能优化之常用hook的解析
下图是 useEvent的大致的源码。返回的是ref.current的引用。当任意state发生变化时，即可冲洗执行ref.current = handler 此时的闭包环境就变了。注意： useMemorizedFun与useCallback 的使用场景。功能和缺点：生成一个根据依赖项变化的方法。useLayoutEffect文档：参考1 的例子 + 参考2 的结论。：react官方出的一个，返回无依赖项的地址不变的方法。2、useMemorizedFun：功能同上，是ahooks的方法。
2023-04-03 10:06:59
262
原创 react useMemo的使用心得。为什么总是拿不到最新数据
导致所有的数据，只要是从子组件momeTest中执行importCallback，都会是旧的，包括父组件的所有方法、state等。除非update发生了改变，触发了momeTest的重新渲染！如果我们给子组件里用了useMome，且子组件里用到了父组件传一个state。那么即使是父组件的fatherState变化了。：在子组件中，执行importCallback时，拿到的数据是最新的。importCallback方法被传到了子组件，并放在了useMemo使用。，因为使用了useMemo导致。
2022-11-06 14:38:34
1349
原创 有关 dva.js effects 的参数 ：put、call、take、put.reslove阻塞性、异步
有关 dvjs effects 的参数 ：put、call、take、put.reslove阻塞性、异步。
2022-09-26 11:45:41
2163
原创 umi 项目，ts文件里引用 mockjs，总是飘红提示mockjs不存在。
3、npm uninstall 模块：删除模块，但不删除模块留在package.json中的对应信息；2、dependencies是会发布到生产环境中去的，就是项目开发完成给用户使用的时候，依赖也是生效的，如我们开发使用的组件库之类的，生产环境一定要用到的就一定要写在dependencies；1、当使用npm install --save时，依赖就写到dependencies对象中去，当使用npm install --save-dev时，依赖就写到devDependencies对象中去。
2022-09-09 17:44:31
1551
原创 XLSX 相关使用
好像是sheet_to_json()的时候。只要有了{raw:false}，就会直接读取 w的值，不是转换过后的数据。加了上述2个配置那么，影响的只是 workbook 的这个 v 的结果。不会影响 w的结果。我发现这种情况下，加不加 dateNF 和cellDate 这2个配置 都是一样的结果。其实他的关键点就是 {raw:false} ，就是以字符串形式读取 单元格里的内容。这里打印出来的一大串是 workbook 里面的结果。
2022-09-07 10:48:38
198
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人