- 博客(78)
- 收藏
- 关注
RSS订阅
原创 学习TypeScript 之 Pick与泛型约束
何为Pick?type Pick<T, K extends keyof T> = { [key in k]: T[key]}就是从一个复合类型中，取出几个想要的类型的组合，例如：// 原始类型interface TState { name: string; age: number; like: string[];}// 如果我只想要name和age怎么办，最粗暴的就是直接再定义一个（我之前就是这么搞得）interface TSingleState { name: st
2020-06-21 00:16:33
23242
4
原创 动手写一个redux，react-redux以及对中间件的扩展(异步thunk，打印logger)
手撸的乞丐版如下，仅实现了最基础的功能，订阅，派遣，获取三个功能，不过已经可以简单使用了，做个计数器是没啥问题，而且可以更简单粗暴的看到redux的核心功能const REDUX_INIT_TYPE = "@@REDUX_INIT_TYPE"export function createStore(reducer) { let currentState = undefined; const currentListenerList = []; function getState() { ret
2020-05-13 18:17:05
369
原创 react之context学习笔记（contextTypes/childContextTypes，createContext，useContext）使用方法，及部分源码翻译
在react16.0之前，如果想要使用context，需要使用childContextTypes以及contextTypes// 父组件class TestContext extends Component { state = { childContext: "123" } constructor(props) { super(props...
2020-05-08 00:13:25
2803
原创 面试之《什么是流式渲染》
流式渲染（Streaming Rendering）是 React 18 引入的一项重要特性，它允许应用程序在服务器端逐步生成 HTML 并将其发送到客户端，而不是等待整个页面渲染完成后再一次性发送，从而显著提升用户体验和应用性能。
2025-03-12 08:24:38
494
原创 面试之《实现Event Bus》
Event Bus（事件总线）是一种用于在应用程序不同组件之间进行解耦通信的设计模式。它允许组件之间通过发布和订阅事件来进行交互，而不需要直接依赖彼此。以下介绍使用 JavaScript 实现 Event Bus 的方法。
2025-03-12 08:19:20
254
原创 面试之《commonjs，requirejs和es6 Module的区别》
【代码】面试之《commonjs，requirejs和es6 Module的区别》
2025-03-11 19:50:59
676
原创 面试之《webpack从输入到输出经历了什么》
综上所述，Webpack 从输入到输出的过程是一个复杂的编译和打包过程，涉及到配置读取、模块解析、依赖图构建、模块转换、代码合并、文件生成和插件执行等多个步骤。通过合理配置 Webpack 的加载器和插件，可以实现对不同类型文件的处理和优化，提高项目的开发效率和性能。
2025-03-11 19:30:38
587
原创 面试之《IntersectionObserver的使用》
用于异步观察目标元素与其祖先元素或顶级文档视口（viewport）交叉状态的变化。这在很多场景下非常有用，比如懒加载图片、实现无限滚动加载更多内容等。
2025-03-11 08:29:20
604
原创 面试之《react服务器组件--RSC》
React 服务器组件（React Server Components）是 React 18 引入的一项重要特性，它允许开发者在服务器端渲染 React 组件，为构建高性能、可维护的 React 应用提供了新的方式。下面从多个方面详细介绍 React 服务器组件。
2025-03-11 08:25:57
540
原创 面试之《vue keep-alive原理》
keep-alive会在内部维护一个缓存对象（cache）和一个键（keys）数组。当组件被包裹在keep-alive中并首次渲染时，keep-alive会将该组件实例缓存起来，并记录其对应的键。当再次需要渲染该组件时，keep-alive会从缓存中取出该组件实例，而不是重新创建一个新的实例，这样就避免了组件的重新渲染，提高了性能。keep-alive通过维护一个缓存对象和键数组，实现了组件的缓存和复用。在组件渲染时，优先从缓存中获取组件实例，避免了重复创建和销毁，同时利用activated和。
2025-03-10 22:18:56
562
原创 面试之《技巧》
如果这个问题你了解过，但是不是很熟悉，就只答自己有把握的，不要去扩展，很容易问到别人的专业领域里，然后从80分，直接降到60分左右（不过也分人，有的人觉得扩展的不太影响，有的就觉得你深度不够）。面试时说的每一句话都要经过大脑思考，他问什么，你就回答什么，除非你非常熟练，对这个特别熟悉，你可以跟他展开讲讲，但是要做好被打破砂锅问到底的准备。
2025-03-10 21:42:17
161
1
原创 面试之《浏览器的缓存策略》
浏览器的缓存策略主要用于控制资源的存储和读取，以提高页面加载速度和减少网络请求。通过合理配置和利用这些缓存策略，浏览器可以在保证获取到最新资源的前提下，最大程度地减少网络请求，提高页面加载速度和用户体验。
2025-02-27 14:48:28
381
原创 面试之《网络请求的资源如何强制不缓存》
在前端开发中，要强制网络请求的资源不被缓存，可以通过设置 HTTP 头信息以及在前端代码中进行相应配置来实现。在浏览器中，例如chrome浏览器，打开开发者调试工具的network面板，选中Disable cache选项，也可以强制不缓存。通过以上服务端和前端的设置方法，可以有效地强制网络请求的资源不被缓存，确保每次获取的都是最新的资源内容。这样，当客户端请求这些类型的资源时，服务器会返回相应的头信息，指示客户端不缓存资源。结尾的资源请求设置了不缓存的头信息，，表示资源已过期，需要重新获取。
2025-02-27 14:23:34
438
原创 面试之《chrome开发者调试工具的network中，disable cache做了什么？》
选项通过阻止缓存的读取和写入，强制浏览器每次都从服务器获取最新的资源，从而为开发者提供更准确的调试环境。在 Chrome 开发者调试工具的。总之，Chrome 开发者工具中的。
2025-02-27 14:22:47
255
原创 面试之《react hooks在源码中是怎么实现的？》
上述代码中，首次调用 useState 时会创建一个新的 Hook 节点并添加到 Hooks 链表中，后续调用则直接获取对应的 Hook 节点。对于每个函数组件，React 会维护一个 fiber 对象，fiber 是 React 内部用于协调渲染的核心数据结构，其中 memoizedState 属性指向该组件 Hooks 链表的头部。以上代码只是简化的实现，实际的 React 源码要复杂得多，包含了大量的错误处理、性能优化和兼容性处理等逻辑。在 useEffect 中，会比较前后两次的依赖项数组。
2025-02-26 13:08:43
400
原创 面试之《nodejs中，网络请求时stream和json的区别》
流以分块的方式传输数据，数据会被分成多个小块，逐个发送和处理。：流是 Node.js 中处理流式数据的抽象接口，它不是一种具体的数据格式，而是一种数据传输和处理的方式。：JSON 是一种轻量级的数据交换格式，本质上是文本形式的数据，通常由键值对组成，使用大括号 {} 表示对象，方括号 [] 表示数组。处理速度：对于大数据量的处理，流的性能优势明显，因为可以在数据传输的同时进行处理，不需要等待整个数据传输完成。：在处理文件或网络请求时，数据会以流的形式传输，每次传输一部分数据，而不是一次性传输整个数据。
2025-02-25 16:38:34
421
原创 面试之《react近几个版本的更新要点》
引入了全新的 Fiber 协调器，解决了旧版同步渲染长时间阻塞主线程的问题，实现了异步可中断渲染、优先级调度、时间分片等特性，大大提升了大型应用的性能和响应能力。：引入错误边界组件，它是一种 React 组件，能够捕获并处理其子组件树中发生的 JavaScript 错误，记录错误日志，并展示一个备用 UI，而不是让整个应用崩溃。：引入 getDerivedStateFromProps 和 getSnapshotBeforeUpdate 生命周期方法，以适应 Fiber 架构的异步渲染特性。
2025-02-25 14:10:58
388
原创 面试之《为什么要提出fiber的概念？解决的是什么问题？》
Fiber 概念的提出是为了改善 React 在处理大型应用和复杂 UI 更新时的性能问题，通过将渲染过程拆分成可中断的小任务单元，并引入优先级调度机制，使 React 能够更好地利用浏览器的空闲时间，提高页面的响应性和用户体验。
2025-02-25 08:29:12
330
原创 面试之《react中，fiber更新时，怎么判断fiber是否应该在当前idle内执行》
React Fiber 通过为每个任务分配过期时间，并在工作循环中不断检查当前时间是否超过过期时间来判断任务是否超时。如果超时，会暂停当前任务，将控制权交还给浏览器，以确保浏览器的响应性。
2025-02-25 08:26:17
294
原创 面试之《web安全问题》
1. csrf攻击 （Cross-site request forgery) 跨站请求伪造。利用用户的cookie，伪造用户操作接口。案例用户登陆了a网站，cookie已经生成。用户打开了钓鱼网站b，黑客在b网站中调用了a网站的接口，就可以用用户在a网站中的cookie去获取a网站的信息，甚至去调用支付接口。怎么预防cookie设置sameSite，只允许当前域名下访问后端验证请求头中的Referer值，如果非规定域名，则不允许操作接口。2. xss 利用系统漏洞注入有害代码，获
2025-01-15 12:23:10
525
原创 【菊花一紧】vscode崩溃后，暂存区的代码全无，如何拯救
电脑比较垃圾，启动的东西太多了，导致电脑卡死，强制重启后，代码全没了，之前用vscode提交到暂存区了，结果暂存区的东西全被还原了，git也找不到记录，没有commit。6.输入git cat-file -p [name] (这个name 分为两部分 1.当前文件夹名，2.文件名)4.打开objects按时间排序，找到对应到当前时间的文件夹，ad,09,98,76类似这样的文件。7.查看对应文件后导出文件，命令后面加自己的文件夹，以及文件名和类型。一定要常保存，提交。8.腌臜之事，希望大家别遇到文件丢失。
2024-01-31 10:25:40
1674
原创 umi/max如何给请求增加公共header
大功告成，理了将近5个小时，还是自己太菜了，应该直接去看plugin-request包的，结果先去看了umi中对app.ts的使用，期间又发现对@babel的parse，traverse，types包一脸懵逼，又去稍微了解了一下，花了三个小时，，因为是在app.ts中添加的配置，但是并不知道该配置是在何时何地如何被使用的，所以去翻阅了一下umijs/plugin-request源码。通过上面的代码，我们可以了解.umi/plugin-request/request.ts中的config是如何生成的。
2023-09-06 22:31:30
2061
原创 eggjs TypeError: Cannot set property router of #＜Object＞ which has only a getter解决方法
按照egg官网快速搭建的sequelize环境，结构如下home中const Controller = require("egg").Controller;class HomeController extends Controller { async index() { this.ctx.body = "Hello world"; }}module.exports = HomeController;npm run dev启动服务正常，访问127.0.0.1/则报错：TypeErro
2023-09-05 11:15:03
3102
原创 箭头函数和普通函数的区别
};// 在实例化时，每个箭头函数都会生成一个新的方法，导致方法不能共享一个内存。// instance1.arrowMethod === instance2.arrowMethod // false // 只要是继承了父构造函数，他们的普通函数都会被继承，且指向同一个内存地址，可以减少内存开支。
2023-08-04 10:47:03
291
原创 react面试之context的value变化时，内部所有子组件是否变化
为了解决父组件state更新，而导致子组件更新，我们需要给ABC三个组件的export default加上memo方法，第二个参数为PropsAreEqual，直接让他返回true。是因为他们共同使用了一个context，而他的value是一个对象，每次都会重新生成一个新的对象，所以导致B组件以为context更新了，所以他就会触发渲染了。此时更新a的值，并不会影响BD组件，只有A组件会更新。同时，更新b的值，也不会触发A组件的更新，只有BD更新。答案是不会，ABD都更新了，C没有更新。
2023-08-03 00:32:10
1896
3
原创 Next.js框架入门笔记
‘pages/_document.js’ 文件，自定义documentDOC： https://www.nextjs.cn/docs/advanced-features/custom-document<Head>是一个内置在 Next.js 中的 React 组件。它允许您修改页面的<head>。Docs: https://www.nextjs.cn/docs/api-reference/next/head<Link>组件切换路由，不会刷新浏览器。而<a>标签切换链接时浏览器会进行完全刷新。N
2023-07-14 18:42:22
1049
原创 Promise分享
JS异步的实现靠的就是浏览器的多线程，当他遇到异步API时，就将这个任务交给对应的线程，当这个异步API满足回调条件时，对应的线程又通过事件触发线程将这个事件放入任务队列，然后主线程从任务队列取出事件继续执行。以浏览器为例，有以下几个常见的进程和线程：在异步模式下，创建异步任务主要分为两种。ES6 规范中，宏任务（Macrotask） 称为 Task， 微任务（Microtask） 称为 Jobs。宏任务是由宿主（浏览器、Node）发起的，而微任务由 JS 自身发起。宏任务与微任务的几种创建方式 👇。
2023-07-14 16:59:08
277
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人