- 博客(91)
- 收藏
- 关注
RSS订阅原创 如何将table改为受控组件
在进行分页切换时，出现组件的刷新 const paginationRef = useRef({ pageSize: 10, showSizeChanger: true, pageSizeOpts: [10, 30, 50, 100] }); <Table pagination={paginationRef.current} onChange={({ pagination }): void => {
2021-07-27 17:21:49
246
原创 git中删除commit方法
已经push到远端之后，想要删除commit，并且保存之前修改1.git log获取commit信息2.git reset (commit-id) (想要回退的那个位置的commit id)3.git push origin 分支名 --force删除本地的分支git branch -D [branchname]删除远程未合并的分支git push origin --delete [branchname]在没有进行push之前可以采用如下方法进行commit的撤销–mixedgi
2021-07-25 19:00:12
24847
原创 TS的配置安装
1.安装全局ts2.安装 ts-node3.运行第一种方法，不需要安装ts-nodetsc demo1.tsnode demo1.js第二种方法，安装ts-node之后进行执行ts-node demo1.ts
2021-04-14 17:30:26
496
原创 蚂蚁金服--一面+二面
1.选择器的优先级2.说一下bfc作用3.浮动和bfc关系4.高度坍塌问题5.说一下px,em,rem6.适配媒体查询，栅格布局7.继承，extends8.super的作用9.箭头函数的指向和普通函数的区别10.组件触发更新的方式11.优化更新–key12.useCallback,useMemo13.style-component和css moudule的区别优缺点14.webpack会使用什么loader去配置css module15.虚拟dom16.diff算法17.Fi
2021-03-12 20:42:43
964
2
原创 字节跳动抖音/火山------一二三面+hr面、已offer
一面之前大概几天整个人其实很紧张，复习了好几天，周二下午开始了，面试开始的时候，其实没有那么紧张了，就开始了面试之路，啦啦啦啦啦Q：了解过js的数据类型吗答：…说的挺完整的Q：怎么判断是数据类型答：typeof和instanceOf，布拉布拉Q：说一下 == 和 === 的区别及用法答：布拉布拉.Q：看一下这个能不能弹出if ("0") { alert( 'Hello' );}答：可以弹出Hello.Q: for in 和for of的区别答：因为忘了一些，就说
2021-03-02 20:49:19
2737
2
原创 深浅拷贝之间的事情
深拷贝和浅拷贝是只针对Object和Array这样的引用数据类型的。// 浅拷贝的实现;function shallowCopy(object) { // 只拷贝对象 if (!object || typeof object !== "object") return; // 根据 object 的类型判断是新建一个数组还是对象 let newObject = Array.isArray(object) ? [] : {}; // 遍历 object，并且判断是 object 的
2021-02-22 16:35:48
136
原创 js中的节流与防抖
如果实现了dom拖拽功能，但是在绑定拖拽事件的时候发现每当元素稍微移动一点便触发了大量的回调函数，导致浏览器直接卡死，这个时候怎么办？如果给一个按钮绑定了表单提交的post事件，但是用户有些时候在网络情况极差的情况下多次点击按钮造成表单重复提交，如何防止多次提交的发生？为了应对如上场景，便出现了函数防抖和函数节流两个概念，总的来说：这两个方法是在时间轴上控制函数的执行次数。函数防抖（debounce）在事件被触发 n 秒后再执行回调，如果在这 n 秒内事件又被触发，则重新计时。这可以使用在一.
2021-02-18 20:36:42
223
原创 可能会造成内存泄漏的操作
什么是内存泄漏内存泄漏可以定义为：应用程序不再需要占用内存的时候，由于某些原因，内存没有被操作系统或可用内存池回收。JavaScript 是一种垃圾回收语言。垃圾回收语言通过周期性地检查先前分配的内存是否可达，帮助开发者管理内存。换言之，垃圾回收语言减轻了“内存仍可用”及“内存仍可达”的问题。两者的区别是微妙而重要的：仅有开发者了解哪些内存在将来仍会使用，而不可达内存通过算法确定和标记，适时被操作系统回收。1.意外的全局变量我们由于使用未声明的变量，而意外的创建了一个全局变量，而使这个变量一直留
2021-02-17 22:49:25
469
原创 如何将类数组转化为数组？？？？
在学习转化之前，我们要知道什么是类数组：一个拥有 length 属性和若干索引属性的对象就可以被称为类数组对象常见的类数组对象有 arguments 和 DOM 方法的返回结果，还有一个函数也可以被看作是类数组对象举一个栗子：var array = ['boy','love','q'];var arrayLink = {'1':'boy','2':'love','4':'q',length:5};Array.prototype.join.call(arrayLink,'+');//'+b
2021-02-08 23:18:52
492
1
原创 使用ajax解决有关浏览器缓存的问题
浏览器的缓存机制指的是通过在一段时间内保留已接收到的 web 资源的一个副本，如果在资源的有效时间内，发起了对这个资源的再一次请求，那么浏览器会直接使用缓存的副本，而不是向服务器发起请求。使用 web 缓存可以有效地提高页面的打开速度，减少不必要的网络带宽的消耗。在使用ajax进行数据的请求时，我们会发现，经常拿到的数据都是相同的，这就存在一定的缓存问题。在载入数据的同时将数据缓存到内存中，一旦数据被加载其中，只要我们没有刷新页面，这些数据就会一直被缓存在内存中，所以如果需要拿到最新的数据式，我们就需
2021-02-06 23:49:38
386
原创 执行上下文
执行上下文一般分为全局执行上下文和函数执行上下文。全局执行上下文只有一个，它是由浏览器创建的，也就是常说的 window 对象。函数执行上下文可能会有多个，当一个函数被调用时，就会产生一个函数执行上下文。当函数执行时，会创建一个称为执行期上下文的内部对象，函数执行就会产生执行期上下文（独一无二的），执行完一次会销毁一次。每个执行上下文中都会有三个重要的属性：this、变量对象（VO）和 作用域链（[[scope]]）[[scope]]:存储作用域执行期上下文的集合。所有的执行上下文都会被执行上下文
2021-02-01 22:00:41
3089
原创 DOM操作中inner---，outer---的区别
举个例子，比如对于这样一个HTML元素：<div><p>content</p></div>其中他对应的四种属性如下所示：innerHTML：内部HTML<p>content</p>outerHTML：外部HTML<div><p>content</p></div>innerText：内部文本contentouterText：内部文本content上述四个属性不
2021-01-31 21:52:07
410
原创 关于js延迟加载的几种方法
1.defer用途：表明脚本在执行时不会影响页面的构造。也就是说，脚本会被延迟到整个页面都解析完毕之后再执行。<!DOCTYPE html><html><head> //浏览器会立即下载，但延迟执行。 <script src="defer1.js" defer="defer"></script></head><body><!-- 这里放内容 --></body>&
2021-01-28 21:49:07
1835
原创 事件模型的几种形态
1.DOM0它可以在网页中直接定义监听函数，也可以通过 js 属性来指定监听函数。这种方式是所有浏览器都兼容的。每个元素（包括 window 和 document ）都有通常小写的事件处理程序属性，比如onclick 。只要把这个属性赋值为一个函数即可：let btn = document.getElementById("myBtn"); btn.onclick = function() { console.log("Clicked");};2.IEIE实现了与DOM类似的方法
2021-01-25 20:57:48
352
原创 对象的创建之路~~~布啦布啦
JavaScript 中虽然 Object 构造函数或对象字面量都可以用来创建单个对象，但是这些方法都有一个明显的缺点：使用同一个接口创建很多对象，会产生大量的重复代码。0.对象字面量：var person={ this.name="Sakura", this.age=22, this.job="前端开发", this.sayName=function(){ console.log(this.name); }}//当一个变量被封装在一个对象中时，这个变量就可以称为该对
2021-01-22 22:09:57
97
原创 内部函数---toPrimitive()
在JavaScript中，如果想要将对象转换成基本类型时，也就是所谓的拆箱时，会调用toPrimitive()。toPrimitive(input,preferedType?)input是输入的值，即要转换的对象，必选；preferedType是期望转换的基本类型，他可以是字符串，也可以是数字。选填，默认为number；执行过程：如果转换的类型是number，会执行以下步骤：如果input是原始值，直接返回这个值；否则，如果input是对象，调用input.valueOf()，如果
2021-01-20 21:07:09
694
原创 Array.from()的学习
Array.from() 方法从一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。1，Array.from (obj, mapFn)obj指的是数组对象、类似数组对象或者是set对象，mapFn指的是对数组中的元素进行处理的方法//将一个类似数组的对象转为一个数组，并在原来的基础上乘以3倍let arrayLike = { '0': '6', '1': '4', '2': '8', length: 3 }Array.from(arrayLike, x => x*3) //[4,8,.
2021-01-19 23:44:54
224
原创 react开发流程
第一步：进入service中进行数据请求的封装函数其中的request函数是之前进行封装过的函数在service中找到请求数据对应的组件所在的位置第二步：在pages中找到recommend中的redux（store），修改其中的actionCreator…数据统一在redux中进行管理在使用redux之前可以进行测试请求是不是可以正常的使用测试成功然后在组件中使用hooks进行使用在常量中进行添加constant在dispatch中传的是对象的时候。执行reducer
2021-01-02 21:08:22
355
原创 NaN的学习
1.typeof NaN 的结果是什么？NaN指的“不是一个数字”（not a number）NaN 是一个“警戒值”（sentinel value，有特殊用途的常规值），用于指出数字类型中的错误情况，即“执行数学运算没有成功，这是失败后返回的结果”。typeof NaN; // "number"NaN 是一个特殊值，它和自身不相等，是唯一一个非自反（自反，reflexive，即 x === x 不成立）的值。而 NaN != NaN为 true。2.isNaN 和 Number.isNaN
2020-12-30 23:11:01
342
原创 原型与原型链深度学习
1.函数对象的 prototype 属性我们创建的每一个函数都有一个 prototype 属性，这个属性是一个指针，指向一个对象。该函数实例化的所有对象的__proto__的属性指向这个对象，它是该函数所有实例化对象的原型。//构造函数function Person(){}2.constructor属性当函数创建，prototype 属性指向一个原型对象时，在默认情况下，这个原型对象将会获得一个 constructor 属性，这个属性是一个指针，指向 prototype 所在的函数对象。c
2020-12-29 23:29:36
350
原创 js内置对象的分类
我们都知道，JavaScript有3大对象，分别是本地对象、内置对象和宿主对象。本地对象这些引用类型在运行过程中需要通过new来创建所需的实例对象。包含：Object、Array、Date、RegExp、Function、Boolean、Number、String等。内置对象内置对象是本地对象的子集。包含：Global和Math。宿主对象由 ECMAScript 实现的宿主环境提供的对象，包含两大类，一个是宿主提供，一个是自定义类对象。所有非本地对象都属于宿主对象。对于嵌入到网
2020-12-28 17:06:46
390
原创 ~~~~路由的优化~~~~
在进行页面初始进入的时候 ，总会有些默认的路径默认的路径如下所示：或者是通过render函数进行修改路径，Redirect 通过重定向进行新地址设置通常情况下Route中的页面初始需要向上面所描述那样，性能才会更加好...
2020-12-27 19:54:27
119
原创 React项目中库的使用配置
reset cssyarn add normalize.css创建reset.css文件导入@import "~normalize.css";在index.js中导入import '@/assets/css/reset.css';补充其他需要重制的css设置craco* yarn add @craco/craco* 修改package.json=>scriptes中react-scripts修改为craco * package.json同级目录下创建craco.config.js
2020-12-22 22:44:25
258
2
原创 css选择器的类型及优先级
一 选择器类型1.ID选择器：#nav{color:black;}2.class选择器：.nav{color:blue;}3.通配符选择器:*{color:black}4.子级选择器:p>span {color:blue}5.后代选择器：div span{color:white}；ul li{}6.元素选择器：p{color:red;}7.组合选择器：p1,h1{color:green}8.动态伪类选择器：link和visited必须放在最前面（无先后顺序,静态伪类选
2020-12-22 22:31:24
530
原创 常见a标签的错误及解决办法
一、在a标签中如果使用了 target=“_blank”target=“_blank” 是一种有漏洞的使用方式如果要用的话，那么就需要加上 rel=“noopener noreferrer”>，用来阻止漏洞<a href="http://baidu.com" target="_blank" ref="noopener noreferrer"></a>二、修改配置解决办法运行 npm run eject//添加配置//在package.json文件中添
2020-12-21 22:27:24
1586
原创 react引入静态图片的方式
在通过styled-component引入精灵图时,两种方式方式一：通过import引入import img1 from '../../assets/img/sprite_01.png';在img或者background中引入ing1<img src={img1} alt=""/>//或者background-image:url(${img1});方式二：require方式require只能写字符串，不能写变量background-image:url(${require("
2020-12-19 18:53:55
3157
2
原创 github了解与学习
1.目的：借助github托管项目2.仓库（Repository）仓库的意思，即你的项目，你想在GitHub上开源一个项目，必须创建一个Repository。3.收藏（Star）仓库主页的star按钮，是收藏项目的人数，有100个就很不容易了.收藏项目，方便下次查看收藏其他人的项目：查看自己收藏的项目：4.复制克隆项目（Fork）Fork之后，在自己的中心会多一份test仓库，可以进行修改，但是只能修改自己中心的，5.发起请求（Pull Request）修改之后的代码，通过Pu
2020-12-18 20:55:19
112
1
原创 自定义Hook的学习与使用~~~~~~~~
二. 自定义Hook1. 认识自定义hook自定义Hook本质上只是一种函数代码逻辑的抽取，严格意义上来说，它本身并不算React的特性。自定义 Hook 是一个函数，其名称以 “use” 开头，函数内部可以调用其他的 Hook。需求：所有的组件在创建和销毁时都进行打印组件被创建：打印 组件被创建了；组件被销毁：打印 组件被销毁了；export default function CustomHookDemo() { useEffect(() => { console.lo
2020-12-08 19:00:48
3387
原创 高级Hook的学习使用
一. Hook高级使用1. useReducer很多人看到useReducer的第一反应应该是redux的某个替代品，其实并不是。useReducer仅仅是useState的一种替代方案：在某些场景下，如果state的处理逻辑比较复杂，我们可以通过useReducer来对其进行拆分；或者这次修改的state需要依赖之前的state时，也可以使用；useReducer中有三个参数：第一个传入的是一个纯函数，reducer第二个是初始化的值，可以是数字，也可以是对象类型，第三个是一个函数
2020-12-07 18:02:58
425
原创 基础hook的学习呀
二. hooks基础1. State HookState Hook的API就是 useState，我们在前面已经进行了学习：useState会帮助我们定义一个 state变量，useState 是一种新方法，它与 class 里面的 this.state 提供的功能完全相同。一般来说，在函数退出后变量就会”消失”，而 state 中的变量会被 React 保留。useState接受唯一一个参数，在第一次组件被调用时使用来作为初始化值。（如果没有传递参数，那么初始化值为undefined）。use
2020-12-04 22:24:35
496
1
原创 Hook初识及简单了解
一. 认识hook1. 为什么需要hookHook 是 React 16.8 的新增特性，它可以让我们在不编写class的情况下使用state以及其他的React特性（比如生命周期）。我们先来思考一下class组件相对于函数式组件有什么优势？比较常见的是下面的优势：1.class组件可以定义自己的state，用来保存组件自己内部的状态；1.函数式组件不可以，因为函数每次调用都会产生新的临时变量；2.class组件有自己的生命周期，我们可以在对应的生命周期中完成自己的逻辑；比如在compon
2020-12-02 23:02:54
1824
原创 react-router高级使用
三. react-router高级使用1. 路由嵌套在开发中，路由之间是存在嵌套关系的。这里我们假设about页面中有两个页面内容：商品列表和消息列表；点击不同的链接可以跳转到不同的地方，显示不同的内容；import React, { PureComponent } from 'react';import { Route, Switch, Link } from 'react-router-dom';//下面是函数式组件function AboutProduct(props) {
2020-11-30 23:12:04
1248
原创 router基本使用~~~
二. react-router基本使用1. Router基本使用1.1 安装react-router：安装react-router-dom会自动帮助我们安装react-router的依赖；yarn add react-router-dom1.2 重要的组件react-router最主要的API是给我们提供的一些组件1.2.1 BrowserRouter或HashRouterRouter中包含了对路径改变的监听，并且会将相应的路径传递给子组件；BrowserRouter使用history
2020-11-27 22:40:39
549
原创 关于route简单学习
一. 认识react-router1. 认识前端路由1.1路由的概念路由其实是网络工程中的一个术语：在架构一个网络时，非常重要的两个设备就是路由器和交换机。路由就是通过互联的网络把信息从源地址传输到目的地址的活动。—维基百科1.2 路由的两种机制当然，目前在我们生产中路由器也是越来越被大家所熟知，因为我们生活中都会用到路由器：路由和转送路由时决定数据报从来源到目的地的路径转送将输入端的数据转移到合适的输出端1.3路由表事实上，路由器主要维护的是一个映射表；映射表会决定数据的流向
2020-11-26 17:39:23
437
1
原创 有关reducer拆分的学习
一. reducer拆分1. reducer代码拆分我们来看一下目前我们的reducer：当前这个reducer既有处理counter的代码，又有处理home页面的数据；后续counter相关的状态或home相关的状态会进一步变得更加复杂；我们也会继续添加其他的相关状态，比如购物车、分类、歌单等等；function reducer(state = initialState, action) { switch (action.type) { case ADD_NUMBER:
2020-11-22 22:28:26
328
原创 redux-saga及中间件的原理~~~~~~~
一.redux-saga1. ES6的generatorsaga中间件使用了ES6的generator语法所以我们有必须简单讲解一下：注意：我这里并没有列出generator的所有用法，事实上它的用法非常的灵活，大家可以自行去学习一下。在JavaScript中编写一个普通的函数，进行调用会立即拿到这个函数的返回结果：function foo() { return "Hello World";}foo() // Hello World如果我们将这个函数编写成一个生成器函数：
2020-11-21 23:10:40
327
原创 redux中异步请求及中间件初识
1. 组件中异步请求在之前简单的案例中，redux中保存的counter是一个本地定义的数据，我们可以直接通过同步的操作来dispatch action，state就会被立即更新。但是真实开发中，redux中保存的很多数据可能来自服务器，我们需要进行异步的请求，再将数据保存到redux中。在之前学习网络请求的时候我们讲过，网络请求可以在class组件的componentDidMount中发送，所以我们可以有这样的结构：我现在完成如下案例操作：在Home组件中请求banners和re
2020-11-19 22:44:18
591
原创 react结合redux简单学习
一. react结合redux1. redux融入react代码目前redux在react中使用是最大的，所以我们需要将之前编写的redux代码，融入到react当中去。这里创建两个组件：Home组件：其中会展示当前的counter值，并且有一个+1和+5的按钮；Profile组件：其中会展示当前的counter值，并且有一个-1和-5的按钮；store文件和上次的一样：index中的引入有些改变：其他的名字改变一下store中 index.js 文件// import redux fr
2020-11-16 22:31:36
316
原创 redux简单的使用过程及流程
二.redux的使用1. redux使用过程安装redux：npm install redux --save或yarn add redux通过创建一个简单的js文件，先来简单学习一下redux：1.2.搭建项目结构1.2.1 创建一个新的项目文件夹：learn-redux执行初始化操作yarn init安装reduxyarn add redux1.2.2 创建src目录，并且创建index.js文件1.2.3 修改package.json可以执行index.js"s
2020-11-14 23:14:48
1473
原创 redux基础学习
一.认识Redux1. 为什么需要redux？JavaScript开发的应用程序，已经变得越来越复杂了：JavaScript需要管理的状态越来越多，越来越复杂；这些状态包括服务器返回的数据、缓存数据、用户操作产生的数据等等，也包括一些UI的状态，比如某些元素是否被选中，是否显示加载动效，当前分页；管理不断变化的state是非常困难的：状态之间相互会存在依赖，一个状态的变化会引起另一个状态的变化，View页面也有可能会引起状态的变化；当应用程序复杂时，state在什么时候，因为什么
2020-11-13 22:25:49
140
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人