- 博客(56)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 带你彻底搞懂useLayoutEffect的使用场景
开篇第一句: useLayoutEffect 可能会影响性能。尽可能使用 useEffect。useLayoutEffect 是 useEffect 的一个版本，在浏览器重新绘制屏幕之前触发。
2024-08-11 20:51:06
15241
原创 React 高阶组件、Render props、hooks 有什么区别，为什么要不断迭代
Hoc、render props和hook都是为了解决代码复用的问题，但是hoc和render props都有特定的使用场景和明显的缺点。hook是react16.8更新的新的API，让组件逻辑复用更简洁明了，同时也解决了hoc和render props的一些缺点。
2024-08-11 20:35:32
15134
原创 剖析React18并发模型
Suspense的内部原理都是基于并发的，可想而知在这次更新中并发的重要性。但是，并发究竟是什么？React团队引入并发又是为了解决哪些问题呢？它到底是如何去解决的呢？前面提到的React18新特性与并发之间又有什么关系呢？相信大家在看官方文档或者看其他人描述React新特性时，或多或少可能会对以上几个问题产生疑问。因此，本文将通过分享并发更新的整体实现思路，来帮助大家更好地理解React18这次更新的内容。
2024-08-08 19:54:52
19520
原创 React类组件与函数组件有什么异同
组件是react的最小代码片段，无论函数组件还是类组件 在使用方式 和 最终呈现效果是一致的类组件可以用函数组件重构，同样函数组件也可以用类组件重构（并不推荐），在现代浏览器中闭包 和 类的性能只有在极端场景下才会有差异，所有认为基本一致差异从心智模型上分析，类组件是面向对象编程，核心概念是 继承 和 生命周期； 类组件的内核是函数式编程，主打immutable、没有副作用、引用透明（类中的this有很多自带属性，相对不透明）等之前，在使用场景，如果需要生命周期钩子，则首推类组件
2024-08-07 20:39:47
20318
原创 详谈React中 forwardRef、useImperativeHandle的使用场景
forwardRef(render)用法详解，使用场景，单层传递、多层传递、命令式句柄 useImperativeHandle等。render 函数用法将 DOM 节点暴露给父组件在多个组件中转发 ref暴露命令式句柄而非 DOM 节点疑难解答我的组件使用了 forwardRef，但是它的 ref 总是为 null
2024-08-07 19:39:56
21371
原创 前端优化之懒加载
懒加载也叫做延迟加载、按需加载，指的是在长网页中延迟加载图片数据，是一种较好的网页性能优化的方式。在比较长的网页或应用中，如果图片很多，所有的图片都被加载出来，而用户只能看到可视窗口的那一部分图片数据，这样就浪费了性能。如果使用图片的懒加载就可以解决以上问题。在滚动屏幕之前，可视化区域之外的图片不会进行加载，在滚动屏幕时才加载。这样使得网页的加载速度更快，减少了服务器的负载。懒加载适用于图片较多，页面列表较长（长列表）的场景中。
2024-08-04 17:25:32
26174
原创 centos安装nodejs报错问题，node: /lib64/libm.so.6: version `GLIBC_2.27‘ not found (required by node)
## 1. 使用兼容glibc-217的node包 ## 2. 使用与你的 glibc 版本兼容的 Node.js 版本 ## 3. 使用 Docker ## 4. 升级linux版本
2024-08-01 10:45:21
31558
原创 yum安装指定版本的nodejs
如果你需要特定版本的Node.js，你可能需要添加一个提供该版本Node.js的仓库或者手动下载并安装一个适合你系统架构的Node.js二进制包。如果需要特定版本的Node.js（例如18.x），推荐使用NVM（Node Version Manager）来安装。
2024-07-31 15:22:58
31840
原创 Http协议详解（二）
实际上HTTP协议规范并没有对get方法请求的url长度进行限制，这个限制是特定的浏览器及服务器对它的限制。IE对URL长度的限制是2083字节(2K+35)。由于IE浏览器对URL长度的允许值是最小的，所以开发过程中，只要URL不超过2083字节，那么在所有浏览器中工作都不会有问题。根据上面的数据，可以知道，get方法中的URL长度最长不超过2083个字符，这样所有的浏览器和服务器都可能正常工作。
2024-07-30 18:32:04
32674
原创 HTTP协议详解（一）
队列里的请求是没有优先级的，只有入队的先后顺序，排在最前面的请求会被最优先处理。如果队首的请求因为处理的太慢耽误了时间，那么队列里后面的所有请求也不得不跟着一起等待，结果就是其他的请求承担了不应有的时间成本，造成了队头堵塞的现象。服务器为了提高网站访问速度，对之前访问的部分页面指定缓存机制，当客户端在此对这些页面进行请求，服务器会根据缓存内容判断页面与之前是否相同，若相同便直接返回304，此时客户端调用缓存内容，不必进行二次下载。标识的资源在请求/响应的通信过程中可以使用的功能选项。
2024-07-30 18:26:39
32663
原创 前端性能优化之CDN加速
CDN一般会用来托管Web资源（包括文本、图片和脚本等），可供下载的资源（媒体文件、软件、文档等），应用程序（门户网站等）。使用CDN来加速这些资源的访问。
2024-07-29 08:46:50
34892
原创 浏览器同源策略详解、主流的跨域解决方案、深入理解跨域请求概念及其根因
跨域问题其实就是浏览器的同源策略造成的。同源策略限制了从同一个源加载的文档或脚本如何与另一个源的资源进行交互。这是浏览器的一个用于隔离潜在恶意文件的重要的安全机制。协议端口号域名必须一致。下表给出了与 URLURL是否跨域原因同源完全相同同源只有路径不同跨域协议不同跨域端口不同 ( http:// 默认端口是80)跨域主机不同同源策略：protocol（协议）、domain（域名）、port（端口）三者必须一致。
2024-07-29 08:40:47
35553
原创 浏览器本地存储详解、 cookie、sessionStorage、localStorage、IndexedDB
服务器端可以使用 Set-Cookie 的响应头部来配置 cookie 信息。一条cookie 包括了5个属性值 expires、domain、path、secure、HttpOnly。其中 expires 指定了 cookie 失效的时间，domain 是域名、path是路径，domain 和 path 一起限制了 cookie 能够被哪些 url 访问。secure 规定了 cookie 只能在确保安全的情况下传输，HttpOnly 规定了这个 cookie 只能被服务器访问，不能使用 js 脚本访问。
2024-07-28 18:07:55
35003
原创 浏览器渲染原理
Webkit 和 Firefox 都做了这个优化，当执行 JavaScript 脚本时，另一个线程解析剩下的文档，并加载后面需要通过网络加载的资源。这种方式可以使资源并行加载从而使整体速度更快。需要注意的是，预解析并不改变 DOM 树，它将这个工作留给主解析过程，自己只解析外部资源的引用，比如外部脚本、样式表及图片。
2024-07-28 17:59:02
34648
原创 进程与线程、僵尸进程和孤儿进程、管道通信、消息队列通信
一个进程就是一个程序的运行实例。详细解释就是，启动一个程序的时候，操作系统会为该程序创建一块内存，用来存放代码、运行中的数据和一个执行任务的主线程，我们把这样的一个运行环境叫。如果程序很多时，内存可能会不够，操作系统为每个进程提供一套独立的虚拟地址空间，从而使得同一块物理内存在不同的进程中可以对应到不同或相同的虚拟地址，变相的增加了程序可以使用的内存。**（3）当一个进程关闭之后，操作系统会回收进程所占用的内存，（4）进程之间的内容相互隔离。
2024-07-26 20:25:52
37563
原创 浏览器安全、XSS 攻击、CSRF 攻击、防御攻击、中间人攻击、网络劫持
CSRF 攻击指的是跨站请求伪造攻击，攻击者诱导用户进入一个第三方网站，然后该网站向被攻击网站发送跨站请求。如果用户在被攻击网站中保存了登录状态，那么攻击者就可以利用这个登录状态，绕过后台的用户验证，冒充用户向服务器执行一些操作。CSRF 攻击的本质是利用 cookie 会在同源请求中携带发送给服务器的特点，以此来实现用户的冒充。
2024-07-26 20:21:17
37547
原创 浏览器垃圾回收机制详解
V8 实现了准确式 GC，GC 算法采用了分代式垃圾回收机制。因此，V8 将内存（堆）分为新生代和老生代两部分。新生代中的对象一般存活时间较短，使用 Scavenge GC 算法。在新生代空间中，内存空间分为两部分，分别为 From 空间和 To 空间。在这两个空间中，必定有一个空间是使用的，另一个空间是空闲的。新分配的对象会被放入 From 空间中，当 From 空间被占满时，新生代 GC 就会启动了。算法会检查 From 空间中存活的对象并复制到 To 空间中，如果有失活的对象就会销毁。
2024-07-25 18:56:58
37062
原创 一文彻底搞懂浏览器事件机制、事件委托、事件冒泡、事件循环、Event Loop、react事件池封装、事件触发过程详解
事件是用户操作网页时发生的交互动作，比如 click/move， 事件除了用户触发的动作外，还可以是文档加载，窗口滚动和大小调整。事件被封装成一个 event 对象，包含了该事件发生时的所有相关信息（ event 的属性）以及可以对事件进行的操作（ event 的方法）
2024-07-25 08:06:37
25535
原创 一文带你搞定浏览器缓存机制，强缓存、协商缓存
强缓存策略和协商缓存策略在缓存命中时都会直接使用本地的缓存副本，区别只在于协商缓存会向服务器发送一次请求。它们缓存不命中时，都会向服务器发送请求来获取资源。在实际的缓存机制中，强缓存策略和协商缓存策略是一起合作使用的。浏览器首先会根据请求的信息判断，强缓存是否命中，如果命中则直接使用资源。如果不命中则根据头信息向服务器发起请求，使用协商缓存，如果协商缓存命中的话，则服务器不返回资源，浏览器直接使用本地资源的副本，如果协商缓存不命中，则浏览器返回最新的资源给浏览器。
2024-07-24 22:35:35
23131
原创 web服务器之nginx配置详解
💡语法: proxy_cache_key string;string为生成Key的规则，如:schemeschemescheme💡语法: proxy_no_cache string…;string为条件，例如$cookie_nocache $arg_nocache $arg_comment;💡语法: proxy_cache_bypass string…
2024-07-24 11:18:45
25237
原创 React事件机制原理、React的事件和普通的HTML事件有什么不同？React 组件中怎么做事件代理？它的原理是什么？
React并不是将click事件绑定到div的真实DOM上，而是在document处监听了所有的事件，当事件发生并且冒泡到document处的时候，React将事件内容封装并交由真正的处理函数运行。这样的方式不仅仅减少了内存的消耗，还能在组件挂在销毁时统一订阅和移除事件。上的事件也不是原生浏览器事件，而是 React 自己实现的合成事件（SyntheticEvent）。JSX 上写的事件并没有绑定在对应的真实 DOM 上，而是通过事件代理的方式，将所有的事件都统一绑定在了。是无效的，而应该调用。
2024-07-23 22:28:52
20599
原创 node后端项目使用webpack打包教程，target: “node“
webpack 能够为多种环境 或 target构建编辑。想要理解什么是target的详细信息。告知 webpack 为目标(target)指定一个环境。默认值为，如果没有找到的配置，则默认为web。
2024-07-23 10:56:05
20719
原创 常用的简单查询sql语句， nodejs操作mysql
作为一个JavaScript全栈工程师，选择哪个免费数据库呢？当然是MySQL。因为MySQL普及率最高，出了错，可以很容易找到解决方法。而且，围绕MySQL有一大堆监控和运维的工具，安装和使用很方便。
2024-07-22 21:48:26
20252
原创 登录鉴权之Cookie&Session&JWT，nodejs登录鉴权详解、前后端登录鉴权的几种方式、jsonwebtoken是什么
我为什么要保存这可恶的session呢， 只让每个客户端去保存该多好？当然， 如果一个人的token 被别人偷走了， 那我也没办法， 我也会认为小偷就是合法用户， 这其实和一个人的session id 被别人偷走是一样的。这样一来， 我就不保存session id 了， 我只是生成token , 然后验证token ， 我用我的CPU计算时间获取了我的session 存储空间！
2024-07-22 09:15:00
20322
原创 multer中文文档，koa-multer中文文档，@koa/multer中文文档，nodejs实现文件上传之最佳实践，express文件上传
Multer 是一个 node.js 中间件，用于处理类型的表单数据，它主要用于上传文件。它是写在之上非常高效。: Multer 不会处理任何非类型的表单数据。multer中文文档，koa-multer中文文档，@koa/multer中文文档，nodejs实现文件上传之最佳实践，express文件上传
2024-07-22 07:57:17
15741
原创 koa-static静态资源目录设置统一的访问前缀，最新的koa-static API中取消了prefix配置项，可以使用koa-mount来实现
它可以指定静态服务的请求前缀，就是指定加载相对于哪个url路径的静态资源。显而易见，这个功能相当实用，但是koa-static都是相对 ”全局“ 作用的，那么怎么在koa中实现这个功能呢？我们来看koa文档吧。前面说过，koa-static是一个中间件，所以koa-mount可以和koa-static结合，以实现和express一样的静态服务请求前缀的功能。koa-mount是一个将中间件挂载到指定路径的Koa中间件。它可以挂载任意Koa中间件！可以使用koa-mount做处理。
2024-07-21 17:40:11
15682
原创 mysql2中IN（?）传参，execute\query第二个参数传参，where in()多个参数不固定怎么传参
WHERE 条件使用IN(?) 时，形参个数不固定，无法传参，挠头十分钟。使用 FIND_IN_SET。
2024-07-20 20:53:33
10597
原创 nodejs编程之路-进阶篇、基础篇、【koa】核心API总结、koa VS express、路由、静态资源、获取请求参数、cookie&session、JWT、上传文件、连接MongoDB等
koa 是由 Express 原班人马打造的，致力于成为一个更小、更富有表现力、更健壮的 Web 框架。使用 koa 编写 web 应用，通过组合不同的 generator，可以免除重复繁琐的回调函数嵌套，并极大地提升错误处理的效率。koa 不在内核方法中绑定任何中间件，它仅仅提供了一个轻量优雅的函数库，使得编写 Web 应用变得得心应手。
2024-07-19 21:45:09
11682
1
原创 【nodejs】编程之路、进阶篇、基础篇、通俗易懂的Express基本使用教程、最佳实践
基于 Node.js 平台，快速、开放、极简的 web 开发框架。
2024-07-19 09:30:00
11702
原创 Navigate连接数据库报错：2059-Authentication plugin ‘caching_sha2_password‘ cannot be loaded:***，问题解决及报错原因
本文介绍了Navigatel连接MySQL8.0时遇到的caching_sha2_password加密规则不被Navicate驱动支持的问题，提供了解决方案，包括登录、切换加密方式和刷新权限等步骤。mysql8.0版本默认强加密规则caching_sha2_password，navicate驱动目前不支持新加密规则。重新打开Navigate，修改连接的密码配置，重新打开连接。
2024-07-18 12:43:47
11382
原创 node基础，nodejs核心API，nodejs核心理念、nodejs基础面试必备宝典
Node.js （最全）基础、nodejs的特性、浏览器环境vs node环境、 开发环境搭建、模块、包、CommonJS规范、modules模块化规范、Npm&Yarn、 npm的使用、全局安装 nrm 、yarn使用、内置模块、http模块、url模块、querystring模块、http模块补充、event模块、fs文件操作模块、 stream流模块、 zlib、 crypto、 路由 基础、 获取参数、静态资源处理
2024-07-17 21:11:35
9905
1
原创 typescript基本用法、安装typscript、ts、tsconfig.json配置详解、ts数据类型、泛型写法、类型断言、class类、类的继承、修饰符 private 私有的,外部不能访问
前段必备神技typescript，包含typescript安装、tsconfig.json配置、数据类型、class类、泛型、abstract抽象类、namespace命名空间、decorator修饰器等
2024-03-28 16:15:59
9989
原创 pnpm、monorepo分包管理、多包管理、npm、vite、前端工程化、保姆级教程
1.使用pnpm 的monorope特性，进行多报管理。2.vite创建vue项目3.vite+vue添加支持typescript配置教程4.vite+vu添加支持less配置教程5.pnpm add package --filter -w6.packages多包相互调用，添加workspace依赖
2024-03-25 11:27:17
10082
原创 useCallback详解
首先，useCallback适用于纯函数，即函数的输入和输出完全确定，不会受到外部环境的影响。最后，使用useCallback时，需要确保缓存的函数能够在组件的生命周期内保持稳定。而使用useCallback来缓存状态更新函数，可以确保在多次更新时，只需调用一次缓存内的函数，从而提高性能。最后，在使用useCallback时，需要确保缓存的函数能够在组件的生命周期内保持稳定，否则可能会导致意外的行为。在React中，useCallback是一个强大的Hook，它允许我们在组件中缓存函数，从而提高性能。
2024-03-21 16:28:15
7212
原创 React基础入门
React 没有特殊的语法来编写条件语句，因此你使用的就是普通的 JavaScript 代码。以use开头的函数被称为Hook。useState 是React提供的一个内置Hook。可以通过组合现有Hook来编写自己的Hook。一个组件是 UI（用户界面）的一部分，它拥有自己的逻辑和外观。将变量user.imageUrl 赋值给 img 标签的 src 属性，需要使用{} 而非 “”。你的组件也不能返回多个 JSX 标签。你只能在你的组件（或其他 Hook）的。，请提取一个新的组件并在组件内部使用它。
2024-03-19 17:10:45
5889
原创 nodejs、express报错Error[ERR_HTTP_HEADERS_SENT]:Cannot set headers after they are sent to the client
express 中间件中 next() 并不会阻断后面代码执行，如果后面继续对res的操作或者返回 就会导致 第二次响应，即下边的错误。@Error[ERR_HTTP_HEADERS_SENT]:Cannot set headers after they are sent to the client
2022-09-15 15:26:59
6158
1
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人