- 博客(438)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 yarn的安装于配置
相比于传统的npm（Node Package Manager），Yarn具有更快的安装速度、更好的依赖管理和更少的冲突。以上就是Yarn的安装和配置过程。同时，通过配置Yarn的镜像源、认证信息和缓存目录，你可以进一步提高Yarn的使用体验。配置缓存目录（可选）：Yarn会缓存已下载的依赖包，以提高后续安装的速度。检查Yarn是否成功安装：在终端或命令提示符中运行yarn --version，查看Yarn的版本信息。配置Yarn镜像源：为了提高依赖包的下载速度，你可以配置Yarn使用国内的镜像源。
2024-04-24 20:46:16
141
原创 npm详解：Node.js的包管理器
来安装软件包：这两个命令可以将软件包添加到package.json文件的dependencies或devDependencies中，分别表示生产环境的依赖和开发环境的依赖。可以使用npm update命令来更新所有依赖的软件包，或者通过修改package.json文件中的版本号来更新特定的依赖关系。使用package.json文件来管理依赖关系：在项目中，应该使用package.json文件来记录和管理所有依赖的软件包。例如，您可以使用npm list命令来查看已安装的软件包及其依赖关系，使用。
2024-04-24 20:42:34
293
原创 React的Key和diff
通过key来准确发现新旧虚拟DOM中的相同节点，就不需要进行节点删除和创建，只需要把旧的节点移动位置，更新为新的节点位置。在新的虚拟DOM树上没有A节点，那就直接删除A节点，然后在D节点下创建A节点以及A节点的子节点。如果是相同类型的组件，就会继续往下diff运算，如果不是相同类型的组件，那么直接删除这个组件下的所有子节点，然后创建新的。设置Key是关于节点的增加和删除，如果发现旧的key消失了，那就是删除节点；Key的作用是用来判断元素是新建的还是被移动的，从而减少不必要的元素渲染。
2024-04-24 20:24:04
155
原创 怎么理解Fiber，Fiber解决了什么问题
这个过程是基于Fiber节点来实现的，作为静态的数据结构来说，每一个Fiber节点对应一个React Element，保存组件的类型、对应的DOM节点信息。如果JavaScript线程长时间占用主线程，那么渲染引擎的线程就得长时间等待，页面长时间不更新，会导致页面的响应度变差，给用户的感觉就是页面很卡。JavaScript引擎和浏览器的渲染引擎两个线程是互斥的，当有一个线程在执行的时候，另一个线程只能挂起等待。从编码的角度来看，Fiber是React诶不定义的一种数据结构，它是Fiber树结构的节点单位。
2024-04-24 00:41:16
213
原创 JavaScript对象数组去重
在前端开发过程中，如果涉及到对象数组去重，我们首先要明确重复的标准，应为数组的每一项都是一个对象，而对象引用是基于内存地址的，就算是两个对象拥有两个相同的属性和值，它们也是不同的引用，所以我们确定以哪个属性值作为条件，来进行筛选，比如ID。在objects这个数组里面，第一项和第三项是相同的，所以删除第三项。如果单纯对一个数组进行去重操作的话，也可以使用上面这个去重函数。如果数组的两项的ID相同，则删除掉。
2024-04-23 23:09:03
124
原创 面试题：React的真实DOM和虚拟DOM的区别
然而通过虚拟DOM来完成的话，同样的更新10个节点，虚拟DOM不会马上操作DOM，而是把10次更新的diff内容保存在本地内存的一个js对象上，最后才把这个js对象转化为真实DOM。在React中，ReactDOM.render()函数将虚拟DOM节点插入到真实DOM节点上，并且渲染到页面上。在创建虚拟DOM的目的就是为了更好将虚拟节点渲染到页面上，虚拟DOM对象的节点与真实DOM的属性是一一对应的。真实DOM，就是文档对象类型，在页面上渲染的每一个节点都是一个真实DOM结构。
2024-04-08 02:14:52
161
原创 render方法的原理是什么呢，在什么时候触发呢？
这些虚拟DOM最终是会渲染成真实DOM。在更新的过程中，React调用render方法返回的虚拟DOM树和旧的虚拟DOM进行diff比较，然后更新DOM。不管点击多少次，最终结果只打印两次。在函数组件通过useState hook来更新数据的时候，当数据没有发生变化时，就不会触发render。什么时候触发render呢？
2024-04-02 01:02:19
167
原创 谈一谈React的setState的执行机制
React组件显示什么样的数据，都是由数据状态和外部参数所决定的，这个数据状态就是state。当需要修改数据状态的值，就要调用setState，从而达到更新组件内部数据状态的目的。当点击按钮的时候，执行this.setState方法更新state状态，然后重新执行render函数，完成组件更新。setState内部是怎么定义的呢？setState的第一个参数可以是一个对象、一个函数，第二个参数是一个回调函数，用来获取更新后的状态数据。
2024-04-02 00:03:02
349
原创 怎么理解React refs，在哪些场景下使用？
React的refs，提供了一种方式，让我们访问DOM节点或者在render方法中创建React元素。
2024-04-01 20:50:41
377
原创 React组件异常捕获的解决思路
React16有一个错误边界的概念，错误边界就是一个组件，这个组件可以捕获发生在子组件树中任何位置的JavaScript错误，并且打印这些错误。错误是我们在编写代码的时候，经常出现的。比如在编写React组件的时候，因为存在JavaScript代码错误会导致React内部状态被破坏，造成整个应用崩溃。如果有一些异常，在错误边界组件不能捕获的，比如事件处理结果，异步代码操作等等。react16之后的版本，就把渲染期间发生的所有错误打印到控制台了。错误边界在渲染期间，生命周期方法和整个组件树的构造函数中捕获。
2024-03-28 22:48:27
154
原创 什么是高阶组件，有哪些场景？
在实际的应用中，高阶组件一般用来封装与业务无关，但是在多个模块中使用的功能，比如：权限控制、日志记录、数据校验、异常处理。通过传入的原始组件WrappedComponent，做一些逻辑处理，比如提取state给原始组件。高阶组件，则是接收一个或者多个组价作为入参，并且返回一个组件。高阶组件的实现方式，本质上是一个装饰者设计模式。高阶组件主要的功能是封装并且分离组件的通用逻辑，同时让逻辑在组件之间更好被复用。把通用的逻辑放在高阶组件里面，对组件实现一致的处理，从而实现代码复用。这就是高阶组件的作用。
2024-03-27 15:21:11
313
原创 React组件如何通信
父组件在调用子组件的时候，在组件标签内传递参数，子组件通过props属性获取父组件传递过来的参数。父组件在调用子组件的时候，父组件向子组件传递一个函数，通过这个函数的回调函数，获取子组件传递的值。由于React有单向数据流动的特性，所以父组件向子组件传递是最常见的方式。
2024-03-26 23:31:35
252
原创 如何理解React的state、props、super()和super(props)
为什么要调用super呢，因为子类是没有自己的this对象，它只能通过继承父类的this，然后对它进行加工。React的核心思想就是组件化，页面被切分为一些独立的、可复用的组件，组件概念上就是函数，接收一个参数作为入参，这个参数就是props，组件外部传入的数据都在props上。setState还可以接收第二个参数，它是一个函数，会在setState调用完成并且组件开始更新时被调用，在这里可以用来监听渲染是否完成。state和props都是对象，用来保存信息，props和state都能触发组件更新。
2024-03-26 22:29:16
542
原创 如何理解React
@FilePath: /blog/react/React面试题.md一、React用来构建界面的JavaScript库，它只提供了UI层面的解决方案，遵循组件设计模式，声明式编程规范和函数式编程概念。为了让前端应用程序更高效，React使用了虚拟DOM来操作真实DOM。React遵循高阶组件到低阶组件的单向数据流，帮助我们将页面划分为多个独立的小模块，每一个模块就是一个组件，这些组件之间可以组合、嵌套，构成一个整体的页面。
2024-03-24 17:21:30
241
原创 JavaScript：查找两个正序数组的中位数
中位数：统计学中的专有名词，代表一个样本、种群或概率分布中的一个数值，其可将数值集合划分为相等的上下两部分。对于有限的数集，可以通过把所有观察值高低排序后找出正中间的一个作为中位数。如果观察值有偶数个，通常取最中间的两个数值的平均数作为中位数。要在两个正序数组中找中位数，首先把两个正序数组组合为一个数组，然后进行排序。
2024-03-12 23:09:02
380
原创 用JavaScript来查找无重复字符的最长子串
JavaScript的哈希表Map保存键值对，并记住键的原始插入顺序。任何值（对象或原始值）都可以作为一个键或一个值。通过定义一个可以移动的“窗口”，并且在这个窗口内进行操作，寻找满足条件的最大区间或者最小区间的子序列长度。滑动窗口算法是一种用来处理数组或者字符串中连续子集问题的有效方法。
2024-03-12 00:07:35
385
原创 React Fiber的原理
React Fiber是React 16及更高版本中引入的一种新的核心算法，它作为React内部调度机制的重构部分，对原有的Reconciliation（协调）过程进行了升级。Fiber架构的目标是提高React在复杂应用中的性能和可预测性，并支持异步渲染、优先级调度等功能。总之，React Fiber通过改进React内部的工作机制，使React具备了更优秀的性能优化手段，提升了用户体验，并且为未来的框架功能扩展提供了更加灵活的基础架构。
2024-03-11 23:12:58
115
原创 一个网络请求是怎么进行的？
一个网络请求是怎么进行的，涉及到浏览器的运行机制、页面加载流程。当我们打开一个页面的时候，可以在NetWork面板上看到浏览器发起的网络请求，包括了页面、图片、CSS样式文件以及请求的状态，请求耗时和响应内容等等信息。
2024-02-19 23:36:01
451
原创 如果面试被问Promise相关问题，我想可以这样回答
创建一个Promise的时候，给Promise构造函数传一个执行器函数，这个执行器函数接收两个参数，分别是resolve和reject，resolve是用来改变Promise状态为fulfilled，reject是用来改变Promise状态为rejected的。Promise.race，也是将多个异步操作并行执行，但是只要有一个Promise实例发生状态改变，那么Promise.race就返回这个Promise实例的结果。当有一个请求失败的时候，就会进入reject方法。
2024-02-04 16:01:42
349
原创 Electron在MAC上打包报错：app-builder_arm64 process failed ERR_ELECTRON_BUILDER_CANNOT_EXECUTE的解决方案
在MAC上创建Electron应用打包的时候报错：app-builder_arm64 process failed ERR_ELECTRON_BUILDER_CANNOT_EXECUTE。原因是本地缓存中没有打包需要的依赖包，比如electron-v25.9.8-darwin-arm64.zip，所以打包的时候，会自动去下载对应的依赖包。之所以报错，是因为远程下载的时候，会有很多原因导致下载终端，比如网络原因等。所以我们只能手动下载依赖包，然后放到缓存文件夹中。
2024-01-31 10:03:45
483
原创 我也玩一下鸿蒙开发
鸿蒙是一个主打“I + 8 + N”的全场景、分布式的操作系统，基于一套系统能力，适配多种终端形态的分布式理念，把多个物理上相互分离的设备融合成一个“超级虚拟终端”，通过按需调用、融合不同软件硬件的能力，在不同终端之间实现快速连接、资源共享。一、分布式软总线，是多种终端设备的统一基座，是分布式数据管理和分布式任务调度的基础，为设备之间的互联提供了分布式通信能力，能够快速发现并且连接设备。二、分布式数据管理，把多设备的应用程序数据和用户数据进行同步管理，应用跨设备运行的时候，数据无缝衔接。
2023-12-03 23:18:40
444
原创 CSS：这几个伪类，你用了吗
root 伪类是匹配文档的根元素，很多时候，根元素也就是 html 元素，用 root 伪类来匹配根元素，目的就是解决根元素不是 html 的场景，比如根元素是 svg 的时候。root 伪类的使用场景，我们引入某些 UI 库，很多时候，需要重置一些样式，就可以使用 root 伪类，这样就不担心重置的样式不生效了。至于哪种方式好点，就得看看团队的编码规范了。:first-of-type表示当前第一个标签类型的元素，:last-of-type伪类的语法和匹配规则与:first-of-type的类似。
2023-11-30 00:09:08
426
原创 Electron+VUE3开发简版的编辑器【文件预览】
主要技术栈是VUE3、Electron和Nodejs，VUE3做页面交互，Electron提供一个可执行Nodejs的环境以及支撑整个应用的环境，nodeJS负责读取文件内容。环境配置、安装依赖这些步骤就不再叙述了。
2023-11-24 00:41:04
1322
原创 Electron应用程序生命周期的监听
Electron 是在主进程中控制生命周期，在不同的生命周期事件中，执行不同的逻辑。Electron 主进程有一个对象 app，对象上有个属性 on ，是一个函数，接收两个参数，第一个参数是我们要监听的事件名称，第二个参数是回调函数。
2023-11-09 01:09:22
477
原创 Electron进程通信的另一种方式
这里我们使用的是 ipcMain.on 和 ipcRenderer.send。除了这两种方式，Electron 还提供了ipcMain.handle 和 ipcRenderer.invoke 方法。不同的是 ipcMain.handle 和 ipcRenderer.invoke 方法是异步调用的风格，可以根据自己的规范选择合适的 API。上一篇讲述了主进程和渲染进程之间的通信，其中是通过调用 ipcMain 和 ipcRenderer 来完成的。
2023-11-07 12:19:55
352
原创 Electron + VUE3 桌面应用，主进程和渲染进程通信
注意：如果是Typescrip环境的话，有可能会报错提示window上不存在electron，那就需要把这些API挂在到window对象上就可以。在开发Electron应用的时候，从安全的角度来考虑，尽量不要在渲染进程中，直接调用ElectronAPI，因此我们需要预加载JS脚本，在这个脚本中，把我们用到的API暴露出去。之前写过篇主进程和渲染进程之间的通信，这里主要是记录一下VUE版本的应用，主进程和渲染进程之间的通信。思路是一样，唯一不同的是代码。这就是在VUE组件中，主进程和渲染进程之间的通信。
2023-11-06 01:36:57
295
原创 HTML、CSS和JavaScript，实现换肤效果的原理
这篇涉及到HTML DOM的节点类型、节点层级关系、DOM对象的继承关系、操作DOM节点和HTML元素还用到HTML5的本地存储技术。换肤效果的原理：是在选择某种皮肤样式之后，通过JavaScript脚本来加载选中的样式，再通过localStorage存储。先来回忆一下HTML DOM的相关知识。
2023-11-01 20:25:35
812
原创 简单了解一下：NodeJS的WebSocket网络编程
NodeJS的webSocket网络编程。那什么是WebSocket呢？WebSocket是HTML5提供的一种浏览器和服务器进行通信的网络技术。两者之间，只需要做一个握手动作，就可以在浏览器和服务器之间开启一条通道，就可以进行数据相互传输。
2023-10-24 12:55:52
443
原创 简单了解一下：Node的util工具模块
了解util模块，知道怎么使用util来格式化字符串，把对象转化为字符串，检查对象类型。那么util模块有哪些方法呢？
2023-10-19 23:48:33
129
原创 简单了解一下：Node全局对象和事件监听和触发
Node的全局对象，就是整个应用都能引用的对象。Node本身内置了多个全局变量、全局对象和全局函数。全局变量有两个：__filename和__dirname，__filename：表示当前正在执行的脚本文件名；__dirname：当前脚本所在的目录；
2023-10-19 19:22:57
228
原创 Node基础概念，先了解一下
Nodejs是基于Chrome V8引擎的服务器端JavaScript运行环境，也就是说可以在浏览器之外的主机上运行JavaScript。
2023-10-11 23:43:46
226
原创 koa基础应用
不要把koa想得太复杂，他就是一个Node框架而已。执行命令：node app.js。然后在浏览器中打开http://localhost:3000/，页面显示：hello Koa。
2023-09-30 22:15:08
311
原创 Vue3：组件的生命周期函数
这一篇博客是结合官网完档和书籍后整理的，会很简单，可能对很对朋友都没有任何的帮助，这只是我对自己的学习vue这个技术栈的笔记。
2023-09-19 00:51:08
219
原创 vue-h5：移动Web单击事件和延迟300ms的问题
在PC端的网页，大部分的交互是通过click事件来实现的，然而在移动端，则是通过touch事件来实现触摸交互。单击或者点击事件，指的是鼠标按下并且在短时间内放开【一般是小于300ms】。那么移动端，也是类似，在手指触摸到屏幕开始计算时间，并且在300ms内离开屏幕。这就是移动端的单击事件，手指触摸成为touch。
2023-09-19 00:30:42
669
空空如也
node的部署可以不用Nginx呀
2021-08-07
TA创建的收藏夹 TA关注的收藏夹
TA关注的人