- 博客(30)
- 收藏
- 关注
RSS订阅原创 React的闭包陷阱问题和解决方案
第一种解决方案 通过给useEffect传递依赖项 让我们的count值改变后 重新执行useEffect 让闭包的值重新获取 但是这种是需要传递依赖项。第二种解决方案 不需要传递依赖项 我们通过useRef来实现 我们定义一个函数 在函数内部做重新赋值操作 已便于每次我调用方法的时候都可以重新获取到最新的值。这样会造成 虽然我的setState一直在去+1 但是我的控制台 log的值 一直都是0。这样的话我不需要传递依赖项 也可以每次输出的都是最新的值。
2023-11-01 11:25:00
247
原创 Vue3和Vue2中 v-if 和v-for的区别
在vue2中 v-for > v-if v-for的优先级比v-if高 所以可以一起用但是不推荐因为非常的消耗性能。而在Vue3中正好相反 v-if > for 也就是说 v-if的优先级是比v-for的优先级高的。这是因为 在Vue3中的v-if是比v-for的优先级高的 所以会先执行v-if但是v-if 的。的关系 v-if是v-for的子级也就是说在v-for循环出来所有的数据之后 就会到子级。所以会先执行v-for 这样也就有了数据源 而v-if又需要v-for出来的数据进行。
2023-09-15 20:41:03
538
原创 SSR和CSR区别
CSR：Client-side rendering（Client则是客户端的意思）后边的英文则和上边。1. 服务器端渲染相比于 客户端渲染 会至少多一次 客户端到服务器的请求 这也就。都是通过js插入的 但是js文件是需要下载解析的 但是在下载解析之前 就已经开始。帮助我们进行对html文件的渲染和组装了 当服务器端返回的时候 返回回来的会是。翻译为服务器的一边也就是服务器端）而rendering 的意思则是渲染的意思。MPA：多页面应用 每次跳转路由都会是一个新的页面 每次跳转都会刷新页面。
2023-09-07 22:09:33
738
原创 url的组成
2. auth 授权 auth就是用户名 密码 username password 一般在请求的时候服务器如果发现你配置了 auth 就回去找你的 request里面有没有"Authorization" 如果没有则返回401 然后让你登录 当你登录成功后 再次发送请求 然后这个时候就有了“Authorization” 然后服务器确认正确 返回页面。当协议 域名 端口 中任何一个不同 就违背了同源策略 这个时候 就不能进行DOM获取 ，不能ajax请求数据，不能进行本地存储等操作。
2023-09-06 17:25:06
169
原创 TS - 函数重载的理解：
例如在我们平常写函数的时候 用到几个函数他们的功能都相同但是细节有些小不同例如传入的参数类型不同 这时就需要定义多个函数去实现很繁杂 而函数重载就是用来解决这种问题的。函数重载是定义多个具有相同函数名，他们的参数列表可以不同 参数可以有不同的类型 参数个数不同 顺序不同等 但是函数名必须相同。只有一个函数体，只有实现签名配备了函数体，所有的重载签名都只有签名， 没有配备函数体。调用重载签名的函数时，会根据传递的参数来判断你调用的是哪一个函数。为什么要有函数重载他是解决什么问题的呢？
2023-08-29 21:16:56
146
原创 git - 常用git命令
6. git pull origin branch-name ( 分支名称 ） 将远程分支拉到本地分支。5. git push origin branch-name（分支名称） 将本地分支推送到远程分支。21. git merge branch-name （分支名） 将当前分支与写入的分支进行合并。9 git branch branch-name ( 分支名称 ) 在本地创建一个分支。22. git branch -d 分支名 删除本地分支 -d是delete的缩写。
2023-08-29 18:58:06
102
原创 编程思想 - 面向对象编程和面向过程编程的区别理解
②：开放-封闭原则（OCP）：开放-封闭原则也是面向对象编程的核心， 这里的 开发指的是可以扩展 而封闭指的是不可以修改 这可以提高面向对象编程的可维护性，可扩展性，可复用性，并且灵活性好。④： 依赖倒置原则（DIP）: 依赖倒置原则可以说是面向对象设计的标志，也就说所有创建的子类都是依赖于父类也就是抽象类或接口 这就是面向对象的设计 反之则是面向过程的设计了。面向对象编程 注重的是对象 由对象内部的属性和方法 通过调用对象方法的形式解决问题。首先分别解释一下面向过程和面向对象的区别。
2023-08-29 18:57:34
132
原创 Vue $nextTick理解和实现原理
Vue的更新DOM机制：Vue在内部维护了一个虚拟DOM，当我们进行常规的DOM操作后，并不是立即更新真实DOM树，而是被Vue记录在了内部的虚拟DOM上，然后再统一更新，这个统一更新的操作是异步的，在Vue内部维护了一个任务队列，所以我们修改完DOM值之后不会立即输出修改后的DOM值，是因为这个DOM更新的操作被Vue记录了下来统一保存到了虚拟DOM中然后存放到更新任务队列中 等待更新。
2023-08-29 18:56:09
53
原创 js类型校验的方式
4. Object.prototype.toString.call() 这个也是最靠谱的校验方法 格式为 Object.prototype.toString.call(属性) 返回值为 [object String] / [object Number] / [object Null] / [object Null] /不足之处 不能区分对象和数组 因为 null 也会返回object 并且判断数组会返回object。1. typeof () 也可以不加（）
2023-08-29 18:55:34
120
原创 js事件循环机制理解
执行顺序为 首先对整个代码从上到下执行 碰到同步任务直接执行 碰到异步任务直接推给 宿主环境 由宿主环境执行完毕后将结果放到事件队列内排队等待执行 而当例如用户与页面交互重新发起任务 则也是继续放到事件队列中等待执行 然后执行栈每执行完毕一个任务就会从事件队列中再取一个任务 这样循环执行 直到所有任务都被执行完毕为止。在浏览器的执行机制中有三个状态 一个是 执行栈用来执行任务 一个是事件队列用来存放事件等待浏览器一个一个执行 最后一个是宿主环境 宿主环境用来处理异步任务。
2023-08-29 18:54:58
54
原创 闭包的理解 使用场景 优缺点 如何避免闭包
闭包优点: 1. 可以获取其他函数中的变量 可以将一个函数内部的变量始终保存在内存中 （ 当我们调用了一个函数后 他的内部变量会在调用函数结束后自动删除内部的变量 但是如果内部使用闭包 则这个变量不会删除并且会始终保存在内存中 ）闭包的理解： 闭包就是一个函数定义在另一个函数的内部 这个内部的函数就是闭包 并且闭包函数可以访问函数内部的局部变量或私有变量 并且闭包可以形成封闭私有空间 不受外部影响 还可以让变量的值始终保存到内存中。2. 延长变量的声明周期。2. 可以在外部访问函数内部的变量。
2023-08-29 18:53:55
244
1
原创 react的context状态树怎么使用
首先我们引入context创建的实例对象 然后在类组件中有一个静态属性是 static contextType 让他等于我们的实例对象 然后在类组件的内部 直接通过 this.context.值 就可以使用了。我们把Consumer组件导入到函数组件中 然后我们想要在那个位置使用context的值我们就在那块用Consumer组件包裹 然后在内部通过一个箭头函数返回一个jsx即可。这个context实例对象可以设置默认值 设置后如果在父组件不包裹provider组件的情况下会返回默认值。
2023-08-28 20:06:19
98
1
原创 自定义封装一个方法让这个方法可以判断所有的数据类型并返回
首先方法通过 type 判断 是基础类型还是 复杂数据类型 如果是基本数据类型就直接返回基本数据类型 但是这里的null 也算null 并且 Object.prototype.toString.call(obj)的返回值格式是[ object object/null/Array ] 因为后面的个数不同 所以 在这里根据的是Object.prototype.toString.call的返回值长度来判断是Null还是object还是Array 这样根据不同的判断可以获取到所有的返回值 并且不会带空格。
2023-08-27 22:13:09
139
1
原创 关于websocket的理解和它与其他通信方式的区别
全双工是一种通信传输的术语，通信允许数据在两个方向上同时传输，在能力上算是两个单工通信的结合。全双工指可以同时进行信号的双向传输 （A->B） (B->A)这里的意思是A到B传递 或是B到A传递 都是瞬时同步的全双工允许我们让两个用户都可以互相发送消息并且消息都是瞬时同步单工通信就是例如有A和B两个用户单工只允许A向B发送消息 而B不能向A发送消息是指一个时间段内只允许A向B发信息，而另一个时间只允许B向A发信息这种方式是通过时间段的组合来完成双向通信。
2023-08-24 11:58:38
162
1
原创 面试题总结
JS相关1. immutable理解2. ![ ] == ! [ ] 和 ! [ ] == [ ] 结果是什么？为什么? 3. JS内存泄漏是什么 什么情况下会出现内存泄漏 内存泄漏怎么解决4. 闭包的理解 使用场景 优缺点 如何避免闭包5. js类型校验的方式 6. 面向对象编程方式理解7. localStorage和sessionStorage的使用和区别8. 原生JS实现限制拖拽React相关1. 说说react中虚拟DOM 在虚拟DOM中diff和key之间有什么关系2. 事
2023-08-20 21:41:23
126
1
原创 说说react中虚拟DOM 在虚拟DOM中diff和key之间有什么关系
Virtual DOM 也就是虚拟DOM 是一种编程概念 虚拟DOM是一颗虚拟JS对象树 它就是模拟真实DOM 把真实DOM模拟成了一个一个的js对象 并且以树形结构的方式 保存在内存中。3. 如果后续DOM节点发生改变（例如删除修改等） 则会生成一颗全新的js对象格式的虚拟DOM树。5. 然后再将这个patch 传递给真实DOM进行针对性的修改 然后再将修改后的页面渲染到屏幕中。1. 首先就是对初始化创建的页面进行分析然后创建出一个js对象格式的虚拟DOM树。
2023-08-19 20:21:34
92
原创 shouldComponentUpdate有什么作用
在这个函数中我们可以通过this.state或this.props拿到当前的state或props状态和nextState或nextProps更新后的新的state或props状态进行比较 来判断是返回true还是false来觉得render方法是否更新。当返回的是true的时候则允许render方法执行 当返回的值是false的时候则不允许render方法执行。我们可以通过返回true或false来减少不必要的render渲染从而提升性能。
2023-08-18 15:21:03
71
1
原创 props和state相同点和不同点？render方法在哪些情况下会执行？
3. state的值可以修改 类组件通过 this.setState 修改 函数组件则通过 hook useState的第二个参数 （修改值的函数） 来修改。4. 类组件通过 this.props 调用 函数组件 props作为函数组件的括号中的参数 通过 props调用。2. props是从父组件向子组件传递参数的时候 子组件可以通过props来接收这个参数。3. props是只读的不能修改 如果想要修改 只能去传递值的组件中去修改传递的参数。2. 有state的组件称为受控组件。
2023-08-18 15:13:52
89
1
原创 ! [ ] == ! [ ] 和 ! [ ] == [ ] 结果是什么? 为什么?
然后 [] 转成数值的话 就是 0 然后因为0 = false 所以最后 也是false == false 最后也返回一个true。[] 也就是等于 false == false 最后返回的是true。所以 先执行两边的![] 然后单个的[]是true 加上!取反 也就是false了。[] == [] 也是因为!优先级高 所以先把左边的变成false == []
2023-08-17 16:55:33
244
1
原创 JS内存泄漏是什么 什么情况下会出现内存泄漏 内存泄漏怎么解决
标记清除 就是 每当我们调用了这个函数后 这个函数内部每声明一个变量都会这个变量添加一个值为0的引用次数 上边也提到了垃圾回收机制中 会每过一段时间都会对内存进行扫描 当变量的引用次数为0时 就会把这个变量进行清除回收 而这个引用次数 则是每被引用一次 则这个引用次数+1 当引用的变量清除后 则-1 当被回收机制检测为0时则清除。let my_num = 123 定义一个没有被引用的变量 也就是说这个变量没有被其他变量所引用/使用 只是单纯的定义了一个数值变量并且没有使用。2. 没有被清除的定时器。
2023-08-13 21:44:40
191
1
原创 使用TS的一些基础知识
1. 类型推断 这种是ts自带的 例如我们在刚开始定义变量时 给变量赋值 例如 我给str = ‘123’ 给他设置成为 字符串形式 那么ts会认为 你的str变量就是一个字符串变量 那么在后期使用的时候 如果你将这个变量修改为不是字符串变量时 就会报错 这是为了防止 这个变量在后期使用字符串方法时 但修改为了其他类型而出现错误。上边这种情况 为什么 result会报错呢 是因为 在系统自动类型推断的时候 他推断你的result这个值 可能会出现undefind情况 因为例如我。
2023-08-13 20:40:31
113
1
原创 TS - interface和type的区别
闭包优点: 1. 可以获取其他函数中的变量 可以将一个函数内部的变量始终保存在内存中 （ 当我们调用了一个函数后 他的内部变量会在调用函数结束后自动删除内部的变量 但是如果内部使用闭包 则这个变量不会删除并且会始终保存在内存中 ）闭包的理解： 闭包就是一个函数定义在另一个函数的内部 这个内部的函数就是闭包 并且闭包函数可以访问函数内部的局部变量或私有变量 并且闭包可以形成封闭私有空间 不受外部影响 还可以让变量的值始终保存到内存中。2. 延长变量的声明周期。2. 可以在外部访问函数内部的变量。
2023-08-06 22:09:44
343
2
原创 pc端限制拖拽实现
还是一样首先我们在刚点击的时候通过event.pageX和pageY来获取到在刚开始点击时候的鼠标距离页面左上角的X轴和Y轴的左边 然后减去盒子距离左上角X轴和Y轴的左边 得到我们鼠标点击的位置距离盒子左边框和上边框的距离然后赋值给disX和disY。首先要实现拖拽的元素需要设置 绝对定位 如果不会添加多个的情况下 则可以使用relative相对定位 但是还是建议使用absolute 绝对定位。这三个let定义的变量为全局变量为了在后边的move事件中可以使用到down事件修改后的X，Y值。
2023-06-11 21:50:24
214
原创 用react实现手机端限制拖拽实现
之后 我们需要先给要拖拽的元素绑定一个onTouchStart事件之后我们定义四个全局变量在触摸事件的event事件中有touches/changedTouches/targetTouches三个属性他们的值都相同touches: 当前屏幕上所有触摸点的列表;targetTouches: 当前对象上所有触摸点的列表;changedTouches: 涉及当前(引发)事件的触摸点的列表在这里用那个都行然后pageX和pageY分别代表鼠标点击的位置距离页面左上角的距离如果父辈元素中有定位。
2023-06-11 19:03:43
465
原创 sort函数排序
方法提供给排序函数的参数。这是 JavaScript 语言规范中定义的行为。根据排序函数的返回值确定排序结果：如果排序函数返回一个小于 0 的值，那么。进行升序或降序排序，是因为这是 JavaScript 语言规定的。方法时，排序函数会被多次调用，每次调用时会传入两个参数。如果排序函数返回一个大于 0 的值，那么。分别代表数组中的两个元素，用于进行排序比较。方法的行为，而不是我们组件定义的变量。方法中，当排序函数作为参数传递给。如果排序函数返回 0，那么。综上所述，你之所以可以使用。
2023-06-08 19:21:33
49
1
原创 让元素沾满全屏
1：给盒子设置position绝对定位 然后让left top bottom right都为0。还有一种是 先需要将body的margin默认值设置为0 然后再通过设置vh和vw为100来设置宽高来实现。这里设置line-height 100vh 是为了让内容水平居中和垂直居中。让元素沾满全屏有两种方法。
2023-06-08 10:55:22
466
1
原创 react原生js爬楼
在这里需要明确两点 一：clientHeight是可视区的高度这个高度是不会变的也就是在没有开始滚动的时候的高度 然后scrollTop则是滚动高度他是不会计算clientHeight的高度的所以这两个元素相加就是我们滚动的总高度然后根据这个总高度来设置就可以了。然后在方法中我们通过document.querySelector获取到该元素然后通过该元素的clientHeight和scrollTop两个属性来实现爬楼效果。之后我们给这个元素设置滚动事件 当我们在这个元素中滚动的时候触发。
2023-06-05 16:28:35
59
1
原创 localStorage和sessionStorage的使用和区别
2-3：sessionStorage删除数据：sessionStorage.removeItem('password')2-2：sessionStorage获取数据：sessionStorage.getItem('password')1-3：localStorage删除数据：localStorage.removeItem('username')1-2：localStorage获取数据：localStorage.getItem('username')localStorage.getItem('键名')
2023-04-11 11:27:54
88
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人