09 2024 档案

学习一下Array.reduce函数的使用
摘要：今天面试遇到一个问题，如下： 实现一个函数，把 [{ name: "Alice", age: 10 }, { name: "Bob", age: 20 }] 转换成 { Alice: 10, Bob: 20 } 然后我用for循环加Object.values的方法实现了，面试这时候问，能不能用red 阅读全文
posted @ 2024-09-28 23:02 飞向火星 阅读(11) 评论(0) 推荐(0) 编辑
一些cookie的知识点
摘要：cookie属性： 1.domain：指定了cookie应该被发送到哪些域，默认情况下，cookie只会被发送到设置它的那个域。可以设置更广泛的域，比如 .example.com，这样所有子域都可以访问这个cookie。 这里我们简单来了解一下域名和子域名。 子域名 定义：子域名是在域名前面添加的一 阅读全文
posted @ 2024-09-28 18:01 飞向火星 阅读(3) 评论(0) 推荐(0) 编辑
XSS攻击和CSRF攻击
摘要：一、XSS XSS，即跨站脚本攻击。是值攻击者在网站上注入恶意的客户端代码，通过恶意脚本对客户端网页进行篡改，从而在用户浏览网页时，对用户浏览器进行控制或者获取用户隐私数据的一种攻击方式。 比如在论坛上或者输入框内输入 "<alert>document.cookie</alert>"就可以拿到用户的 阅读全文
posted @ 2024-09-28 13:50 飞向火星 阅读(105) 评论(0) 推荐(0) 编辑
typescript里面 interface 和 type 的区别
摘要：标题的这个问题，最近面试遇到了四五次。 今天来解决一下 一、type和interface的定义 type关键字可以定义一个集合，可以包含各种类型的属性和值，以用来描述对象、函数、联合类型、交叉类型等。 type A = string; // 声明了一个类型别名A，同时它的类型等价于string类型 阅读全文
posted @ 2024-09-19 20:59 飞向火星 阅读(11) 评论(0) 推荐(0) 编辑
commonJs和ESModule的区别
摘要：1. 规范的区别 ESM模块的导入使用Import关键字，导出使用export关键字。 commonJs导入使用require关键字，导出使用module.export 2. 文件名后缀不一样（这一点不用记，针对Node） 在node.js，默认将 .js后缀文件识别为CJS模块，.cjs也是CJS 阅读全文
posted @ 2024-09-18 10:23 飞向火星 阅读(212) 评论(0) 推荐(0) 编辑
将项目里的moment替换为day.js
摘要：day.js有和moment.js完全一样的API，但是它的体积却比moment要小的很多，moment打包后的体积有280kb左右，而day.js打包后只有6.3KB。它非常轻量化，因为它可以利用treeShaking 如果你的项目里面使用的是moment.js，而你想要把它替换成day.js，很 阅读全文
posted @ 2024-09-14 19:48 飞向火星 阅读(59) 评论(0) 推荐(0) 编辑
给你一个promise数组，我需要并行执行，并且数组里面所有promise全部抛出错误之后，才抛出错误，该怎么做
摘要：今天面试，遇到如标题这么一个问题，真的给我问懵逼了，一开始想说使用promise.all，但是不行，因为promise.all只要有一个抛出错误了，整个promise.all就全部失败了。当时给我问的支支吾吾的打答不出来，并且还需要并行执行，想破头了都想不出来。后面回来重新学习ECMAScript才 阅读全文
posted @ 2024-09-11 15:02 飞向火星 阅读(4) 评论(0) 推荐(0) 编辑
useEffect和useLayoutEffect的区别
摘要：它们两个的区别主要是执行时机的不一样，要理解执行时机。首先我们来了解下浏览器的执行流程，dom树和cssom树合并为render树之后，后面的流程概括来说就是layout布局，和paint（绘制，就把最后布局好的树画在屏幕视图上）。 这里直接揭晓答案，useLayoutEffect是在layout之 阅读全文
posted @ 2024-09-10 17:52 飞向火星 阅读(36) 评论(0) 推荐(0) 编辑
react 学习之从diff children看key的合理使用
摘要：大部分优化环节react都自己在内部处理了，但有一种情况也值得开发者注意，那就是列表中key的使用，合理的使用key有助于能精确的找到用于新旧节点复用的老节点。那么我们这里来学习下react 是如何diff children的，从源码的角度看。 用几个案例来描述React diffChild核心流程 阅读全文
posted @ 2024-09-07 12:10 飞向火星 阅读(3) 评论(0) 推荐(0) 编辑
react16之前的虚拟dom数据结构简单简介
摘要：在react 16之前的版本中，虚拟dom节点的数据结构看起来大致如下 const VitrualDom = { type: 'div', props: { class: 'title' }, children: [ { type: 'span', children: 'Hello ConardLi 阅读全文
posted @ 2024-09-06 21:24 飞向火星 阅读(10) 评论(0) 推荐(0) 编辑
伪类和伪元素
摘要：伪类选择器就是我们常用的 :hover、:link、:focus、:nth-child(n)等 伪元素一般使用两个引号 ::before、::after、::first-line。 伪类和伪元素的区别 伪类的操作对象是文档数中已有的元素，而伪元素则是创建了一个文档树外的元素。有没有创建一个文档树外的 阅读全文
posted @ 2024-09-05 16:51 飞向火星 阅读(5) 评论(0) 推荐(0) 编辑
react diff 学习之tree diff
摘要：tree diff主要针对的是react dom节点跨层级的操作。什么是跨层级的操作呢？ 除同级之外的操作都是跨层级。比如A节点下有B和C，A的同级有个小狗节点，现在把整个A节点移到小狗节点下。 对于这种跨层级操作，react只会进行创建和删除操作，当根节点发现子节点A消失了，就会直接销毁A，当小狗 阅读全文
posted @ 2024-09-03 22:13 飞向火星 阅读(3) 评论(0) 推荐(0) 编辑
react diff 学习 之 component diff
摘要：所谓的diff算法，其实就是react 同时比较两棵虚拟dom树之间的差异，一颗是当前的dom结构，另一棵在react状态变更将要重新渲染时生成。react通过比较这两棵树的差异，决定是否需要修改dom结构，以及如何修改。并且，最大程度的复用旧的节点，来减少真实的dom渲染。在这个过程中进行比较的算 阅读全文
posted @ 2024-09-03 12:19 飞向火星 阅读(33) 评论(0) 推荐(0) 编辑
在diff的过程中，什么是就地复用
摘要：首先，先简单介绍一下什么是diff，在react或者vue框架中。组件更新时，不会直接去操作DOM，而是首先更新虚拟dom。比如一次更新中，更新了10次数据，那么反应到页面上，就会更新10次dom。这是很浪费性能的，所以虚拟dom就产生了，把10从更新，聚集到一块，统一更新一次虚拟dom，让后再更新 阅读全文
posted @ 2024-09-02 20:56 飞向火星 阅读(6) 评论(0) 推荐(0) 编辑