askein的博客

原创 300TypeScript基础知识

/普通函数定义// 定义函数类型${// 定义函数类型 type GreetFn =(name : string) => string;// 定义函数类型 type GreetFn =(name : string) => string;

原创 【无标题】

fill:#333;color:#333;color:#333;fill:none;SQL QueryResultJSONUser。

原创 202React-Query：useMutation

本文对比了传统状态管理与TanStack Query的useMutation在数据修改操作中的差异。传统方法需要手动管理isLoading、error等状态，并通过try/catch处理错误，还需额外处理缓存同步问题。而useMutation自动提供异步状态管理，通过invalidateQueries实现声明式缓存同步，简化了代码结构并确保数据一致性。useMutation让开发者从繁琐的状态管理中解放，专注于业务逻辑实现。

原创 201React-Query:useQuery基本使用

React Query 基本查询指南：使用 useQuery 进行数据获取，包含两种状态处理方式（布尔状态和 status 字符串），推荐使用 isError 或 status === 'error' 处理错误。关键参数包括 queryKey 和 queryFn，支持重试次数(retry)、条件查询(enabled)、缓存时间(gcTime)等扩展配置。详细参数参考官方文档。

原创 200React-Query基础

【代码】200:React-Query基础。

原创 103React数据处理

能用 URL 解决的，绝不用 Store。首选 React Router v7处理所有和服务端数据获取 (Fetching)相关的逻辑。这会减少你 80% 的 Redux 代码。次选 Context处理全局静态配置。最后选 Redux处理剩下的、纯客户端的复杂交互逻辑。

原创 102React组建导入导出

JavaScript模块导出主要有默认导出和具名导出两种方式。一个文件只能有一个默认导出，但可以有多个具名导出。默认导出适用于单一组件文件，具名导出适合多组件或值导出的场景。两种导出方式对应不同的导入语法，混用会导致错误。建议始终为组件和文件命名，避免使用匿名导出，以便于调试和维护。

原创 101React的脚手架使用vite、pnpm、nvm

这里讲解一下用pnpm和vite步骤。

原创 100React脚手架和创建方式

本文对比了创建React应用的两种主流方式：基于Webpack的Create React App（CRA）和新兴的Vite工具。CRA采用预先打包机制，启动速度较慢但配置简单；而Vite利用原生ES模块实现按需加载，开发启动和热更新速度极快。文章还介绍了使用npx、pnpm等包管理工具执行脚手架的方法，并提供了详细的对比表格，帮助开发者根据项目需求选择合适的构建工具。Vite在生产环境使用Rollup打包，结合esbuild预构建依赖，在性能和开发体验上具有明显优势。

原创 数据结构：数组js基础知识

【代码】数据结构：数组js基础知识。

原创 前后端交互Ajxa、axios学习笔记（学习中）

文章摘要：本文介绍了AJAX技术（异步JavaScript和XML）的特点与优势。传统页面获取数据需要整体刷新，既浪费资源又影响用户体验，而AJAX通过原生JS支持实现了局部数据更新，无需刷新整个页面。不过这种异步交互方式也存在数据不在页面上、搜索引擎难以抓取的局限性。文中还提供了B站相关学习视频链接供参考。

原创 Promis学习笔记(学习中。。。)

这里一站式记录学习笔记。

原创 js类中方法this的指向（解析React的onClick = {this.demo}）

类中的方法默认打开strict严格模式，所以this的指向是undefineds1.speak()是属于通过实例调用将s1.speak 赋值给 onClick 变量 ，再调用 onClick()就不是通过实例调用了。

原创 004组件三大核心属性state

React组件实例的核心属性state详解 摘要：本文介绍了React类组件中state属性的基本用法。state是组件内部状态数据，需在constructor中初始化（如this.state={isHot:true}）。通过this.state访问状态值，React将原生事件（如onclick）重命名为驼峰式（如onClick），并使用{}包裹事件处理函数。注意函数组件没有this和实例对象，因此不适用此特性。示例展示了如何定义state、渲染组件和处理点击事件的基本模式。

原创 Js点击事件三种方法

本文介绍了三种JavaScript事件绑定的方式：1）使用addEventListener方法绑定点击事件；2）通过onclick属性直接赋值事件处理函数；3）在HTML元素中直接使用onclick属性调用函数。这三种方式都能实现点击按钮时弹出对应字母的提示框，展示了事件处理的不同实现方法。代码示例清晰展示了每种方式的语法特点和使用场景。

原创 003组件component讲解

React组件分为函数组件和类组件两种形式。函数组件可以是箭头函数或普通函数写法，接收数据并返回UI元素。类组件必须继承React.Component，包含constructor和render方法，render方法返回虚拟DOM。执行时，React会解析组件标签，调用相应函数或实例化类并执行render，最终将虚拟DOM转为真实DOM渲染到页面。函数组件适用于简单UI，类组件适合需要状态管理的场景。

原创 Vue八股复习

核心：数据改变触发依赖收集（Dep/Effect），渲染函数重新执行，生成新的虚拟DOM对比更新。：虚拟DOM（Virtual DOM）是用JS对象模拟真实DOM结构的树形表示。

原创 002Jsx基础语法规则

