- 博客(117)
- 收藏
- 关注
原创 前端网络请求
例如哔哩哔哩官网上展现的资源其实都是通过请求获取的:是从霹雳霹雳服务器上请求信息,然后传输到客户端本地(浏览器)页面资源越多,传输的的次数越多,每一次的传输就被称为前端向后端请求有三种方式:ajax(原生),axios(第三方库),fetch(替代原生ajax的API)
2025-03-21 17:37:28
1019
1
原创 React类的生命周期
函数式组件只有属性,没有状态,更没有生命周期的概念,但是函数式组件在React16.8引入hooks以后,可以在函数式组件里使用state和生命周期等特性,拥有类似于类组件的能力,同时保持简洁和易用性。在生命周期的某个阶段会触发的东西写不写本身不会影响组件的执行,但是写的话会在生命周期的某个阶段触发整个生命中周期分为三个阶段:初始化阶段、运行阶段、销毁阶段执行顺序:WillMount=>render=>DidMount。
2025-03-18 22:40:06
1044
1
原创 类组件的非父子通信
pubilc里放的是我们整个项目的静态资源,每次可以通过localhost:3000访问资源也是先访问的public里的index.html效果是这样。
2025-03-16 22:05:30
365
原创 React:类组件(下)
设置默认值,使用ref来从DOM节点中获取表单数据,defaultValue设置默认值,不去控制后续的更新非受控组件可以减少你的代码量,也不会受外部的控制。
2025-03-13 16:52:53
840
原创 React:类组件(中)
React写进{}内的东西,不允许被当作代码块解析,是为了防止xss攻击和代码注入是一种常见的安全漏洞,攻击者通过注入恶意脚本到网页中,从而在用户浏览器中执行恶意代码。XSS 攻击通常发生在 Web 应用程序中,尤其是当用户输入的内容未经过滤或转义就直接显示在页面上时。:恶意用户可以通过注入 HTML 或 JavaScript 代码,篡改页面内容或窃取用户数据不过如果你想忽略跨站脚本攻击也是可以的dangerouslySetInnerHTML 是React 中用于直接设置 HTML 内容的一个特殊属性。
2025-03-10 22:48:07
710
原创 React:Axios
axios可以在浏览器和node.js两边跑,可以向服务端发起ajax请求,也可以在node.js里运行,向远端服务发送http请求获取失败了,报错404了查了半夜发现前后端端口号不同涉嫌跨域(CORS)问题,此时要么修改前端,要么修改后端,消除跨域问题我选择了把二者端口号改成一样的,就不跨域了好了,现在变成这样了,报错还是404GPT用它最后的波纹告诉我,用liver server,会自动帮我运行一个静态服务器再把后端端口号改为和前端一样的就好了这么重要的东西为什么没人说!!
2025-03-06 21:55:28
1042
原创 React:Redux
Redux感觉像组件通信的中介state存放被管理的状态action是申请改哪些数据,传入什么参数reducer是怎么修改数据我的理解更像是action像一个储存方法的对象,reducer是具体的方法的实现,不同的方法实现也不一样store是个仓库,存储应用状态的仓库。
2025-03-05 22:36:24
891
原创 千峰React:外部库引用
如果不强制刷新是这样:每次count在下一轮才更新react自动进行批处理,一次按按钮修改两次count,最终一起渲染,叫自动批处理。
2025-03-03 21:50:57
1068
原创 千峰React:组件与逻辑封装(下)
三个关于生命周期的钩子负责初始化负责卸载判断是否已经卸载进行对bool值的切换toggle可以切换state的状态,setFalse可以设置为false,setTrue可以设置为true可以实现类似的效果其实useBoolean是在useToggle的基础上实现的,useBoolean主要是针对bool值实现的,useToggle是可以在其他值上实现的只不过useToggle的参数里,第一个是true,第二个就默认是false,所以也可以设置成别的值还有别的hooks,以后用到了单独讲。
2025-03-03 11:41:55
1088
原创 千峰React:组件与逻辑封装(上)
</div>其实这些自定义hooks也被别人写好了,比如ahooks和react-use下载ahooksahooks暂时不支持raect19,所以需要降版本npm install ahooks//下载ahooksreturn (<div>
2025-03-02 20:11:13
738
2
原创 千峰React:案例二
刚刚数字一直在疯涨,导致他疯涨的原因是我的useEffect没加依赖数组,还有axios的url,如果我的数据文件在public里,可以直接从根目录访问(好像学过),要写成这样👇。还有一个无语的bug是箭头函数的return每次都会加大括号忘记加retuen,不加return又会格式化到下一行。里面包的是函数,之前学的useCallback可以解决函数被Object.Is()判别为不同的问题。每次改变状态时都会重新渲染,提升性能,使用memo,只有props不同的时候才会渲染。的值无法动态传递,因为。
2025-03-01 16:22:05
415
原创 千峰React:Hooks(下)
useLayoutEffect在useEffect之前触发这样会闪屏,因为是异步的,两次都渲染了换上useLayoutEffect不闪屏,在异步的情况是等两者都执行完以后渲染触发多次的时候还是useEffect好,解决闪屏问题用useLayoutEffect。
2025-02-28 22:29:05
1247
1
原创 千峰React:函数组件使用(3)
首先看这个代码这里面使用了多个useState(),在点击事件里只对count做改变,count++,对应的count2和count3不改变,是因为react里有一套状态管理机制,React 内部维护了一个状态池(state pool),用于存储每个组件的状态。当组件重新渲染时,React 会根据组件的顺序查找对应的状态值。例如在这个代码里,每点击一次,第一个useState内部就会更新保存他的调用顺序,以便在下一次调用的时候直接获取上次执行的结果、点击以后报错。
2025-02-25 22:03:22
1041
1
原创 千峰React:脚手架准备+JSX基础
组件化->封装性React提供函数组件实现组件化React和传统JS的区别就是JS需要手动管理DOM操作,: 采用组件化开发,通过虚拟DOM提升性能。是一种软件设计模式,全称为(模型-视图-控制器)。它将应用程序的逻辑分为三个核心组件,以实现代码的分离和模块化保证自己的node版本在14.18+、16+main.jsx是主入口vite构建的react和vue很像,但是npx构建的完全不像可以用ESlint检测代码报错。
2025-02-18 03:04:09
465
原创 想品客老师的第十三天:宏任务、微任务--js任务调度流程
先执行同步代码,创建promise本身是同步的,所以先创建promise,创建完立马执行他的执行函数,所以第一个被打印的是【promise的立即执行函数里的同步部分】,也就是打印promise。定时器的任务是宏任务,无论等待时间短还是长,都先进行同步任务,进行同步任务的时候定时器正常计时,等到同步任务结束,宏任务被放到宏任务队列里,就可以直接执行定时器内的任务。如果有两个定时器,在等完同步任务结束后,这两个定时器谁定的时间短,也就是计时的快,就先把谁放进宏任务队列里。任务共享内存,最终i是几?
2025-02-15 01:52:31
128
原创 想品客老师的第十二天:异步和promise(上)
先执行同步代码,创建promise本身是同步的,所以先创建promise,创建完立马执行他的执行函数,也就是resolve,所以第一个被打印的是【promise的立即执行函数里的同步部分】,也就是打印promise。发现宏任务里还有微任务(这就相当于下一个循环,下一个从同步->微任务->宏任务的循环),执行立马的微任务,打印【成功】在当前调用栈清空后,事件循环会优先清空微任务队列中的所有任务,然后再执行宏任务。第三步执行微任务,微任务队列里是promise里的then,打印为【成功】
2025-02-06 18:21:02
861
原创 想品客老师的第十一天:模块化开发
模块化开发可以提高代码的可维护性、可读性和复用性,同时降低开发和调试的复杂性,把业务根据功能分开写,解决变量命名的冲突,可以开放部分接口给类(例如调用模块里的一个函数)也更适合团队协作模块化的开发方式可以提供代码复用率,方便进行代码的管理。通常来说,一个文件就是一个模块,有自己的作用域,只向外暴露特定的变量和函数。目前流行的js模块化规范有CommonJS、AMD、CMD以及ES6的模块系统。在这里我们自己写一个,可以更好的理解模块管理实现模块的添加、定义、依赖,使用容器管理模块其他想说的都在代码里了:
2025-02-04 22:45:23
199
原创 想品客老师的第十天:类
关于symbol可以保护数据这里之前在对象学过类似的概念,但是我没懂:如果想保存的话可以把属性定为私有属性,symbol可以让他变成私有属性// name: "后盾人",age: 10,},// user.data.name = "你好";那你就要问了:symbol和私有属性什么关系,为啥symbol可以防止被修改?deepseek太卡了,我们有请老朋友chatgpt作答:Symbol 本身并没有提供不可修改(immutable)功能。
2025-02-02 22:53:51
872
原创 想品客老师的第九天:原型和继承
原型与继承前置看这里原型都了解了,但是不是所有对象都有对象原型obj2为什么没有对象原型?obj2是完全的数据字典对象,没有对象的关系但是这种对象用到的地方很少一句话,就是自己有方法就不要原型的方法,自己没有的才会向上检索函数拥有多个对象原型行吧这集没看懂。。。说的是个啥,以后再补
2025-01-30 22:21:26
377
原创 想品客老师的第八天:对象(下)
封装很好理解,就是把统一功能属性封装在一起;拿手机举个例子:手机里复杂的功能都被封装起来了,留给外部的只是一些按键和图标来访问,这就是抽象,不让外部那么容易的访问内部。用于将一个或多个源对象的可枚举属性复制到目标对象中。它执行的是浅拷贝(只复制属性的值,不复制属性的描述符)configurable:是否可以被删除或重新配置。这是查看对象里其中一个属性的属性特征。enumerable:是否可遍历。writable:是否可写。(也就是上面那四个属性)用于在对象上定义一个。这就是对象属性的特征。
2025-01-28 22:45:05
440
原创 想品客老师的第八天:对象(上)
展开语法是对对象或数组的批量处理,解构是对对象或数组结构的批量处理。在普通模式下,如果变量没有被显式声明,JavaScript 会。会被隐式声明为全局变量,代码不会报错。函数式编程改良->面向对象式编程。减少意大利面条式的编程结果。因此,在普通模式下,
2025-01-27 21:25:20
462
原创 想品客老师的第七天:闭包和作用域
函数在调用之前的声明相对于建造城市的计划,调用函数相当于城市动工了,调用多次函数相当于建造多个一样的城市(开辟多块空间),但是不是同一个城市,彼此独立。let是有块级作用域的概念,for里的定时器函数在i等于不同值的时候,会先向上一级找i,还没找到全局,就在父级找到i了,找到的i就等于此时i的值。而局部变量的值不用了,会被自动回收掉。var没有块作用域的原因居然是块作用域出的比var晚,推出let和const可以适用块作用域。n被return了,所以n++,但是m是独立的没有被外部调用,所以不++
2025-01-26 17:14:03
910
原创 想品客老师的第六天:函数
console.log('我是screenX函数,已经有一个和我一样的函数名了')像这样:但是实际上window里本来就有一个screenX属性,他们名字一样,新的会覆盖旧的,旧的旧不起作用了console.log(window.screenX)//返回浏览器左边界到操作系统桌面左边界的水平距离。这就是全局变量的缺点。
2025-01-24 22:24:51
655
原创 想品客老师的第五天:Map与WeakMap类型
Map对象保存键值对,并且能够记住键的原始插入顺序。任何值(对象或者)都可以作为键或值。原始值:string、number、bigint、boolean、symbol、undefined、null。
2025-01-23 04:11:50
423
原创 想品客老师的第四天:Set与WeakSet类型
Set对象允许你存储任何类型(无论是还是对象引用)的唯一值。集合(set)中的元素,你可以按照插入顺序迭代集合中的元素。
2025-01-22 18:04:25
763
原创 想品客老师的第一天:值类型使用
ECMAscript(也就是ES)是JavaScript的一个标准,就像c++的c11和c99一样,几把的一年出一套标准freeze()是一个对象方法,表示锁定、固定一个对象不可改变(因为const对于标量不可变,但是对于引用类型会被改变,所以作用是让const更const),如果想改变的时候显示报错信息可以加上一些其他比较重要的内容在往期涉及的文章里做了增添修改。
2025-01-18 20:06:31
351
原创 js:小寄巧们
深浅拷贝学go语言毁了我。。。js的深浅拷贝和go不一样,以为是我学糊涂了原来真的不一样哈。。。baba然后再聊一下什么是赋值:赋值是将一个变量的引用(内存地址)复制给另一个变量。两个变量会指向同一个内存地址;就像这样:修改其中一个的属性值,另一个也跟着改变,因为他们的内存地址相同所以为了避免这种情况,在js里给对象、数组这种引用类型使用了深浅拷贝。
2025-01-17 16:38:12
717
原创 js:深入面向对象
又是面向对象。。。。。。其实不止操作系统,很多系统的管理模式都是用面向对象的模式管理的管理者并不在乎你每个人的个体特征。在公司里,老板让你买咖啡,并且他很急。买咖啡有多种方式,例如点外卖、自己到楼下购买、托正在外面的同事捎来或者给老板花超绝三块钱冲雀巢等等。然后你就问老板说:老板,那我是去点外卖还是自己买还是给你冲速溶咖啡还是......老板根本不在乎你说的什么,他只会告诉你:不管怎样,我只要我的桌子上放有咖啡。员工只要搞到咖啡就好了,而老板考虑的就多了(勾潮的鸣式还在追我。
2025-01-16 19:28:34
963
2
原创 js:构造函数、数据常用函数
深入对象深入对象创建对象的三种方式1、利用字面量创建对象2、利用new(实例化)创建对象3、使用构造函数创建对象构造函数构造函数是一种特殊的函数,主要用于初始化对象常规的 {...} 语法允许创建一个对象。比如我们创建了佩奇的对象,继续创建乔治的对象还需要重新写一 遍,此时可以通过构造函数来快速创建多个类似的对象。用之前的方法,一次只能创建一个对象使用方法构造函数本质上就是一个常规函数,但是有两个约定俗成:1、他的命名以大写字母开头2、只能由new操作符来执行该构造函数。
2025-01-15 02:15:45
648
原创 js:变量提升、作用域、解构、箭头函数
这样写就是错的,因为fun是个变量,又是var声明的,此时只提升变量的声明,不提升赋值;JS中内存的分配和回收都是自动完成的,内存在不使用的时候会被垃圾回收器自动回收,正因为垃圾回收器的存在,许多人认为JS不用太关心内存管理的问题。在开发中【使用箭头函数前需要考虑函数中this的值】,事件回调函数使用箭头函数时,this为全局的window,因此。或表达式不在当前的作用域中,那么它是不可用的。闭包的作用:外部也可以访问函数内部的变量,把函数内部的变量传出去,同时又保护函数内部的数据。
2025-01-14 03:11:04
806
sos,修改了好久也不知道为什么错了的代码
2024-02-29
😭第一次用vjudge一直过不了,如何解决?(语言-c语言)
2024-01-14
TA创建的收藏夹 TA关注的收藏夹
TA关注的人