- 博客(24)
- 收藏
- 关注
RSS订阅原创 React---关于useCallback和useMemo的详解
1. 什么是useCallback和useMemo？ useCallback 和 useMemo 都是react可用于性能优化的内置hooks。 两者的区别在于：useCallback缓存的是一个函数，而useMemo缓存的是计算结果。 其使用语法如下：// useCallback// 第一个参数是一个回调函数，useCallback会缓存这个函数，返回缓存的回调函数// 第二个参数是依赖项，只有当依赖项改变时，才会重新创建这个函数cons...
2022-04-24 22:32:46
5213
原创 React---组件通信的方式
1.父子组件通信方式（1）传递数据（父传子）与传递方法（子传父） （2）ref标记（父组件拿到子组件的引用，从而调用子组件的方法）ref的创建用xxx = React.createRef在父组件中清除子组件的input输入框的value--->this.refs.form.reset（）2.非父子组件通信方式（1）状态提升（中间人模式）React中的状态提升概括来说，就是将多个组件需要共享的状态提升到它们最近的父组件上，在父组件上...
2022-04-23 13:46:36
1452
原创 JavaScript---深拷贝和浅拷贝及代码实现
# 浅拷贝和深拷贝的问题1. 深拷贝和浅拷贝是只针对Object和Array这样的复杂类型的2. 也就是说a和b指向了同一块内存，所以修改其中任意的值，另一个值都会随之变化，这就是浅拷贝3. 浅拷贝， Object.assign() 方法用于将所有可枚举的属性的值从一个或多个源对象复制到目标对象。它将返回目标对象4. 深拷贝，JSON.parse()和JSON.stringify()给了我们一个基本的解决办法。但是函数不能被正确处理# 对象深度克隆(深拷贝)的简单实现 fun.
2022-04-22 19:51:59
239
原创 React---什么是受控组件、非受控组件
受控组件：在随后的用户输入中，能够控制表单中输入元素的组件被称为受控组件，即每个状态更改都有一个相关联的处理程序。例如，我们使用下面的 handleChange 函数将输入框的值转换成大写：handleChange(event) { this.setState({value: event.target.value.toUpperCase()})非受控组件：非受控组件是在内部存储其自身状态的组件，当需要时，可以使用 ref 查询 DOM 并查找其当前值。这有点像传统的 HTML。
2022-04-14 20:15:45
428
原创 React---解决跨域
# 方案一：react简单解决跨域可以直接在 package.json 中添加 proxy 属性# 方案二： 如果你已经进行了 npm run eject ，建议你直接修改 config>webpackDevServer.config.js ： proxy: { '/api': { target: 'https://xxxxxxxx', // 后台服务地址以及端口号 changeOrigin: true, //是否跨域 ...
2022-04-11 19:54:25
2216
原创 setState更新状态的2种写法及面试题
(1). setState(stateChange, [callback])------对象式的setState 1.stateChange为状态改变对象(该对象可以体现出状态的更改) 2.callback是可选的回调函数, 它在状态更新完毕、界面也更新后(render调用后)才被调用 (2). setState(updater, [callback])------函数式的setState ...
2022-04-06 19:50:09
264
原创 react/vue中的key有什么作用？（key的内部原理是什么？）
# react/vue中的key有什么作用？（key的内部原理是什么？） 虚拟DOM中key的作用: 1)简单的说:key是虚拟DOM对象的标识，在更新显示时key起着极其重要的作用。 2)详细的说:当状态中的数据发生变化时，react会根据【新数据】生成【新的虚拟DOM】,随后React进行【新虚拟DOM】与【旧虚拟DOM】的diff比较， 比较规则如下： a.旧虚拟DOM中找到了与新虚拟DOM相同的key: (1).若虚拟DOM中内容没变，直接使用之前...
2022-04-04 23:44:42
878
原创 React---兄弟组件通信传参
除了最常用的props传参的方式，追加一种消息订阅发布机制--PubSubJS进行传参安装依赖：npm install pubsub-js --saveoryarn add pubsub-js方法调用：import PubSub from 'pubsub-js'//在CommonJS可用const PubSub = require('pubsub-js');传递方：onClick = ()=>{ PubSub.publish('方法名',{key:v
2022-04-04 21:52:07
1370
原创 解决在QQ浏览器端 globalThis is not defined 报错
错误内容：react项目在运行时，在Chrome上运行正常，但在QQ浏览器上页面内容空白，并且在控制台报jsonp chunk loading:42 Uncaught ReferenceError: globalThis is not defined解决方法：在index.html文件的头部加上如下代码：<script> this.globalThis || (this.globalThis = this) </script>...
2022-04-03 21:18:10
2863
原创 JavaScript---两种定时器，setTimeout和setInterval的区别
setTimeout定义和用法setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。setTimeout 方法接收两个参数，第一个参数为回调函数函数或字符串，第二个参数为触发时间(单位：毫秒)。setTimeout(code, milliseconds, param1, param2, ...)setTimeout(function, milliseconds, param1, param2, ...)参数 描述 code 必需要调用...
2022-04-02 23:04:57
643
原创 什么是跨域，如何解决跨域问题
跨域协议，域名，端口，三者有一不一样，就是跨域如何解决跨域目前有两种最常见的解决方案：CORS，在服务器端设置几个响应头，如Access-Control-Allow-Origin: * Reverse Proxy，在 nginx/traefik/haproxy 等反向代理服务器中设置为同一域名 JSONP，详解见JSONP 的原理是什么，如何实现(opens new window)附代码: nginx 关于跨域的配置出现跨域问题的原因: 在前后端分离的模式下，...
2022-04-02 20:54:13
1240
原创 Promise及其底层的实现
Promise 是一个对象，保存着未来将要结束的事件，她有两个特征: 1、对象的状态不受外部影响，Promise 对象代表一个异步操作，有三种状态，pending进行中，fulfilled 已成功，rejected 已失败，只有异步操作的结果，才可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。 2、一旦状态改变，就不会再变，promise 对象状态改变只有两种可能，从 pending 改到fulfilled 或者从 pending 改到 rejected，只要这两种情况发生，状...
2022-03-31 20:35:45
671
原创 一些关于简历的分享
important 细节（排版、格式、标点、专业名词拼写、大小写、手机/邮箱格式）1.专业技能（熟练程度）2.教育背景3.工作经历4.项目经历STAR模式第一步，项目背景不用过多介绍，几句话即可。如果这个项目是一个大流量、大用户、复杂度高的项目，请一定描述出来，这是亮点。第二步，自己完成的任务，一定要写明“参与”还是“负责”，用词很重要。当然，如果你对项目的某一个模块很熟悉，也可以写“负责 xxx 模块”。只要你在面试时能回答的上来即可，完全看你个人对项目的熟悉程度。注意，对.
2022-03-29 19:50:41
307
原创 JavaScript---防抖和节流
相同:在不影响客户体验的前提下,将频繁的回调函数,进行次数缩减.避免大量计算导致的页面卡顿.不同:防抖是将多次执行变为最后一次执行，节流是将多次执行变为在规定时间内只执行一次. 防抖是指触发事件后在规定时间内回调函数只能执行一次，如果在规定时间内又触发了该事件，则会重新开始算规定时间。 主要运用在：输入搜索联想，用户在不断输入值时，用防抖来节约请求资源；按钮点击:收藏,点赞等 节流是指当持续触发事件时，在规定时间段内只能调用一次回调函数。如果在规定时间内又触发了该事件，则什么也不做,也不会...
2022-03-29 11:13:01
910
原创 HTML---iframe框架及优缺点
基本使用src：规定在iframe中显示的文档的URL frameborder：规定是否显示框架周围的边框 scrolling：规定是否在iframe中显示滚动条 width：规定iframe的宽度，建议使用CSS替代 height：规定iframe的高度，建议使用CSS替代 sandbox：启用一系列对iframe中内容的额外限制 marginwidth：定义iframe的左侧和右侧的边距 marginheight：定义iframe的顶部和底部的边距 srcdoc：规定在iframe中
2022-03-28 19:00:53
353
原创 JavaScript---简述原型/原型链
什么是原型：任何对象实例都有一个原型，也叫原型对象，这个原型对象由对象的内置属性_proto_指向它的构造函数的 prototype 指向的对象，即任何对象都是由一个构造函数创建的，但是不是每一个对象都有 prototype，只有方法才有 prototype。 什么是原型链？原型链基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。我们知道，每个构造函数都有一个原型对象， 每个原型对象都有一个指向构造函数的指针，而实例又包涵一个指向原型对象的内部指针。原型链的核心就是依赖...
2022-03-28 10:32:41
1004
原创 有关于TCP三次握手和四次挥手的理解
# TCP三次握手第一次握手：建立连接时，客户端发送syn包（syn=j）到服务器，并进入SYN_SEND状态，等待服务器确认；syn（同步序列编号）第二次握手：服务器收到syn包，必须确认客户的syn（ack=j+1)，同时自己也发送一个syn包（syn=k），即syn+ack包，此时服务器进入SYN_RECY状态第三次握手：客户端收到服务器的syn+ack包，向服务器发送确认包ack（ack=k+1),当此包发送完毕后，客户端和服务器进入established状态，完成三次握手完成三次握
2022-03-26 14:52:27
2926
原创 前端面试（自用）
# call() apply():俩者都是改变this的指向，在指向的作用域中调用该函数的方法并执行，不同的是，call()的传参是多个元素依次传的，而apply()则是通过数组的形式统一传参；<!-- bind()是调用该对象构成一个新的函数，不会立即执行 --># 如何进行跨域处理 jsonp，通过动态创建 script，再请求一个带参网址实现跨域通信。 缺点：JSON 只支持 get，因为 script 标签只能使用 get 请求； JSONP...
2022-03-25 12:23:00
942
原创 http常见的响应码
200 请求成功 202（Accepted），服务器已接受请求，但尚未处理。 204（No-Content），服务器成功处理了请求，但不需要返回任何实体内容 205（Reset-Content），服务器成功处理了请求，且没有返回任何内容。 206（Partial-Content），服务器已经成功处理了部分 GET 请求。 301 永久重定向，一般是地址发生变化 302 临时重定向 304 Not Modified（通常是在协商缓存中表示本次内容未修改） 4...
2022-03-23 22:01:25
1262
原创 a++ 与 ++a 的区别
a++和++a都是自增运算符，俩者的区别在于对变量a的值进行自增的时机不同==> a++是先取值后自增；++a是先自增后取值。例如 x = 3；（x++）+（++x） = 8;解=> x++此时取值为3，而后自增令x=4，那么参与++x的初始值x为4，则在自增后取值为5所以，3+5=8面试题：var a=10 ; b=20; c=4; 求++b+c+a++的值 ++b=21；a++=1...
2022-03-21 10:34:23
22898
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人