- 博客(25)
- 收藏
- 关注
RSS订阅
原创 React生命周期详解（图解）
React 初始化阶段，通过super来绑定组件身上的props1、constructor阶段、通过super来绑定组件身上的props2、static getDerivedStateFromProps()，就是从props里面导出state生命周期的功能实际上就是将传入的props映射到state上面。3、componentWillMount()/UNSAFE_componentWillMount初始化页面4、render（）5、componentDidMount，这个阶段既可以调取数据了。
2021-01-24 20:01:43
1007
1
原创 javascript如何写淘宝接口，方法及其总结
写淘宝接口你首先需要了解的一些知识1、html，css，javascript。了解什么是同源策略，和非同源策略以及我这里用JSONP协议；首先写思路：//遍历data1：Data1.forEach(item=>{Str+=`${Item[0]}`})}然后把str方剂oUl里面oUl.innerHTML=str这里基本完成一级菜单下边是二级菜单的思路：淘宝里面二级菜单的对象名是magic所以要先保存一下magicVar magic=data.magicIf(ma
2020-10-25 16:10:41
698
4
原创 前端常用的插件
Auto Rename Tab – 常用于补全标签Better Comments --用于注释颜色，可以进行配置：打开vconsole的 setting.json 文件就可以进行配置"better-comments.tags": [ { "tag": "!", "color": "#FF2D00", "strikethrough": false, "backgroundColor": "transparent" }, { "tag": "?",
2022-04-25 11:26:37
270
原创 前端自动化工具&&前端代码规范
项目要使用git进行代码提交时，使用叫pre-commit的git钩子，在调用git commit 命令时自动执行某些脚本检测代码，若检测出错，则阻止commit代码，也就无法push，保证了出错代码只在我们本地，不会把问题提交到远程仓库【1】 安装huskyhusky：husky提供了一套git hook，我们可以在commit前进行我们的代码检查npm install -D husky --save【2】在package.json中设置我们需要的git hooks{ "husky": {
2022-01-05 17:34:04
642
原创 git 容易遗忘的那些事
背景github 需要添加一台新的电脑首先你需要检查你的电脑上是否生成过sshkeys1、 进入到根目录下输入该指令 cd ~/.SSH 检查是否有id_rsa.pub,如果有就代表你有生成过如过生成过，那么直接可以链接你git 上创建的新仓库git remote add origin 仓库的ssh地址git push -u origin master...
2021-12-16 16:16:23
92
原创 翻牌动画源码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l
2021-11-25 16:39:11
207
原创 hooks封装-发送验证码
//输入绑定当前dom，传入倒计时，以及发送过后显示的文本，和发送成功后的回调函数，抛出了一个点击发送事件import {useCallback, useRef} from 'react';export default function useSendCode({codeDom, countTime, codeText, sendSucCallBack}) { const codeLoading = useRef(false); const codeTimer = useRef(null);
2021-11-24 20:56:22
438
原创 react hooks在swiper5以下中去修改状态失败问题
swiper官方文档提供的原生api是通过new一个swiper实例去调用方法，但是在hooks里面当我想获取到当前的轮播索引的时候却发现不能去存储到我的状态里面，但是我通过改写了一些其他方法发现也不行，应该是swiper new了一个实例之后，不能set其hooks里面的状态，然后我就改写了swiper6的方式去写发现就没有这个问题了是可以修改状态的，代码对比如下：这是swiper5版本下的 const initSwiper = useCallback(() => { var slid
2021-08-09 17:55:11
328
原创 一个案例让你看懂js中的不可枚举属性
enumerable控制了你是否是可枚举的属性，为false为不可枚举属性反之为可枚举属性，也就是我们可以访问到的属性var person = { name: 'gopal', }; person.age = '21'; person['country'] = 'India'; Object.defineProperty(person, 'salary', { value: '80,000$', enumerable: false, }); document
2021-08-03 15:19:16
179
原创 antiShake
// export const antiShakes = (Refs, shake) => {// function debounce(fn, wait) {// var timer = null;// return function () {// if (timer !== null) {// clearTimeout(timer);// }// timer = setTimeout(fn, wait);//
2021-08-02 17:13:35
271
原创 前端性能优化react（图片loading预加载）
图片预加载，可以提前加载比较大的图片，或者gif图，防止白屏 function loadImage_gif(url, callback) { var img = new Image(); //创建一个Image对象，实现图片的预下载 img.onload = function () { img.onload = null; callback(img);//回掉函数 }; img.src = url; } useEffect(() =>
2021-08-02 17:01:15
1857
原创 TypeScript基础
【 一 】传递参数的个数：多传或者少传报错优点方便后续更新迭代少传或者多传报错function buildName(fristName: string, lastName: string, ageName: string) {return fristName + ‘’ + lastName + ageName;}let result1 = buildName(‘bob’, ‘pop’, ‘aa’);console.log(result1);未传递的参数的时候可以设置默认值：function
2021-05-13 20:35:05
224
原创 关于ESlINT和prettier-code 冲突
react使用eslint的三种代码检测方案command+s保存代码的时候发现会有红色波浪线警告，虽然不影响功能但是不美观，而且影响自己如果报错了影响排错 我们安装完prettier之后设置prettier会自动进行代码格式化，因为他只关心代码格式美观性，而eslint就可以规范你的编码风格，提升代码质量，但是eslint的代码格式化有盲区，只针对js，jsx，tsx,不能格式化html，css，less，sass，所以我们要保证兼容的情况下，要么修改prettier的规则，要么修改eslint的规则
2021-04-29 17:08:29
411
原创 stylelint --fix found some errors. Please fix them and try committing again.
git 的时候碰见的这个bug，通过 提交的时候可以换成这个就行了 git commit --no-verify -m “xxx”
2021-03-23 10:41:43
1225
1
原创 ...扩展运算符常见的一些的用法（es6）
一、去重example：let arr=[1,1,1,2,2,2,3,3,3]console.log(…new Set (arr))结果是1，2，3二、展开字符串变成数组exampel：let str=[…‘hellow’]console.log(str)结果是[“h”, “e”, “l”, “l”, “o”, “w”]三、合并数组example：let arr=[1,2,3,4]let arrs=[9,8,6,5,5,5,5,8,8,8,8]let newArr=[…arr,…
2021-03-15 17:27:43
235
1
原创 React hooks中如何通过ref获取到原生dom节点
通过ref进行name绑定，通过创建变量使用useRef，通过name.curren进行取值
2021-03-12 15:30:40
3638
原创 typescript学习，每天进步一点点
1、声明的几种数据类型:number=1 :string=“xx” :boolean=“true”:number[]=[1,2] Array< number>=[1,2]泛形 void function hellow（）:void{alert(“xx”)泛形一般表示没有返回值}null 表示对象值缺失undefined 表示未定义的值naver 代表重来不会出现的...
2021-03-12 11:22:09
140
原创 函数的防抖、截流
防抖：触发高频事件后 n 秒内函数只会执行一次，如果 n 秒内高频事件再次被触发，则重新计算时间；例子：当使用如下防抖代码，input输入框监听了input事件后，可以再指定时间内不触发多次input事件；function debounce(fn) {let timeout = null; // 创建一个标记用来存放定时器的返回值return function () {clearTimeout(timeout); // 每当用户输入的时候把前一个 setTimeout clear 掉timeou
2021-03-02 18:17:21
184
1
原创 游戏前段日常问题总结
iphonex移动端适配方案const [style,setStyle]=useState({})useeffect(()=>{if(document.body.offsetHeight/document.body.offsetWidth<750(iphonex的宽)/实际页面的宽){setStyle({transform:"scale(0.8)"})}},[])
2021-03-01 15:22:34
167
原创 Git 常见命令总结
git init 初始化git pull 拉取代吗git add . 保存添加和修改但不包括删除的文件，添加 或者git add-A 保存所有的修改git commit -m “本次提交描述一”git push 推代码git branch 查询当前分支或者可以查询并切换到分支git branch “xxx”git checkout main 切换到main分支切换到分支git commit -m ''提交到当前分支git push git checkout main 切换到main主分支gi
2021-02-28 14:36:26
116
原创 前端常问面试题总结
面试总结1、介绍一下你项目中的重难点2、父子组件传递参数3、state和props区别4、props能否被改变，虚拟dom diff算法5、redux、react生命周期6、原型原型链，继承的几种方式，前后端联调7、null和undifined 的区别 ，unll和undifined有没有toString（）方法8、antd design api form 添加回显9、flex布局 口述三栏布局10、position的几个定位区别2021 01.261、自我介绍2、说一下你做的这
2021-01-26 21:11:33
546
原创 React的调和过程
diff策略说道调和，那么我们不得不说react调和的三种策略了。1、treediffer，不会跨级进行比较，同级之间进行对比，如果发现有不同，那么将会删掉整行dom元素，2、component diff 不同组件会直接删掉，对于相同组件继续按层级对比3.element diff 对于元素提供三种操作删除、插入、移动，基于key可以提高效率，否则需要循环新结点一次循环旧结点一次才能找到变化举个例子 ：react当我们设置setstate状态进行改变的时候就会触发所谓的调和过程，其实调和过程有好几种
2021-01-23 13:47:03
437
2
原创 React antd Design4x 版本 form表单如何进行清空
React antd 4版本class 版本 form表单如何进行清空我在从3版本升级到4版本的时候发现内容改了很多，在点击提交按钮清空表单的时候我发现没有不能像如下这麽用了，网上找了很多方法都不能用，都是form={form}，要不就是hooks版本的就很烦，没有找到我想要的，最终在自己的不断尝试下，给搞出来了。用法如下antd 4 上面提供的是hooks版本，我用的是class版本写的请在你的form 表单里这样写：用ref进行绑定，4 版本中class表单的值都是name绑定的，所以当
2021-01-15 19:08:16
1407
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人