- 博客(25)
- 收藏
- 关注
RSS订阅原创 React常见的Hook钩子函数
在 React 中传递属性只能一层一层传，如果组件结构比较复杂，层级比较深的时候，数据传递起来就比较麻烦，可能会经过很多次的传递才能将属性传递到目标组件中，那么有没有一种可以在全局进行状态共享的实现方法呢？它可以对多个值进行管理，他的定义方式和useState很像，但是，useState 是基于它实现的，使用时注意定义的参数。上面写的都是一些不需要清除的副作用，只是回调触发一些简单的方法，但是有一些副作用是需要清除的。事件，在这种情况下，清除工作是非常重要的，可以防止引起内存泄露，例如下面给出的代码对比。
2025-08-29 10:32:36
1376
原创 详解 Vue 生命周期
详细：这个钩子函数获取dom的内容是更新之后的内容生成新的虚拟dom，新的虚拟dom与之前的虚拟dom进行比对，差异之后，就会进行真实dom渲染。详细：这个钩子函数初始化的不会执行,当组件挂载完毕的时候，并且当数据改变的时候，才会立马执行,这个钩子函数获取dom的内容是更新之前的内容。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。详细：当组件销毁的时候，就会触发这个钩子函数代表销毁之前，可以做一些善后操作,可以清除一些初始化事件、定时器相关的东西。
2025-08-27 23:43:31
835
原创 详细解说React生命周期
当我们使用各种框架开发程序时，当这个框架启动、程序刚运行时、各个页面之间的交互、数据渲染到页面上面、程序运行结束，应当会有个闭环的操作，而在这个环的起点和终点之间的各个节点，框架给给定一些特定函数供我们自行调用，方便我们执行一些操作，这便是生命周期。简单来说：组件从创建、更新到销毁的完整过程。其意义在于：有助于理解组件的运行方式、完成更复杂的组件功能、分析组件错误的原因等。在 React 中有函数组件和类组件。类组件中有生命周期函数，函数组件中用useEffect来代替生命周期函数的功能。
2025-08-27 11:53:43
1431
原创 介绍Webpack、分包策略、代码分割优化、Tree Shakin、热更新、优化......
从入口文件出发，调用所有配置的 Loader 对模块进行编译，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理（对所有的依赖文件进行编译，编译过程依赖 loaders， 不同类型的文件使用不同的 loader 进行解析，最终解析生成抽象语法树）6. 输出资源：根据入口和模块之间的依赖关系，组装成一个个包含多个模块的 Chunk,再将每个 Chunk 转换成一个单独的文件加入输出列表中，这是可以修改输出内容的最后机会。由于Webpack运行在Node.js之上，默认是单线程的。
2025-08-26 18:19:19
1224
原创 Vue3 和 React 的区别，及其状态管理库的异同
Vue 和 React 是目前最流行的前端框架之一，它们各自有不同的文件类型和开发方式。Vue 使用.vue文件，而 React 使用.tsx文件。Vue3 通常被认为学习曲线更平缓，提供更便捷的开发体验，其 Composition API 和 Pinia 状态管理库使得代码组织和逻辑复用更为直观。React 则以其 JSX 的灵活性、庞大的生态系统和函数式编程范式著称，对开发者的 JavaScript 功底要求更高，但提供了更强的定制能力。特性维度Vue 3说明与解读核心思想。
2025-08-26 13:35:26
998
原创 详细介绍Vue-Router及其实现原理、路由模式
是 Vue Router 提供的三种路由模式之一，主要用于非浏览器环境，例如服务器端渲染（SSR）或其他不支持浏览器 API 的场景。abstract 是vue路由中的第三种模式，本身是用来在不支持浏览器API的环境中，充当fallback，而不论是hash还是history模式都会对浏览器上的url产生作用，本文要实现的功能就是在已存在的路由页面中内嵌其他的路由页面，而保持在浏览器当中依旧显示当前页面的路由path，这就利用到了abstract这种与浏览器分离的路由模式。
2025-08-25 16:12:12
1149
原创 什么是事件循环（Event Loop）？浏览器和 Node.js 中的事件循环有什么区别？
事件循环是 JavaScript 实现异步编程的核心机制之一，用于协调同步代码、异步任务（宏任务、微任务）的执行顺序，避免代码阻塞。同步任务进入主线程，即主执行栈，异步任务进入任务队列，主线程内的任务执行完毕为空，会去任务队列读取对应的任务，推入主线程执行。上述过程的不断重复就事件循环。详细说就是：先进行同步任务、执行过程中遇到宏任务或微任务放到各自队列。同步任务执行完了以后先查看微任务队列中有没有任务，执行队列所有任务以后再取一个宏任务进行执行，这样一个循环往复的过程就是事件循环。
2025-08-25 15:47:39
1133
原创 微信小程序常见知识点
（1）先创建一个components文件夹，用来存放所有自定义组件的，目录结构依然是js,wxml,json,wxss（2）基本配置json——进行自定义组件声明（3）使用组件假如在index.wxml中使用这个自定义的组件，首先在index.json中进行声明。（4）接着在index.wxml中引用（5）然后在index.js进行配置（6）使用时直接执行this.toastdemo.showToast(‘弹框组件调用成功’,2000)就可以了基础事件（BaseEvent）type: 事件类型。
2025-08-21 11:21:11
1355
原创 从Token介绍到单点登录SSO
单点登录（Single Sign-On，简称SSO）是一种身份验证机制，指在同一帐号平台下的多个应用系统中，用户只需登录一次，即可访问所有相互信任的系统。简而言之，多个系统，统一登陆。（允许用户在一次登录后，通过一组凭据（如用户名和密码）访问多个相关应用程序或系统，而无需为每个应用程序都重新输入凭据。通过 cookie 进行验证cookie 是某些网站为了辨别用户身份，由服务端生成，发给客户端暂时或永久保存的信息。简言之，cookie 就是一种存储用户数据的媒介。
2025-08-21 09:53:49
1334
原创 认识Node.js及其与 Nginx 前端项目区别
node.js是一个平台，或者说是一个运行环境。Node.js 是一个开源、跨平台的 JavaScript 运行时环境，它允许开发者在服务器端运行 JavaScript 代码。Node.js 对前端开发者来说，不仅是一个后端工具，更是现代前端开发的重要组成部分。通过学习 Node.js，前端开发者可以更高效地构建工具链、处理服务端逻辑、优化前后端协作，并提升全栈开发能力。Node.js 并不强制要求使用 Nginx，但在生产环境中，结合 Nginx 可以显著提升性能和安全性。
2025-08-20 16:28:46
1451
原创 WEB安全篇：浏览器攻击原理及防护
1、XSS：跨站脚本攻击就是攻击者想尽一切办法将可以执行的代码注入到网页中。攻击者在web页面恶意插入HTML或script标签，当用户浏览该页面时，恶意代码就会被执行，从而达到攻击的目的。XSS利用的是。比如：攻击者在qq中发送一个看似安全的链接，骗取用户点击之后，窃取cookie中的用户私密信息；或者攻击者在论坛中加一个恶意表单，当用户提交表单的时候，却把信息传送到攻击者的服务器中，而不是用户原本以为信任的站点。1.类型。
2025-08-20 16:06:19
886
2
原创 详解Promise用法
Promise 是 JavaScript 中用于处理异步操作的一种重要机制。Promise 用于解决 JavaScript 中异步操作的复杂性，通过状态管理、链式调用、错误处理等功能，实现代码的清晰、有序与可维护，避免回调地狱，提升异步编程的效率与体验。
2025-08-19 17:50:04
1115
原创 最全讲解之JS实现类继承的方法
ES6 的继承机制完全不同，实质是先将父类实例对象的属性和方法，加到this上面（所以必须先调用super方法），然后再用子类的构造函数修改this。组合继承（原型链继承+借用构造函数继承）由于这两种继承方式都存在各自的优缺点，从而将他们优点结合起来，通过原型继承父类原型上的属性和方法，通过构造函数的方法继承父类的属性。缺点：组合继承是js最常用的继承模式，组合继承最大的问题就是无论在什么情况下，都会调用两次构造函数：一次是在创建子类型原型时，另一次是在子类构造函数内部。原型链继承的核心思想是让子类的。
2025-08-19 17:04:17
1060
原创 JS中判断数据类型的方法有哪些？
基本数据类型和引用数据类型的区别？基本数据类型：string，number，boolean，symbol，bigint，undefined等。-- 保存在栈内存当中，保存的就是一个具体的值。引用数据类型(复杂数据类型)：Object Function Array-- 保存在堆内存中，声明一个引用类型的变量时，它保存的是引用类型数据的地址。
2025-08-19 16:47:33
445
原创 Webpack打包流程及与Vite对比
首先，介绍一下为什么要进行 webpack 打包？理解透彻了方便更好记忆噢~和。在这种情况下，就要使用前端构建工具（如Webpack、Vite等）用于将开发环境下的源代码转换为生产环境下的可执行代码。简单来说：通过对代码进行优化、压缩和转换，确保应用在生产环境中高效、稳定地运行。1、性能优化减少文件体积：通过代码压缩和优化，减少文件体积，提高加载速度。减少HTTP请求：通过模块打包，将多个文件合并成一个文件，减少HTTP请求次数。2、 兼容性。
2025-06-18 17:59:19
709
原创 Vue的响应式原理 vs 双向绑定原理
响应式是Vue的核心特性之一，是指当数据改变后，Vue 会通知到使用该数据的代码，视图渲染中使用了数据，数据改变后，视图也会自动更新。响应式是通过数据劫持结合发布者-订阅者模式的方式来实现的，通过拦截对数据的操作，在数据变动时发 布消息给订阅者，触发相应的监听回调。
2025-05-29 13:19:47
1351
1
原创 超简单理解 Redux Toolkit
安装依赖：npm install @reduxjs/toolkit react-redux。提供 React 组件与 Redux store 的连接能力。包含了简化 Redux 使用的工具。替代了原先需要手动编写的很多代码。Redux 官方推荐的工具集。
2025-04-25 18:31:37
211
原创 从Vue+Vant+ref控制弹窗到用React+Antd+useRef去控制弹窗
【代码】从Vue+Vant+ref控制弹窗到用React+Antd+useRef去控制弹窗。
2025-04-24 17:08:25
172
原创 前端开发手册
必须使用 camelCase 驼峰命名必须指定类型必须加上注释，表明其含义必须加上 required 或者 default，两者二选其一如果有业务需要，必须加上 validator 验证props: {// 组件状态，用于控制组件的颜色status: {return ['succ','info','error'== -1},// 用户级别，用于显示皇冠个数必须使用 camelCase 驼峰命名必须指定类型必须加上注释，表明其含义。
2024-06-08 12:53:15
2180
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人