在react hooks中,当useEffect依赖自身来更新自己时,遭遇死循环如何解决?

5 月 4 日
阅读 2 分钟
41
观察如下代码,我们需要依赖words来更新自身,所以需要将words加入useEffect的依赖中。更新words触发useEffect,useEffect再次更新words,然后就产生了死循环。

关于react中视图未使用的state更新,也会导致组件重新渲染的问题

5 月 1 日
阅读 2 分钟
14
在如下代码的情况下,如果我们点击按钮,会发现即使A和B组件没有依赖timestamp,但每次setTimestamp也会让函数重新渲染,这其实是无意义的性能开销。

依赖倒置原则在react中的应用

4 月 27 日
阅读 2 分钟
43
依赖反转原则(Dependency Inversion Principle,DIP)是面向对象编程领域中的一个重要原则,其主要目的是降低模块间的耦合度,提高代码的可维护性和重用性。

既然程序会自己抛出错误,为什么还要写try catch呢?

4 月 27 日
阅读 1 分钟
63
抛出问题以前一直困惑,在下面的代码中,进行try catch的意义是什么?js引擎不是会自己抛出错误吗?为什么还要多此一举手动捕获打印呢? {代码...} 解决问题现在我才明白,这样做有以下好处:有些错误会导致程序崩溃,用了try catch可以避免。在捕获了错误时,你有机会对其进行修复。你可以在catch中打印提供更有用的信...

开闭原则在react中应用

4 月 27 日
阅读 2 分钟
48
对应到react中,首选的场景就是组件了。react的组件的props其实就是开闭原则的一个很好的例子。因为我们可以通过props添加新增行为而无需修改现有代码。

Facebook软件工程师的10条clean code原则

4 月 27 日
阅读 4 分钟
51
始终如一的代码风格是基本要求。(其中将let换成了const,这是一条最佳实践,只在你确实需要重写变量值的时候用let,否则一律用const)

js实现撤销和重做的简单示例

4 月 27 日
阅读 2 分钟
47
通过上面代码我们发现,撤销和重做本质上就是对数组的入栈和出栈操作。要注意的一点是,实现重做的前提是在撤销的时候,需要将移除的元素有序的存起来,这样在重做的时候才能用数据可用。

当useEffect遇到了对象依赖

4 月 25 日
阅读 2 分钟
50
提出问题根据坐标对象,查询对应的地址详情,代码实现如下: {代码...} 上面的代码看起来没问题,但是,当我们运行起来的时候,会发现控制台在一直不停地输出coming和发起请求。分析问题根据useEffect的用法我们可知,只有当依赖发生变化的时候,才会执行内部的代码,所以问题在其依赖的coordinate上。但我们的coordinat...

关于前端计算时,小数精度丢失的问题

