- 博客(37)
- 收藏
- 关注
RSS订阅原创 useEffect 和 useLayoutEffect 的区别
和组件渲染放在同一个任务调度函数中的，组件渲染完成后它会立刻开始同步进行effect的函数的执行，这样做的好处是可以实现一些需要立即执行的功能，但是会加长组件渲染的任务时间，会阻塞组件的渲染。在组件渲染任务调度函数结束后，在单独调用一次任务调度函数，所以effect的调用可以单独执行，不会和组件渲染任务调度放在一起，也就不会加长组件渲染的任务时间了，也就不会阻塞组件的渲染。由于 useLayoutEffect 的执行时机在浏览器绘制之前，所以如果在其中进行耗时操作或修改 DOM，可能会造成页面卡顿或闪烁。
2024-04-11 00:02:38
335
原创 React 的 diff 算法
总的来说，React 的 diff 算法在 React 16 之前使用的是 Reconciliation 算法，它通过递归比较新旧虚拟 DOM 树的节点来确定差异，并更新实际的 DOM。另外，如果组件之间的关系变得复杂，例如列表中的动态项目，Reconciliation 算法可能无法高效地确定节点的插入、移动和删除。Reconciliation 算法通过递归地比较新旧虚拟 DOM 树的每个节点，找出节点的差异，并将这些差异应用到实际的 DOM 上。然而，Fiber 架构引入了对任务优先级的考虑，并通过。
2024-03-17 19:10:11
490
原创 React理念——Fiber架构的主要原理
在渲染过程中根据优先级和时间片（Time Slicing）等策略，将任务分配到不同的时间片段中执行，而不是一次性将整个渲染过程执行完毕。返回副作用链表： 当遍历完成后，React Fiber 将最终形成的副作用链表返回，以便在提交阶段中执行实际的 DOM 更新操作。，计算出整个应用的新状态，并生成新的虚拟 DOM 树，最后将新旧虚拟 DOM 树进行对比，找出差异并进行更新。在传统的 React （React15及以前）渲染过程中，当进行组件的更新时，React 会从组件树的根节点开始。
2024-03-16 20:45:22
1203
原创 防抖&节流 原理及手写方法
简单来说，就是在触发事件后，延迟执行操作，如果在延迟期间内再次触发该事件，则重新计时延迟。简单来说，就是控制函数的执行频率，确保在指定时间间隔内只执行一次操作。
2024-03-16 15:27:55
390
原创 手写call、apply、bind方法及区别总结
作用相同，都是动态修改this指向；都不会修改原先函数的this指向。call、apply，也就是call和apply方法的那一次；当再次调用原函数的时候，它的指向还是原来的指向。
2024-03-11 22:58:25
423
原创 浏览器是如何渲染页面的？
reflow 的本质就是重新计算 layout 树。当进行了会影响局部树的操作后，需要重新计算布局树，会引发 layout。为了避免连续的多次操作导致布局树反复计算，浏览器会合并这些操作，当 JS 代码全部完成后再进行统一计算。所以，改动属性造成的 reflow 是异步完成的。也同样因为如此，当 JS 获取布局属性时，就可能造成无法获取到最新的布局信息。浏览器在反复权衡下，最终决定获取属性立即 reflow。repaint 的本质就是重新根据分层信息计算了绘制指令。
2024-03-08 20:01:39
1164
1
原创 事件循环原理
根据W3C的官方解释，每个任务有不同的类型，同类型的任务必须在同一个队列，不同的任务可以属于不同的队列。将来该模式可能会有所改变，由于现在每个标签页都开启一个新的渲染进程，当用户同时开很多标签页时，浏览器会开启很多渲染进程，开辟很多内存空间，非常耗内存。例如：谷歌浏览器开辟了浏览器进程、网络进程、渲染进程等等，每个进程都有一个独立的内存空间，可以在浏览器的任务管理器中查看当前的所有进程。进程其实是为了隔离，比如说QQ、微信、王者荣耀他们之间的内存空间是独立的，一旦其中有一个出了问题，不会影响其他的应用。
2024-03-08 13:08:57
824
原创 uni-app小程序自定义导航栏
这是因为窗体是沉浸式的原因，即全屏可写内容。uni-app提供了状态栏高度的css变量–status-bar-height，如果需要把状态栏的位置从前景部分让出来，可写一个占位div，高度设为css变量。目前 nvue 在 App 端，还不支持 --status-bar-height变量，替代方案是在页面 onLoad 时通过。背景渐变色效果是由上面style样式自定义设置的，可按需要进行重新设置。返回调用方法，如不需要设置属性也可不写改属性，或直接使用。取消原生导航栏，自定义导航栏。
2024-01-30 16:03:02
735
1
原创 微信小程序发放红包封面及领取
本文介绍的红包发放方式是按领取序列号ctoken的形式发放的红包封面。红包封面的发放方式有：领取二维码、领取序列号、领取链接；
2023-12-27 17:17:58
1221
原创 微信小程序添加用户隐私保护指引
前段时间不知道大家有没有发现很多小程序都添加了用户隐私保护提示，这是因为微信官方为规范开发者的用户个人信息处理行为，保障用户合法权益，小程序、插件中涉及处理用户个人信息的开发者，均需补充相应用户隐私保护指引。那么如何添加用户保护指引提示呢？相信大家已经到微信官方文档上查看了，那么如果想更快的实现一个基础版的，可以参考下面的操作，欢迎大家讨论指正。
2023-12-27 13:14:12
1827
1
原创 如何动态改变background-image
最近在开发uni-app小程序时尝试使用栅格布局利用循环遍历元素节点，其中每个元素节点对应的背景图片都不相同，于是就遇到了需要动态改变元素background-image的操作。
2023-08-02 17:29:06
1726
原创 uniapp小程序console.log在微信开发者工具中不打印问题
最近在开发一款uniapp小程序，发现console.log在微信开发者工具中不打印，但在H5页面就能够有打印输出，于是在网上寻找原因…，然后将项目重新运行到微信开发者工具中就可以在控制台看到打印输出啦。将compress.drop_console由。
2023-08-02 11:23:34
4417
3
原创 微信小程序实现文字长按复制、一键复制功能
需注意的时，为实现点击其它区域隐藏复制按钮，开发者可在页面最外层监听 tap 事件，并将 evt 对象赋值给 on-document-tap。该组件有两种使用模式：长按出现选区，与浏览器默认效果一致；长按出现复制按钮，点击复制拷贝全部内容至剪贴板，在页面 page.json 中。注：样式可自行添加适合的样式。在页面index.wxml中。常见于聊天对话框等场景。
2023-01-05 16:38:31
18937
4
原创 前端面试题JS篇（一）—— 知识点回顾
该方法是用JSON.stringify将对象序列化为字符串，然后在用JSON.parse将json字符串解析为对象，解析的时候会自己去构建新的内存地址存放新对象。记录了所有被拷贝的引用值，如果再次碰到同样的引用值的时候，不会再去拷贝一遍，而是利用之前已经拷贝好的。的_.cloneDeep()支持循环对象、大量的内置类型，对很多细节都处理的比较不错，推荐使用。，2个变量指向的值是该指针所指向的内容，一旦一方修改，另一方也会受到影响。基本数据类型复制后，2个变量是独立的互不影响，因为是把。
2022-11-15 06:00:00
385
原创 微信小程序授权获取头像昵称的最新形式——头像昵称填写
微信小程序授权用户信息，不知道有没有人向我一样，从到再到头像昵称填写获取用户头像昵称全部尝试了一遍，怪就怪自己一开始没仔细看官方文档，没注意到小程序的官方公告，不多说了，整理一下最新调整的头像昵称填写这种用户信息授权的形式吧。
2022-11-09 13:45:03
22380
16
原创 小程序富文本rich-text组件渲染 img 样式修改问题
小程序富文本rich-text组件渲染 img 样式修改问题。需要先将元素原有样式清除，再重新增加新的样式
2022-11-07 20:56:54
1879
原创 微信小程序如何实现同时授权用户信息和手机号码不重复授权问题
相信很多小伙伴都有遇到了在点击一个按钮时想要实现同时获取到用户信息及手机号码并且授权过后不重复授权的操作，分享一下我的方法~
2022-10-25 18:17:34
2247
原创 微信小程序授权获取用户信息之wx.getUserInfo 切换到 wx.getUserProfile的使用(已弃用)
最近在做一个小程序的项目，需要微信授权获取用户信息（用户头像、昵称、性别及地区信息等），在微信小程序官方文档中查看这部分内容，由于一开始没有仔细看到已经被回收，于是，尝试使用进行授权获取用户信息时并不会有弹框，而是直接返回了用户信息，相信很多人也有同样的经历，在此总结一下解决方式。
2022-10-24 20:09:31
10512
12
原创 写在 $(function(){}) 中的函数无法被外界调用原因及解决方式
事件调用的也是在window上调用print_1()函数，但是window上没有声明print_1()函数，所以提示 “print_1 is not defined”(找不到)。比如传递选择器字符串、页面对象等，如果直接传函数体进去，表示当页面加载完毕时执行这个函数。，但是window上没有声明print_1()函数，所以提示 “print_1 is not defined”(找不到)。是在这个匿名函数里声明的，所以只有在这个匿名函数里面可以访问到。$(function(){})是一个匿名函数，
2022-09-16 17:06:13
1736
原创 面试题（一）
JS/ES闭包闭包就是一个可以访问其他函数内部变量的函数在本质上，闭包是将函数内部和函数外部连接起来的桥梁。function countNum() { var num = 0; return function f() { return (num += 1); };}var fn = countNum();console.log("Num:", fn()); // Num: 1console.log("Num:", fn()); // Num: 2console.log("Num
2022-05-04 23:57:08
425
原创 多版本node的安装与切换详细操作
安装多版本node的原因：在项目开发过程中，不同项目使用的node版本不同，有时会因为node版本过高或太低，导致报错；如何在同一个系统中安装多个版本的node呢，那就是使用nvm进行管理方法一：利用nvm进行管理NVM 简介NVM 全称 Node Version Manager，是一个管理 NodeJS 版本的工具。NVM 默认只支持 Linux 和 OS X，不支持 Windows，针对 Windows 操作系统有 2 个替代方案：nvm-windowsnodist这里只介绍使用nvm
2022-04-28 19:27:24
40900
4
原创 ES6中const 命令
const 基本用法1. const 声明一个只读的常量。一旦声明，常量的值就不能改变。const PI = 3.1415;PI // 3.1415PI = 3;// TypeError: Assignment to constant variable.const声明的变量不得改变值，这意味着，const一旦声明变量，就必须立即初始化，不能留到以后赋值。const foo;// SyntaxError: Missing initializer in const declaration2
2022-01-07 16:10:36
141
原创 ES6中let命令
let 基本用法ES6 新增了 let 命令，用来声明变量。它的用法类似于 var，但是所声明的变量，只在 let 命令所在的代码块内有效。{ let a = 10; var b = 1;}a // ReferenceError: a is not defined.b // 1for 循环的计数器，就很合适使用 let 命令。for (let i = 0; i < 10; i++) { // ...}console.log(i); // ReferenceError:
2022-01-07 15:30:17
473
原创 ES6新增Array.from()的用法
Array.from()Array.from() 方法对一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。console.log(Array.from('foo'));// expected output: Array ["f", "o", "o"]console.log(Array.from([1, 2, 3], x => x + x));// expected output: Array [2, 4, 6]语法Array.from(arrayLike[, mapFn[
2022-01-05 15:22:50
178
原创 HTML 5 ＜a＞ 标签的 target 属性
target 属性规定在何处打开被链接文档：<a href="https://blog.csdn.net/qq_38970408?spm=1011.2124.3001.5343" target="_blank">个人主页1</a><a href="https://blog.csdn.net/qq_38970408?spm=1011.2124.3001.5343" target="_self">个人主页2</a>定义和用法target 属性规定在何处
2022-01-04 19:04:42
564
原创 JS求二进制中1的个数
编写一个函数，输入是一个无符号整数（以二进制串的形式），返回其二进制表达式中数字位数为 ‘1’ 的个数（也被称为 汉明重量).）。示例 1：输入：n = 11 (控制台输入 00000000000000000000000000001011)输出：3解释：输入的二进制串 00000000000000000000000000001011 中，共有三位为 ‘1’。示例 2：输入：n = 128 (控制台输入 00000000000000000000000010000000)输出：1解释：输入的
2021-12-31 17:32:08
992
原创 JS旋转数组的最小数字
旋转数组定义：把一个数组最开始的若干个元素搬到数组的末尾，我们称之为数组的旋转。给你一个可能存在 重复 元素值的数组 numbers ，它原来是一个升序排列的数组，并按上述情形进行了一次旋转。请返回旋转数组的最小元素。例如，数组 [3,4,5,1,2] 为 [1,2,3,4,5] 的一次旋转，该数组的最小值为1。示例 1：输入：[3,4,5,1,2]输出：1示例 2：输入：[2,2,2,0,1]输出：0解题思路根据题意，我们第一时间就能通过暴破来解决，用一个变量记录一下当前遍
2021-12-31 10:41:45
408
原创 JS动态规划——青蛙跳台阶问题
一只青蛙一次可以跳上1级台阶，也可以跳上2级台阶。求该青蛙跳上一个 n 级的台阶总共有多少种跳法。答案需要取模 1e9+7（1000000007），如计算初始结果为：1000000008，请返回 1。示例 1：输入：n = 2输出：2示例 2：输入：n = 7输出：21示例 3：输入：n = 0输出：1提示：0 <= n <= 100解题思路：此类求 多少种可能性 的题目一般都有 递推性质 ，即 f(n)f(n) 和 f(n-1)f(n−1)…f(1)f(1
2021-12-30 16:27:18
1186
原创 JS从尾到头打印链表
输入一个链表的头节点，从尾到头反过来返回每个节点的值（用数组返回）。示例 ：输入：head = [1,3,2]输出：[2,3,1]限制：0 <= 链表长度 <= 10000解题思路：1.利用栈遍历链表，遍历的顺序是从头到尾，可输出的顺序却是从尾到头；也就是说第一个遍历到的节点最后一个输出，而最后一个遍历到的节点第一个输出。这个就是典型的后进先出，我们可以用栈来实现这种顺序，每经过一个节点的时候，把该节点放到一个栈中，当遍历完整个链表后，再从栈顶开始依次输出节点的值2
2021-12-29 10:49:43
718
原创 JS替换空格
请实现一个函数，把字符串 s 中的每个空格替换成"%20"。示例 ：输入：s = “We are happy.”输出：“We%20are%20happy.”限制：0 <= s 的长度 <= 10000解题思路这道题的解法非常多，利用很多原生 apiapi 就能轻松解决，例如：repleace/replaceAllencodeURIComponentsplit/join亦或者直接暴破求解等等…但是我们清楚，这些肯定都不是被考察的目的，我们需要做的，就是如何在手
2021-12-27 17:14:41
2798
原创 JS找出数组中重复的数字
JS找出数组中重复的数字在一个长度为 n 的数组 nums 里的所有数字都在 0～n-1 的范围内。数组中某些数字是重复的，但不知道有几个数字重复了，也不知道每个数字重复了几次。请找出数组中任意一个重复的数字。示例 1：输入：[2, 3, 1, 0, 2, 5, 3]输出：2 或 3限制：2 <= n <= 100000解题思路：1.常规思路就是把输入的数组排序，然后从排序的数组中找到重复的数字只需要从头到尾扫描排序后的数组即可。排序一个长度为n的数组需要O(nlogn
2021-12-27 17:02:31
3695
原创 JS中reduce的用法
reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。reduce方法可做的事情特别多，就是循环遍历能做的，reduce都可以做，比如数组求和、数组求积、数组中元素出现的次数、数组去重等等。
2021-10-28 17:59:42
129340
1
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人