- 博客(383)
- 收藏
- 关注
RSS订阅转载 使用 React Hooks 时要避免的6个错误
从第二次开始，每次当点击按钮时，count会增加1，但是setInterval仍然调用的是从初次渲染中捕获的count为0的旧的log闭包。在上面的组件中，有两个按钮，第一个按钮会触发计数器加一，第二个按钮会根据当前的计数器状态发送一个请求。此时，我们就可能会创建一个旧的闭包，该闭包会捕获过时的状态或者prop变量。这样，无论传入的id是否为空，useState和useEffect总会以相同的顺序来低啊用，这样就不会出错啦~ 。这样改完之后，React就能拿到最新的值，当点击按钮时，就会每次增加3。
2023-07-28 11:58:14
299
原创 react中类组件中的state与函数组件中的state的区别
在类组件中，通过this.state引用count，每一次setTimeout的时候都能通过引用拿到上一次的最新count，所以最后加到5。但是在函数组件中，每一次更新都是重新执行当前函数，1s内setTimeout里读取的count实际上都是初始值0，所以最后只加到1。下面两段代码中，1s内点击事件各触发5次会有什么表现吗？简单来说，类组件的state依赖上一次state，函数组件的state是重新执行当前函数。在函数组件中，页面上的数字只会从0增加到1。在类组件中，页面上的数字依次从0增加到5；
2023-05-25 18:53:56
295
1转载 构造函数和class的区别
也就是不能先调用class生成实例，再定义class类，但是构造函数可以。class必须使用new执行，但是构造函数没有new也可以执行。在es5中构造函数其实就是在定义一个类，可以实例化对象，es6中class其实是构造函数的语法糖。在class内部和class的方法内部，class中的extends方式的继承，，但是构造函数可以不采用严格模式。class 内部无法重写类名。，不能使用 new 来调用。，也就是不能被遍历。
2023-03-06 14:49:56
363
原创 react-native学习过程记录
参考地址：https://blog.csdn.net/qq_42231156/article/details/126396576。例如： org.gradle.java.home=D:/all self program files/JavaJdk11。直接修改项目的指定的java版本(前提是安装了java11)注意：路径中 是 / ,而非 \。创建项目（即指定version）
2022-12-28 18:16:08
626
原创 vscode 函数注释快捷键_代码注释插件——KoroFileHeader
设置 －－＞扩展（ctrl +Ｓ）－－＞ 搜索KoroFileHeader ，并安装设置 —》 搜索 file header configuration打开键盘快捷键 -----》 输入extension.cursor ，查找结果就是函数注释的命令，也可看到快捷键，冲突的话，自行修快捷键即可这里可以看到我的快捷键是 ctrl + alt +ｔ......
2022-06-30 11:11:59
2543
转载 WeakMap和WeakSet
文章目录WeakMapWeakSetWeakMapWeakMap 和 Map 的第一个不同点就是，WeakMap 的键必须是对象，不能是原始值。let john = { name: "John" };let weakMap = new WeakMap();weakMap.set(john, "...");john = null; // 覆盖引用// john 被从内存删除了WeakMap 不支持迭代以及 keys()，values() 和 entries() 方法。所以没有办法获取 W
2022-03-22 14:39:11
296
转载 观察者模式与发布订阅模式
1、观察者模式1.1、定义观察者模式，即观察者监听被观察者的变化，被观察者发生改变时，通知所有的观察者。1.2、代码实现// 观察者class Observer { constructor() { } update(val) { }}// 观察者列表class ObserverList { constructor() { this.observerList = [] } add(observer) {
2022-02-21 23:02:41
267
原创 vue 项目打包，根据不同命令，配置不同环境，请求不同接口地址
实现效果：给测试环境打包时，采用A接口地址；给生产环境打包时，采用B接口地址；实现原理process.argv获取当前运行的node命令，再根据不同命令，获取不同环境下的相应配置；实现步骤1、修改package.json，新增测试环境的打包命令 "scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "start": "npm run d
2022-02-18 10:58:38
1820
原创 前端工程化
1、webpack和rollup的区别，打包出来的产物有什么区别？1.1、webpack：webpack官方解析：webpack 是一个现代 JavaScript应用程序的静态模块打包器。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。webpack的功能：代码拆分，按需加载webpack2后已支持tree-shaking1.2、rollupRollup
2022-02-11 18:09:53
494
转载 Web Worker 的初步学习
1. 概述众所周知，浏览器在执行js脚本时，页面的状态是不可响应的，直到脚本执行完成后， 页面才变成可响应。Web Workers 使得一个Web应用程序，可以在与主执行线程分离的后台线程中运行一个脚本操作。这样做的好处是可以在一个单独的线程中执行费时的处理任务，从而不阻塞主线程的运行。它的作用就是给JS创造多线程运行环境，允许主线程创建worker线程，分配任务给后者，主线程运行的同时worker线程也在运行，相互不干扰，在worker线程运行结束后把结果返回给主线程。这样做的好处是主线程可以把计算
2022-01-08 17:29:33
176
原创 http请求头、响应头 以及状态码详解
文章目录一、http协议的简单了解二、Http的请求报文、响应报文1、请求报文1.1、**请求行**1.2、 **请求头部**1.3、**空行**1.4、**请求数据**2、请求报文2.1、**响应行**2.2、 **响应头**2.3、**空行**2.4、**响应体**三、常见的请求状态码1、**xhr.status的值及解释：**2、各状态的详细解释四、post和get的异同点1、**相同点：**2、**不同点：**五、其它1、什么是持久连接2、关于Http 2.0的了解一、http协议的简单了解1、
2022-01-06 22:39:52
3122
转载 element-ui 按需要引入问题记录
一、步骤如下：1、安装 babel-plugin-component：npm install babel-plugin-component -D2、将 .babelrc 修改为{ "presets": [["es2015", { "modules": false }]], "plugins": [ [ "component", { "libraryName": "element-ui", "styleLibraryName":
2021-12-23 10:18:39
346
转载 Vue性能优化
文章目录一、性能调试工具二、优化方向1、体积优化1.1、排查并**去除多余**依赖、静态资源1.2、使用webpack中的插件`image-webpack-loader`，在打包时**压缩图片**1.3、优化SVG图标1.4、优化Ant design of Vue、Element-ui组件库；2、传输优化2.1、优化路由懒加载2.2、开启HTTP22.3、打包时开启Gzip压缩，修改nginx配制，开启gzip优化性能2.4、Prefetch、Preload2.5、托管至OSS + CDN加速3、感知性能优
2021-12-21 18:19:07
3402
转载 webpack-bundle-analyzer 打包文件分析工具 --- 性能分析
一、安装npm intall webpack-bundle-analyzer –save-dev二、配置在build/webpack.prod.config.js中的module.exports = webpackConfig这句话的上面增加if (config.build.bundleAnalyzerReport) { const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
2021-12-21 11:04:50
601
转载 Babel、AST 原理
1. 什么是babelBabel 是一个 JavaScript 编译器。他把最新版的javascript编译成当下可以执行的版本，简言之，利用babel就可以让我们在当前的项目中随意的使用这些新最新的es6，甚至es7的语法。2、babel 是如何工作的首先得要先了解一个概念：抽象语法树（Abstract Syntax Tree, AST），Babel 本质上就是在操作 AST 来完成代码的转译。2.1、AST是什么AST：即用一个树型结构的对象来描述js代码分析 AST：https://ast
2021-11-30 20:52:23
623
转载 移动端的点击穿透问题
1、概况说完移动端点击300ms延迟的问题，还不得不提一下移动端点击穿透的问题。可能有人会想,既然cick点击有300ms的延迟，那对于触摸屏，我们直接监听 touchstart事件不就好了吗?使用 touchstart去代替click事件有两个不好的地方。1、touchstart昰指触摸屏幕就触发，有时候用户只是想滑动屏幕，却触发了 touchstart事件，这不是我们想要的结果。2、使用 touchstart事件在某些场景下可能会出现点击穿透的现象。什么是点击穿透?假如页面上有两个元素A
2021-11-30 19:58:54
1268
转载 常见移动端兼容性问题
1.IOS移动端click事件300ms的延迟相应移动设备上的web网页是有300ms延迟的，往往会造成按钮点击延迟甚至是点击失效。这是由于区分单机事件和双击屏幕缩放的历史原因造成的。解决方式：fastclick可以解决在手机上点击事件的300ms延迟zepto的touch模块，tap事件也是为了解决在click的延迟问题触摸屏的相应顺序为touchstart–>touchmove–>touchend–>click，也可以通过绑定ontouchstart事件，加快事件的响应，
2021-11-29 22:14:30
1163
转载 移动端适配 1px 的问题
1、基本概念首先，我们要了解两个概念，一个是像素（pixel）可以简写为px，另外一个是设备像素比（DPR）设备像素比（DPR）: 设备像素比 = 设备像素 / 设备独立像素。CSS 像素 (虚拟像素)：指的是 CSS 样式代码中使用的逻辑像素，在 CSS 规范中，长度单位可以分为两类，绝对单位以及相对单位。px 是一个相对单位，相对的是设备像素。设备像素 (物理像素)：指设备能控制显示的最小物理单位，意指显示器上一个个的点。从屏幕在工厂生产出的那天起，它上面设备像素点就固定不变了，和屏幕尺
2021-11-29 21:48:07
335
转载 JavaScript全排列的六种算法 具体实现
算法一：交换（递归）/* 全排列（递归交换）算法 1、将第一个位置分别放置各个不同的元素； 2、对剩余的位置进行全排列（递归）； 3、递归出口为只对一个元素进行全排列。 */ function swap(arr,i,j) { if(i!=j) { var temp=arr[i]; arr[i]=arr[j]; arr[j]=temp; } } var count=0; function s
2021-11-28 10:33:26
1220
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人