- 博客(25)
- 收藏
- 关注
RSS订阅
原创 React生命周期详解（图解）
React 初始化阶段，通过super来绑定组件身上的props 1、constructor阶段、通过super来绑定组件身上的props 2、static getDerivedStateFromProps()，就是从props里面导出state 生命周期的功能实际上就是将传入的props映射到state上面。 3、componentWillMount()/UNSAFE_componentWillMount 初始化页面 4、render（） 5、componentDidMount，这个阶段既可以调取数据了。
2021-01-24 20:01:43
1117
1
原创 javascript如何写淘宝接口，方法及其总结
写淘宝接口你首先需要了解的一些知识 1、html，css，javascript。 了解什么是同源策略，和非同源策略 以及我这里用JSONP协议； 首先写思路： //遍历data1： Data1.forEach(item=>{ Str+=` ${Item[0]} ` }) } 然后把str方剂oUl里面 oUl.innerHTML=str 这里基本完成一级菜单 下边是二级菜单的思路： 淘宝里面二级菜单的对象名是magic 所以要先保存一下magic Var magic=data.magic If(ma
2020-10-25 16:10:41
802
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
390
原创 前端自动化工具&&前端代码规范
项目要使用git进行代码提交时，使用叫pre-commit的git钩子，在调用git commit 命令时自动执行某些脚本检测代码，若检测出错，则阻止commit代码，也就无法push，保证了出错代码只在我们本地，不会把问题提交到远程仓库 【1】 安装husky husky：husky提供了一套git hook，我们可以在commit前进行我们的代码检查 npm install -D husky --save 【2】在package.json中设置我们需要的git hooks { "husky": {
2022-01-05 17:34:04
755
原创 git 容易遗忘的那些事
背景 github 需要添加一台新的电脑 首先你需要检查你的电脑上是否生成过sshkeys 1、 进入到根目录下输入该指令 cd ~/.SSH 检查是否有id_rsa.pub,如果有就代表你有生成过 如过生成过，那么直接可以链接你git 上创建的新仓库 git remote add origin 仓库的ssh地址 git push -u origin master ...
2021-12-16 16:16:23
139
原创 翻牌动画源码
<!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
302
原创 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
524
原创 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
404
原创 一个案例让你看懂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
249
原创 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
344
原创 前端性能优化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
2023
原创 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
290
原创 关于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
522
原创 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
1367
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
305
1
原创 React hooks中如何通过ref获取到原生dom节点
通过ref进行name绑定，通过创建变量使用useRef，通过name.curren进行取值
2021-03-12 15:30:40
3738
原创 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
193
原创 函数的防抖、截流
防抖：触发高频事件后 n 秒内函数只会执行一次，如果 n 秒内高频事件再次被触发，则重新计算时间； 例子：当使用如下防抖代码，input输入框监听了input事件后，可以再指定时间内不触发多次input事件； function debounce(fn) { let timeout = null; // 创建一个标记用来存放定时器的返回值 return function () { clearTimeout(timeout); // 每当用户输入的时候把前一个 setTimeout clear 掉 timeou
2021-03-02 18:17:21
271
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
228
原创 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
166
原创 前端常问面试题总结
面试总结 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.26 1、自我介绍 2、说一下你做的这
2021-01-26 21:11:33
644
原创 React的调和过程
diff策略 说道调和，那么我们不得不说react调和的三种策略了。 1、treediffer，不会跨级进行比较，同级之间进行对比，如果发现有不同，那么将会删掉整行dom元素， 2、component diff 不同组件会直接删掉，对于相同组件继续按层级对比 3.element diff 对于元素提供三种操作删除、插入、移动，基于key可以提高效率，否则需要循环新结点一次循环旧结点一次才能找到变化 举个例子 ：react当我们设置setstate状态进行改变的时候就会触发所谓的调和过程，其实调和过程有好几种
2021-01-23 13:47:03
540
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
1562
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人