CodingWithAlice

我的一方小天地，如果对你有帮助，那真的太好了

在组件回调函数获取最新值失败的原因和方案

在组件回调函数获取最新值失败的原因和方案总结： 1、原因：在 columns validate 回调函数中使用组件变量时，变量永远是生成的值，后续的变更不会传入变化函数组件每次渲染都是独立的闭包，所有的内部函数捕获的都是创建时的状态快照，不是调用时的状态 2、解决方案：动态获取可以①使用 ref + ②useMemo useEffect + setColu...

Posted by CodingWithAlice on July 27, 2025

防抖节流 + 在React组件中的使用踩坑

防抖节流 + 在React组件中的使用踩坑总结： 1、平时键盘抬起就会搜索，防抖后，间隔一段时间不输入才会搜索，节流后，在频繁触发的事件流中，函数以固定的频率执行 2、在组件中实现防抖时，需要注意配合 useCallback 避免组件重新渲染导致定时器失效 3、使用防抖后，需要清理一、实际应用 - 踩坑记录 1、使用场景防抖 debounce ...

Posted by CodingWithAlice on July 26, 2025

useEffect+addEventListener 的坑

useEffect+addEventListener 的坑总结：即使 React 组件重新渲染，事件监听绑定的依旧是当时的函数引用，捕获的是当时的作用域和变量背景问题 addEventListener 事件监听器绑定的回调函数，一直是旧的原因 addEventListener 事件监听器绑定时捕获的是当时的 props 和 state（当时的作用...

Posted by CodingWithAlice on July 26, 2025

循环方法与 async/await 的兼容性

循环方法与 async/await 的兼容性场景：forEach 遍历过程中 await 接口返回失效总结： 1、不能和 async/await 一起使用的循环方法：forEach、map、filter、reduce 2、能够和 async/await 一起使用的循环方法：for循环、for-of、for-in 一、好用的异步并行执行的写法...

Posted by CodingWithAlice on June 22, 2025

Antd tree从多选改为单选

Antd tree从多选改为单选总结： children 结构 + checkedKeys受控背景：Tree 可以开启多选模式 ‘multiple’，可以选择不同层级需求：只能选择叶子节点方案：根据当前数据结构中是否有 children + checkedKeys 受控关键代码 // 单选 css .checkbox { :global { ...

Posted by CodingWithAlice on May 15, 2025

react-dnd 的使用问题：简易实践、关键名词

react-dnd 的使用问题：简易实践、关键名词总结：建立排查逻辑流：从外向内，先 UI 观察差异/关注任何异常，不要忽略 chrome 工具的价值 - 热区问题的排查 - 直接修改节点/属性值来定位 - 更快速高效 React-dnd 的简易实践：useDrag 记录源数据 id，主要是通过配置 item/type/collect/end -> useDragL...

Posted by CodingWithAlice on April 20, 2025

输入框不失焦导致数据不更新问题

输入框不失焦导致数据不更新问题总结：核心是【React 合成事件 VS 原生事件差异】的实践场景 Antd 为了防抖等性能问题，给 Input 组件的 change 事件触发时机是 onBlur，更新后，会把值同步给 form -> 这个同步过程，它既不是宏任务，也不是微任务，是通过 React 的合成事件的状态更新机制完成的是异步的，并且遵...

Posted by CodingWithAlice on April 13, 2025

MongoDB-和mysql使用对比、引入Nestjs流程

MongoDB-和mysql使用对比、引入Nestjs流程总结：知识点的补充： mongodb 中没有表的概念，对应 mysql 的表 - 是“集合” 没有下划线和驼峰的转换，所以建议集合定义时直接使用驼峰 mysql 中的 findOrCreate = mongodb 中的 findO...

Posted by CodingWithAlice on April 5, 2025

NestJS provider 和 exports 的区别

NestJS provider 和 exports 的区别背景：在 AModule 中引入 BModule 后，无法直接使用 BService 解决方案：在 BModule 中通过 exports 导出 // b.module.ts @Module({ providers: [BService], // 错误以为这个是导出 exports: [BService], // ...

Posted by CodingWithAlice on April 5, 2025

应用批量启动脚本 - 有哪些脚本？windows的hack解法

应用批量启动脚本 - 有哪些脚本？windows的hack解法总结：启动脚本根据环境使用不同的语言，包括 shell.sh、script.ps1、batch.bat 虽然 windows 无法执行 sh shell.sh，但是 hack 一点，只要安装了 git 就可以使用 git bash 带的 sh 指令了 batch 脚本的技术并不能帮助前端能力，但是这个处...

Posted by CodingWithAlice on April 3, 2025