CodingWithAlice

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

useContext

useContext Context - 无须明确地传遍每一个组件，就能将值深入传递进组件树设计目的是为了共享那些对于一个组件树而言是“全局”的数据，而不必显式地通过组建树逐层传递 props（在这之前，如果有全局状态管理需要使用 redux）缺点：使组件的复用性变差 // 下方案例直接从官方文档拷贝 const ThemeContext = React.createConte...

Posted by CodingWithAlice on November 13, 2022

Antd 的深入学习

Antd 的深入学习场景：原本 Form 中已经有了 formData 作为初始数据；在渲染表单的时候，需要依据其中的字段查询另一个接口，拿到对应数据用于渲染表单的下一部分由于 formData 作为参数不方便修改（直接赋值修改是无法触发更新的），所以选择将新接口返回的字段通过 form.setFieldsValue(res) 增量式添加到 form 中（form 中的字段都是通过 ...

Posted by CodingWithAlice on October 27, 2022

TS 泛型函数/泛型接口/泛型约束、特性、type/keyof/enum/as/Partial

TS 泛型函数/泛型接口/泛型约束、特性、type/keyof/enum/as/Partial 总结：几个重要的关键词 type keyof enum as： type 类型别名：由 type 关键词创建 type StringOrNumber = string | number keyof 获取一个...

Posted by CodingWithAlice on October 19, 2022

项目初始化和配置

项目初始化和配置第一课 :information_desk_person:注意：npx 可以让你使用 npm 中的包功能，而不用手动全局安装这个包 ts 配置 tsconfig.ts -> baseUrl 可以指定项目中绝对路径 eslint 配置安装：prettier -> 按照指示新建配置文件用于配置：echo {}> .prettierrc.jso...

Posted by CodingWithAlice on October 14, 2022

Chrome 读取的缓存跨域问题

Chrome 读取的缓存跨域问题参考文章：CORS issue due to aggressive Chrome cache、MDN 常见的缓存模式-Vary响应、MDN - Vary 背景：在工作遇到先访问 A 域名下的网站，对 react.production.min.js 文件进行缓存，再访问 B 域名下的网站，同时也请求了 react.production.min.j...

Posted by CodingWithAlice on August 25, 2022

包管理工具

包管理工具常见错误： 1、pnpm 的lock 文件是 pnpm-lock.yml， ❌ 不是pnpm.yml 参考文章：JavaScript package managers compared: npm, Yarn, or pnpm? 看到另一篇主要讲 pnpm 实现的博客，也可以了解下 2022年了，你还没用pnpm吗？背景：在工作遇到（node14）npm...

Posted by CodingWithAlice on August 24, 2022

重构中的测试

重构中的测试每当我要重构的时候，第一个步骤永远相同：我得确保即将修改的代码拥有一组可靠的测试 –> 在日常开发中，我们能够体会到修复 bug 通常是比较快的，但是找出 bug 所在却是一场噩梦测试过程中很重要的一部分，就是测试程序对于结果的报告方式。要么变绿，要么变红，用于自我检验，否则就得耗费大把时间来回对比，这会降低开发速度 -> 测试自动化，让它们检查自己的测试结果...

Posted by CodingWithAlice on August 17, 2022

重构的方法论

重构的方法论重构经历那么多年，也有很明确的方法论，可以让我们以成本最小的方式，对有问题的代码，进行重构（书中给出的方法，其实和设计模式一样，是一种经验的理论化，产生了具体的方法论，每一种重构方式并不是只有书中提到的方式，但是书中提到的路径一定是相对可执行度比较高，也不容易出错的）接下来按照书中页码顺序，记录一下学习重构案例的一些心得（笔记让我可以快速搜索关键词找到内容） ps.这里...

Posted by CodingWithAlice on August 17, 2022

修改 useCallback 函数的危险性

修改 useCallback 函数的危险性 useCallback hooks 生成的函数，在依赖不变的情况下，这个函数是不会变化的；功能新增一个 lastStatus 存储上次 status 的状态问题当前函数使用了 useCallback ，只在 appId 变更（初始化时）生成函数，后续再访问当前函数，变量 status 一直为 ‘‘，无法读取到上一次接口的值 ...

Posted by CodingWithAlice on August 16, 2022

useEffect不能写异步函数

useEffect不能写异步函数总结 1、useEffect 中不能写 async 异步函数 useEffect(async () => {}, []) 原因：useEffect 回调函数应该返回一个清理函数或 undefined - 而 async 函数隐式返回一个 promise，违反了 React 的规则 ...

Posted by CodingWithAlice on August 16, 2022