React的useQuery用法
useQuery 是 React Query 库中的一个自定义钩子函数,用于在 React 组件中进行数据查询。它提供了一种简化和统一数据查询逻辑的方式。下面是使用 useQuery 的基本步骤:
安装 React Query 库:使用 npm 或 yarn 安装 React Query 库。
导入必要的依赖:在需要使用 useQuery 的组件中,导入 useQuery 函数以及其他必要的依赖。
1import { useQuery } from 'react-query';
定义查询函数:创建一个异步函数,用于执行实际的数据查询操作。这个函数将返回一个 Promise,用于从源(rest、GraphQL 等等)获取查询结果。
12345const fetchData = async () => { const response = await fetch('https://api.example.com/data'); const data = await response.json(); ret ...
有难度的'说一下从url输入到返回请求的过程'
问题: 从浏览器地址栏输入url到请求返回发生了什么浏览器向 DNS 服务器请求解析该 URL 中的域名所对应的 IP 地址
url为啥要解析,dns查询规则是什么?因为网络标准规定了URL只能是字母和数字,还有一些其它特殊符号,而且如果不转义会出现歧义
那url编码的规则是什么呢?utf-8
然后怎么保证utf-8的编码?可以用 encodeURIComponent
encodeURIComponent 比 encodeURI有什么区别?encodeURIComponent 编码范围更广,适合给参数编码,encodeURI 适合给 URL 本身(locaion.origin)编码,当然项目里一般都是用 qs 库去处理
然后说说dns解析流程,并且html如何做dns优化?
浏览器中输入网址域名,操作系统会先查 hosts 件是否有记录,有的话就会把相对应映射的 IP 返回。
hosts 文件没有就去查本地 dns 解析器有没有缓存。
然后就去找我们计算机上配置的 dns 服务器上有或者有缓存,就返回
还没有的话就去找根 DNS 服务器(全球 13 台,固定 ip 地址),然后判断 ...
JavaScript的事件循环
同步和异步任务分别进入不同的执行”场所”,同步的进入主线程(执行栈),异步的进入 Event Table 并注册函数。当指定的事情完成时,Event Table 会将这个函数移入 Event Queue。主线程内的任务执行完毕为空,会去 Event Queue 读取对应的函数,进入主线程执行。上述过程会不断重复,也就是常说的 Event Loop(事件循环)。这里异步任务的 Event Queue 分两种情况的,即宏任务 (macrotask) 和微任务 (microtask),当主线程任务完成为空去 Event Quenu 读取函数的时候,是先读取的微任务,当微任务执行完毕之后,才会继续执行宏任务。综上事件循环为:同步 > 异步 微任务 > 宏任务那么微任务和宏任务都有什么呢,简单总结下就是:宏任务:整体代码 script,setTimeout,setInterval微任务:原生 Promise 相关,process.nextTick
12345678910111213141516171819202122232425async function async1() ...
TS使用初体验
今年年初的时候入职了新的公司,技术栈使用的是 Vue + Typescript,先不说 Vue,TS 之前只是看了一些文章和官方文档,只是知道能在变量后面加个类型,就可以限制变量。后来入职后,不知不觉也写了大半年 TS,对于那些变量或函数要写,为了写了返回类型,VSCode 提示返回值还是 any 类型,泛型的具体应用,接口定义怎么写之类的问题,有了一点理解。
TS 是写给谁看/用的?首先,TS 是定义者给使用者写的。为了让使用者更方便(VSCode 提示)以及更安全(约束)的使用他提供的方法或者类。使用 TS,是有两个方式的,定义和使用。
VSCode 提示例如:定义者指定了一个方法:
123export function foo(name: string): number { return name.length}
那么作为使用者, 你会很清晰的通过 VSCode 的提示了解到该函数的参数和返回值信息:
而不需要去看源码,一些复杂的方法,如果没有良好的注释,即使看源码也不一定能很快的判断出来参数和返回值类型。
为了提供更完美的 VSCode 提示信息,还可以给 ...
ES6的Map在实际中的应用
在实际项目中,有时会遇到后端传的字段值需要通过字典转换,比如这样一个字典
1234567891011121314151617{ res: [ { code: 'apple', codeName: '苹果' }, { code: 'banana', codeName: '香蕉' }, { code: 'watermalon', codeName: '西瓜' }, ]}
当后端存储和返回的是 code 的时候,为了在页面上展示对应的中文名称,可以通过 Map 数据结构来进行高效的键值转换。具体要如何使用 Map 呢?
12345678910111213141516 ...
this绑定的四种方式
this是什么this 的绑定和函数声明的位置没有任何关系,只取决于函数的调用方式。学习 this 的第一步是明白 this 既不指向函数自身也不指向函数的词法作用域。this 实际上是在函数调用时发生的绑定,它只想什么完全取决于函数在哪里被调用。
绑定规则找到函数的调用位置后,判断需要应用下面四条规则中的那一条。首先会解释这四条规则,然后解释多条规则可用湿他们的优先级如何排列
默认绑定首先是最常用的函数调用类型:独立函数调用。可以把这条规则看做是无法应用其他规则时的默认规则
12345678910111213141516171819202122function foo() { console.log(this.a);}var a = 2;foo();// 2``` 当调用 foo() 时,this.a 被解析成了全局变量 a,因为在本例中,函数调用时应用了 this 的默认绑定,因此 this 指向全局对象。要知道是否使用了默认绑定。可以通过查看 foo() ...
Sass和Less的区别
Sass和Less介绍
Sass
兼容所有版本的 CSS
专业 CSS 扩展语言
使用变量
嵌套 CSS 规则
支持导入 SASS 文件
静默注释
混合器
使用选择器继承来精简 CSS
Less
增加了变量、Mixin、函数等特性
可以运行在 Node 或浏览器端
二、Sass和Less区别总结
Sass 语法类似 HTML,属于缩排语法,目的就是为了更快更好写,更容易阅读。Less 赋予了 CSS 动态语言的特性,如变量、继承、运算、函数,LESS 既可以在客户端上运行,也可以在服务端运行。
变量符不一样,less 是 @,而 Sass 是 $
Sass 支持条件语句,可以使用 if{}else{},for{} 循环等等。而 Less 不支持。
对象的两种引用方式
两段代码
123456789101112function person() { return { name:"a", age:22 }};var obj1 = person();var obj2 = person();obj1.name = 'b';console.log(obj1);console.log(obj2);
结果
12{name: "b", age: 22}{name: "a", age: 22}
12345678910111213let obj = { name:"a", age:22}function person() { return obj};var obj1 = person();var obj2 = person();obj1.name = 'b';console.l ...
url编码及api的使用
在因特网上传送 URL,只能采用 ASCII 字符集,即是常说的 get 请求只能使用 ASCII 字符。
也就是说 URL 只能使用字母和数字[0-9a-zA-Z]、一些特殊符号$-_.+!*’()[不包括双引号]、以及某些保留字(空格转换为+),才可以不经过编码直接用于 URL。
Javascript 中提供了3对函数用来对 url 编码以得到合法的 url,他们分别是
escape / unescape
encodeURI / decodeURI
encodeURIComponent / decodeURIComponent
这三个编码的函数——escape,encodeURI,encodeURIComponent——都是用于将不安全不合法的 Url 字符转换为合法的Url字符表示,它们有以下几个不同点。
安全字符不同:下面列出了这三个函数的安全字符(即函数不会对这些字符进行编码)
123escape(69个): */@+-._0-9a-zA-ZencodeURI(82个): !#$&'()*+,/:;=?@-._~0-9a-zA-Zencod ...
JS的作用域
编译原理在介绍 JS 的作用域之前,先介绍一下编译原理。
JavaScript引擎进行编译的步骤和传统编译语言比较相似,但在某些环节比预想的复杂。
在传统的编译语言中,程序中的一段源代码在执行之前会经历三个步骤,统称为“编译”。
分词/词法分析:将有字符组成的字符串分解成(对编程语言来说)有意义的代码块。
解析/语法分析:将词法单元流(数组)转换成一个有元素逐级嵌套所形成的代表了程序与法结构的树。这个数被称为“抽象语法树”(Abstract Syntax Tree, AST)。
代码生成:将 AST 转换为可执行代码的过程。
理解作用域如 var a = 2,变量的复制操作会执行两个动作,首先编译器会在当前作用域中声明一个变量(如果之前没有声明过),然后在运行时引擎会在作用域中查找该变量,如果能找到就对它进行赋值。
LHS 和 RHS引擎会为变量 a 进行 LHS 查询,另外一个查询的类型叫做 RHS。含义分别为 Left Hand Side 和 Right Hand Side。
即变量出现在复制操作左侧时进行 LHS 查询,出现在右侧时进行 RHS 查询。RHS 查询与简单的查找 ...