4.内联样式，要用style={{color:red,font:32px}}的形式去写。3.样式的类名指定不要用class，要用className。7.标签首字母小写，必须为html中同名标签。8.标签首字母大写，必须为已经定义的组件。1.定义虚拟DOM，不要写引号，用（）2.标签中样式混入js表达式要用{}5.虚拟dom只有一个根标签。

原创 001虚拟DOM

本文对比了真实DOM和虚拟DOM的特点。真实DOM操作性能较差，容易导致重排和重绘。虚拟DOM通过高效diff算法计算最小更新集合，批量异步更新到真实DOM，避免不必要的DOM操作。虚拟DOM既简化了开发（声明式UI编程），又提升了性能（内存中的轻量对象）。文章展示了两种创建虚拟DOM的方式：原生React.createElement方法和更简洁的JSX语法，后者通过Babel转换为JS代码。虚拟DOM是React框架实现高效渲染的关键机制。

原创 react入门简介（附面试题）

在 React 中，一切皆为组件。通常将应用程序的整个逻辑分解为小的单个部分。我们将每个单独的部分称为组件。组件可以是一个函数或者是一个类，接受数据输入，处理它并返回在 UI 中呈现的 React 元素。它表达逻辑而不显式地定义步骤。这意味着我们需要根据逻辑的计算来声明要显示的组件。声明式编程方式使得 React 组件很容易使用，最终的代码简单易于维护。声明式编程是一种编程范式，它关注的是你要做什么，而不是如何做。

原创 面试记错本：fn vs fn() 的区别之在回调函数、闭包中的细节

• 立即执行一次 + 每隔 t 毫秒执行 → 练习写 cancellable。• 使用 setTimeout 延迟取消 → 理解闭包在这里的作用。📝 面试复习知识点整理 — 定时器 & 箭头函数 & 闭包。• 定时器中访问外部变量（例如取消定时器 ID）• 闭包定义：函数 + 它创建时的词法作用域。• 用箭头函数包装 → 延迟执行 + 可传参。• 用于定时器、计数器、缓存、私有变量。(2) 函数立即执行 vs 延迟执行。• 直接写 fn() → 立即执行。• 写 fn → 延迟执行。2️⃣ 面试复习思路。

原创 css面试必会

原创 js面试手撕必会

【代码】js面试手撕必会。

原创 HTML面试八股文

iframe就是HTML中，用于网页嵌套的网页的。就是一个网页嵌套到另外一个网页中，可以嵌套很多层。

原创 1.两数之和（js）

【代码】1.两数之和（js）

原创 JS基础牛客刷题笔记

JS单项绑定

原创 Q14. 反转链表（js）

本文介绍了反转链表的两种方法。第一种是迭代法：使用临时变量存储当前节点，逐个反转指针指向，最后返回反转后的头节点。第二种是递归法：通过递归到达链表末端，然后逆向修改指针指向完成反转。两种方法都通过图示详细展示了指针变化过程，递归法重点解释了递归到最深处后如何逐步回调完成反转。代码实现部分展示了两种思路的具体写法。

原创 160.相交链表(js)

javascript 解决思路

原创 前端网页页面如何适配不同大小的屏幕

满足电脑、手机、平板等不同尺寸的屏幕正常访问网页。

原创 Js继承class

【代码】Js继承class（未完结）

原创 从js角度思考面向对象

对象就是：一个帮助我们完成过程隐藏细节压缩多余信息通过简单方法实现某些功能的角色。

原创 js严格模式

【代码】js严格模式。

原创 JS面试笔记50速记（更新中）

基本数据类型引用数据类型typeof返回的是object。所以typeof对于null和object都会返回object。

原创 Vue3 自动路由配置：使用 unplugin-vue-router 提升开发效率

自动路由是指根据文件系统的目录结构自动生成路由配置的功能。通过约定的文件命名和目录结构，框架可以自动识别并创建对应的路由，无需手动编写路由配置。如果需要添加自定义路由，可以通过扩展自动生成的routesroutes: [...routes,meta: {},],});使用可以大大简化 Vue3 项目的路由配置工作，通过约定优于配置的理念，让开发者专注于业务逻辑的实现。自动路由不仅提高了开发效率，还减少了人为错误的可能性，是大型 Vue3 项目的理想选择。

原创 前端Http面试高频速答

【代码】前端Http面试高频速答。

原创 手撕 deepClone：面试速通

]{}

原创 var const let 的区别 面试解答

原创 nvm use 无法创建连接，无效最懒的解决方法。

由于涉及到很多问题，新手解决比较困难，这里提供一个备选方案。直接手动在cmd里面建立连接。然后这里解释一下。两者的目录。第一个是nodejs目录。第二个是下载的node目录。

原创 CSS 盒模型面试速记：为什么重置IE盒模型。

使用border-box是因为它让宽度计算更直观——设置200px就是200px，包含了padding和border。这对响应式布局特别友好，避免了宽度溢出问题。现在主流框架都默认使用它，已经是业界最佳实践。

原创 css动画练习项目：太阳系行星运动模拟器

动画性能优化技巧使用transform而不是position使用提示浏览器使用开启硬件加速复杂动画时序控制使用 CSS 变量统一管理动画速度不同元素设置不同的使用创建时序差异3D变换效果保持3D空间创建透视效果多重transform组合使用视觉效果技巧多重box-shadow创建光晕创建球体效果创建阴影效果。