4 月 25 日
阅读 1 分钟
39
提出问题下面的小数计算精度丢失问题,知道的朋友应该都知道。不过一般都是在后端进行计算再返回给前端进行展示,所以也不会成为问题。 {代码...} 解决问题但有时候也需要前端进行计算时,这个问题就需要被解决。这里推荐使用decimal.js来处理。 {代码...} 注意某个版本add方法如果用0加上0会得到00,需要判断一下。 {代...

【需要补充总结,保持结构返回】递归的几种场景记录

4 月 24 日
阅读 6 分钟
88
修改节点名和修改节点值都可以用这种方式。只不过该方法会修改原始的树,简单的处理方式是在传入前提供tree的副本。(后面会添加不修改原始tree的版本。)

测试用例用不到完整的数据,但是ts要,如何解决?

4 月 23 日
阅读 1 分钟
41
提出问题在下面的测试代码中,编写的测试用例不需要用到所有的Item字段,如果用上完整的字段很没必要,不用又ts检测无法通过,这种情况怎么处理? {代码...} {代码...} {代码...} 分析问题问题的关键在于,让ts认为你提供的是完整的Item,而ts中的断言就是干这个的。解决问题 {代码...} 总结问题该问题属于ts断言非常合...

一个简单的ts计时器

4 月 21 日
阅读 1 分钟
57
{代码...} 用法: {代码...}

如何让音频播放指定次数?

4 月 21 日
阅读 2 分钟
65
代码示例 {代码...} 调用play(2),也就是期望播放2次。初始化一个计数器和一个Audio对象。为音频添加播放结束事件监听器,回调函数为onEnded。然后调用audio.play()进行播放。当onEnded被调用,说明播放完成,我们将计数器自增加1。检查计数器是否达到期望次数:如果达到,则移除audio上的ended事件,流程结束。如果未达...

当从localStorage中获取数据时,如何做异常处理?

4 月 20 日
阅读 2 分钟
59
下面的代码在有初始值的情况下,能够工作的很好,但是当localStorage中存在非法的数据时就会抛出异常,如果你的程序没有做好异常处理,就会崩溃。

什么时候不应该使用useEffect?

4 月 20 日
阅读 2 分钟
49
当你的数据是同步的差的:数据来源是同步的,没有必要使用。 {代码...} 正确示例:直接使用。 {代码...} 当你的数据可以通过其他数据计算得来差的: {代码...} 更好的:从已有数据中派生。 {代码...}

react-router-dom@6中如何在组件外进行跳转路由?

4 月 17 日
阅读 1 分钟
58
react-router-dom@6中无法直接使用history模块,换了如下方式: {代码...}

TypeScript新增接口和更新接口传参定义差异的问题

4 月 15 日
阅读 1 分钟
75
{代码...} 方案1:分别定义 {代码...} 方案2:使用Partial {代码...}

使用form-data的content-type上传文件问题

4 月 12 日
阅读 1 分钟
57
问题当后端需要我们上传文件时,一般会用form-data的类型。接口文档像这样:目标是发出这样一个请求:代码示例 {代码...} 注意不要对formdata进行包装,以下是错误示例: {代码...}

TypeScript泛型在ajax上的应用

3 月 29 日
阅读 2 分钟
72
泛型参数 {代码...} 泛型响应 {代码...} 同时指定请求和响应为泛型 {代码...} 冗余应用应用场景UserResponse和NewsResponse属于冗余的定义。 {代码...} 用泛型去掉UserResponse和NewsResponse的冗余的定义。 {代码...}

数组方法中的slice与toSpliced

3 月 27 日
阅读 1 分钟
112
方法罗列方法是否修改原数组返回值slice否包含摘取元素的新数组toSpliced否不包含被删除元素的新数组slice获取指定位置的元素,然后将这些元素作为数组返回。函数签名:slice([start], [end])start摘取开始位置end摘取结束位置使用示例:浅拷贝 {代码...} start默认为0,end默认为items.length所以在两个参数都不指定的...

TypeScript中的断言语法(as)理解

3 月 24 日
阅读 3 分钟
150
如下代码,我们调用document.getElementById获取一个元素,然后尝试对其调用getContext方法。然而这段代码无法通过ts检查,而是会抛出错误。

vue pinia与vue hooks(Composition API)的关键差异

3 月 23 日
阅读 1 分钟
190
vue pinia是一个单例,也就是说多次初始化实例都是同一个,所以在多个组件中使用时,他们修改的时同一份数据,也就能实现vue pinia的设计目的,即数据共享。

react条件几中条件运算方式

3 月 23 日
阅读 1 分钟
96
if else没什么好讲的。 {代码...} 应用场景:-注意事项:-三元运算符二选一渲染。应用场景:在两个候选结果中取一个的情况。 {代码...} 注意事项:避免嵌套,如果发生嵌套,那说明你的代码需要重构。逻辑与(&&)只期望条件为真时渲染。jsx不会渲染boolean值,所以如果为false,就什么都不渲染。应用场景:只有一个候选...

如何使用Github Pages发布自己的个人网页?

3 月 15 日
阅读 2 分钟
101
创建一个仓库名为账户名.github.io。比如我的账户名为refanbanzhangwork,那么我的仓库名就填写:refanbanzhangwork.github.io。其他位置保持默认就好了,然后点击Create repository按钮。

git使用记录

3 月 12 日
阅读 1 分钟
123
window的git默认不区分大小写,也就是你修改文件的大小写,git是感知不到你的修改的。所以如果遇到文件大小写问题,需要开启大小写敏感。

关于Github Pages部署SPA应用后,刷新路由404的问题

3 月 11 日
阅读 2 分钟
100
原理:当Github Pages发现无法处理的前端路由时,会跳转至404.html,此时我们在404.html利用meta的自动重定向能力,跳转至index.html,从而再次能够接管前端路由。

SPA应用的hash模式和history模式部署问题

3 月 9 日
阅读 1 分钟
141
这是因为hash模式的路由path值并不会传递给后端,所以你的任意path,对后端来说都不可见,它只会认为你在访问根目录的index.html。

npm是如何处理多版本依赖的?

3 月 9 日
阅读 1 分钟
157
两种模式nest模式基本行为:在require/import时,向上递归查找依赖,直到全局node_modules结束。特点:每个包在自己内部管理依赖,结构清晰简单。不足:如果A包和B包都依赖了axios,就会导致axios在A包和B包的node_modules中各安装一次,产生重复安装。flat模式基本模式:在require/import时,向上递归查找依赖,直到全...

yarn本地安装记录

3 月 6 日
阅读 1 分钟
149
为什么要本地安装?多人开发时,每个人电脑上装的yarn版本可能不一样,有时这会导致微妙且不易察觉的问题。利用本地安装,我们可以在项目中保证版本一致。怎么做?1 首先保证你有一个全局的yarn版本 {代码...} 验证一下安装是否成功 {代码...} 2 进入到项目根目录中,执行安装命令 {代码...} 验证一下安装是否成功 {代码...

ts类型定义记录

3 月 5 日
阅读 4 分钟
403
一个函数的参数是vue的ref类型,该如何进行ts声明呢?一个变量inputEl是ref<HTMLInputElement>类型,将其传给了函数useCursor: {代码...} 在useCursor中对inputEl的类型定义: {代码...} 优化一下,将类型定义共享: {代码...} {代码...} {代码...} react的键盘事件对象如何定义类型? {代码...} ReactNode、React...