- 博客(57)
- 收藏
- 关注
RSS订阅翻译 【译】 React官方：函数组件与类组件的差异 ？
话外：随着 react 新特性 HOOKS 的提出，最新很多人开始讨论 react 里面的函数组件和 class 组件到底有什么不同？这里是 Dan Abramov 的一篇文章 How Are Function Components Different From Classes, 下面是对这篇文章的翻译，大致意思大致表达出来了，不足的地方，请大家多多指教 ：）跳转：https://juejin...
2019-03-27 15:21:01
1503
原创 chrome调试技巧
总结的掘金小册:你不知道的Chrome调试技巧里面的内容，部分有做总结，特别的章节满满的干货，就直接贴的链接。通用：Copying and saving1、可通过copy拿到任何你能拿到的资源包括一些变量：copy(location)、copy($_)/copy($0)2. store as global：相对数据做额外的操作，但不想影响原来的值；对console中打印的数据，右击 它，并...
2019-03-12 16:08:50
440
原创 从头条面试题看 JS 事件循环与 macro micro 任务队列
这里需要明白几个概念：同步任务、异步任务、task queue、microtask、macrotask同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；异步任务指的是，不进入主线程、而进入"任务队列"（task queue）的任务，只有"任务队列&q
2019-03-07 16:53:04
917
原创 antd：ConfigProvider中为什么需要为 wave effect 动效，单独定义全局的 csp？
为什么：在做波纹效果的时候添加了style标签的内联样式，为了防止xss攻击，可启动网站的内容安全策略，所以这里配置了csp属性，再将这个属性的值传递给子组件的style/script标签生成nonce属性。分析：ant-design组件中：Buttoon、Audio、Dropdown实现了水波纹效果，它们是应用了Wave组件(@/components/_utils/wave.tsx)，在C...
2019-03-01 11:18:06
1969
转载 ReactV16.3即将更改的生命周期
一年多来，React团队一直致力于实现异步渲染。上个月，他在JSConf冰岛的演讲中，丹揭示了一些令人兴奋的新的异步渲染可能性。现在，我们希望与您分享我们在学习这些功能时学到的一些经验教训，以及一些帮助您准备组件以在启动时进行异步渲染的方法。我们了解到的最大问题之一是，我们的一些传统组件生命周期会导致一些不安全的编码实践。他们是：componentWillMount componentW...
2019-02-27 11:54:03
284
原创 react里面props到底是什么，怎么用。
概念官网上是这么说的：When React sees an element representing a user-defined component, it passes JSX attributes to this component as a single object. We call this object “props”.意思是：当React看到表示用户定义组件的元素时，它会将...
2019-02-26 14:09:18
3658
1
原创 无单位的行高值
line-height属性既可以接收无单位的数值，也可以使用带单位的数值（不建议这么使用）当定义一个有单位的行高时，eg:line-height:1em,若后代元素没有定义行高，就会将父元素计算后的行高结果值传给全部的后代元素，注意这里的em是相对于当前元素的font-size来进行换算的。当定义一个无单位的行高时eg:line-height:1.现在传给后代元素的是这个数字原始值，而不是...
2018-12-21 20:48:54
179
原创 重置样式表
浏览器有默认的样式表，即使开发者不对自己的页面写一行css代码，打开的页面也总会存在样式，但不同的浏览器的默认样式略有不同，这在一定程度上给开发者创造了麻烦，所以一般在开始写css代码的之前总是会先重置样式表。具体方法： css reset：访问https://meyerweb.com/eric/tools/css/reset ，将其中的重置代码复制粘贴到自己的css文件中，建议单独写一个cs...
2018-12-20 19:08:49
2503
原创 词法作用域、动态作用域
在看《你不知道的JavaScript》的时候更加深入的了解了一下js中的作用域，看的是很带劲儿，但是总害怕记不住，好记性不如烂笔头嘛，所以我决定稍微写一些，考虑的不太全面，以后慢慢修改。需要明确的是：事实上JavaScript并不具有动态作用域，它只有词法作用域，简单明了，但是this机制某种程度上很像动态作用域。词法作用域：是一套引擎如何寻找变量以及会在何处找到变量的规则，它是定义在词...
2018-10-10 16:06:58
509
原创 同样不太好懂的箭头函数this的指向
1、先来看一个例子吧：（输出什么呢？）var foo={ foo:function(){ console.log(this); }, b:()=>{console.log(this)}}foo.foo(); foo.b();答：foo.foo()//foo; foo.b()//window;第一个foo.foo()是普通函数的执行...
2018-09-29 18:24:12
192
原创 最近的笔试和面试
笔试：美丽联合：1、console.log(["a",,"b",,].length)//4 注意这里未填写元素的位置的值为undefined。所以这里的length为4.但是最后一个，后面不会再补值。["a",,"b",,]=>["a", undefined, "b", undefined]面试：1、事件处理函数中的e.target和e.curren
2018-09-27 21:44:08
310
转载 jQuery绑定事件
现在还在使用的jQuery绑定事件的方法：on、bind(delete与live在jQuery1.7中被移出)on->off、bind->unbind1、bind(event,[data],function)bind 是使用频率较高的一种，作用就是在选择到的元素上绑定特定事件类型的监听函数，参数的含义如下：event：事件类型，如 click、change、mouse...
2018-09-18 08:59:30
395
转载 从[]==flase看js隐性转换
JS的数据类型首先，回想一下JS的类型都有什么。原始值（primitives）： undefined， null， booleans， numbers，strings， symbol（es6）对象值（objects）： Objectok， 这就是全部了，我们接下来看看到底发生了什么导致隐式转换如此不可捉摸。ToPrimitive在发生转换的时候，js其实都是会将操作对象转化...
2018-09-12 23:08:58
179
转载 css的关键字：initial、inherit、unset
经常会碰到，问一个 CSS 属性，例如 position 有多少取值。通常的回答是 static、relative、absolute 和 fixed 。当然，还有一个极少人了解的 sticky 。其实，除此之外， CSS 属性通常还可以设置下面几个值：initial inherit unset revert 1 2 3 4 5 6 ...
2018-09-12 16:56:14
2110
转载 循环遍历
1、最简单的for循环2、for····in····循环返回typeof为object的键名，不能直接获得键值3、for···of···本质上是调用iterator接口产生的遍历器获得键值；（1）使用for of 遍历对象，因为自己生成的对象没有iterator接口，所以在直接循环访问对象时会报错。这时可以配合使用entries()、keys()、values()返回一个遍历器...
2018-09-10 17:14:39
440
原创 匿名函数的this指向
var obj={ x:1, xyz:function(){ with(this){ function con(){ console.log(x); console.log(this.x); } var x=2;//因为是在obj对象上下文中执行的，所以这里对x的初始化，覆盖了上面的x:1; (fun...
2018-09-08 17:30:15
1064
原创 猫眼面试
1、三列布局（毕问题）:左右宽度固定，中间自适应flex布局（超级简单易用）html:<div id="container"> <div class="left">e</div> <div class="main">jddhfg</div> <div class=&qu
2018-08-31 23:20:55
1029
转载 http强制缓存VS协商缓存
首先与缓存相关的header字段有：与强制缓存相关：catch-control、expires与协商缓存相关：Last-Modified/if-Modified-Since、Etag/if-None-Match. 本文主要讲解浏览器端的缓存，缓存的作用是不言而喻的，能够极大的改善网页性能，提高用户体验。1、浏览器缓存缓存这东西，第一次必须获取到资源后，然后根据返回的信息来告诉如...
2018-08-29 14:45:32
1266
转载 原生js写继承
js中实现继承的方法：假设现在存在一个构造函数想继承另一个构造函数。function Friend(){ this.friend="xiaohua";}function Person(name,age){ this.name=name; this.age=age; this.sayName=function(){ console.log("he...
2018-08-25 21:53:53
1177
转载 数组去重
1.双重循环去重，增加了额外的空间function singelItem(array){ var newArr=[]; if(array.length===0){ return; } for(var i=0;i<array.length;i++){ if(i===0){//先添加进一个item newArr.push(array[i]); ...
2018-08-25 09:58:55
141
转载 函数的参数作用域
注意理解：1、var x = 1;function f(x, y = x) { console.log(y); console.log(x);//undefined}f(2) // 22、let x = 1;function f(y = x) { let x = 2; console.log(y);}f() // 13、function f(...
2018-08-12 19:39:24
4008
3
原创 let VS const VS var
let const var 都是用来声明变量的，let const是es6提出的，为了更好地写代码，在调试的时候尽早发现错误。它们具备一些新的语法知识。先回忆一下var的语法知识：1、变量提升，使用var声明的变量会声明语句提升到当前作用域的顶部，赋值留在原地2、具有函树作用域，全局作用域。再看下let:1、块级作用域，只影响一个包含块儿。2、不具有变量提升，且若在一...
2018-08-12 08:21:24
301
原创 遍历对象
1、for...in:for...in语句以任意顺序遍历一个对象的可枚举属性。对于每个不同的属性，语句都会被执行。语法：for (var veriable in object){....}//循环时，会将对象的可枚举属性赋值给veriable，通过object[veriable]可访问属性的值2、Object.keys ():Object.keys()方法会返回一个由给定对象的自身可枚...
2018-08-11 19:43:58
605
原创 网易算法
小Q得到一个神奇的数列: 1, 12, 123,...12345678910,1234567891011...。并且小Q对于能否被3整除这个性质很感兴趣。小Q现在希望你能帮他计算一下从数列的第l个到第r个(包含端点)有多少个数可以被3整除。 输入描述:输入包括两个整数l和r(1 <= l <= r <= 1e9), 表示要求解的区间两端。 输出描述...
2018-08-10 22:53:55
385
转载 ref获取dom的真实节点
要在React中设置焦点，我们可以将Refs用于DOM元素。使用它，我们首先在组件类的JSX中创建一个元素的引用：然后我们可以在需要时将它集中在组件的其他位置：class CustomTextInput extends React.Component { constructor(props) { super(props); this.textInput = Rea...
2018-08-10 10:21:27
2837
转载 牛客网在线判题系统（JavaScriptV8）的使用
JavaScript作为一种弱类型的编程语言，语法和C/C++、JAVA等存在差别，但是对于大部算法题，不只是C/C++、JAVA，也依然可以使用JavaScript来实现。所以在牛客网中，如果你喜欢JavaScript这门编程语言，同时对数据结构与算法感兴趣，当然可以使用这门语言去刷编程题。 大家有没有跟我碰到过和我类似的情况，在牛客网刷编程题的时候，编译器提供的是Javascript(v...
2018-08-09 22:10:49
3309
原创 算法题（笔试真题）
1、给出一个非空的字符串，判断这个字符串是否是由它的一个子串进行多次首尾拼接构成的。例如，"abcabcabc"满足条件，因为它是由"abc"首尾拼接而成的，而"abcab"则不满足条件。关键点：记录子字符串的结束位置end。 function fun(str){ var end=0,j=0,result=false; for(var i=1;i<str.len...
2018-08-09 17:35:59
219
转载 React.js组件的属性：props
一、什么是属性React官方文档上对于属性的介绍如下：React 里有一个非常常用的模式就是对组件做一层抽象。组件对外公开一个简单的属性（Props）来实现功能，但内部细节可能有非常复杂的实现。 React中的每一个组件，都包含有一个属性（props），属性主要是从父组件传递给子组件的，在组件内部，我们可以通过this.props获取属性对象 二、属性的使用方法reac...
2018-08-06 22:57:43
1401
原创 原生js方法document.getElementsByClassName在ie8及其以下的兼容性问题
var divs = getClassNames('tabs_div' , 'div'); //找到类名为tabs_div的div元素 function getClassNames(classStr,tagName){ //判断document对象中是否包含getElementsByClassName方法 if (document.getElementsByClassNa...
2018-08-05 16:42:53
530
原创 propTypes与defaultTypes
propTypes：为防止父组件给子组件传递的参数不是子组件期望的参数类型而导致程序运行错误，在子组件中可以对父组件传递过来的参数进行校验，使用的就是propTypes。使用方法：import PropTypes from 'prop-types';class Greeting extends React.Component { render() { return (...
2018-07-26 15:01:21
892
原创 基础react学习（一）
react：一种必学的，要掌握的前端框架。要学习好一门语言总是要边动手实践，边查阅它的文档，了解它的相关语法和用法。这里我用react官网提供的一套脚手架工具（配置工具）创建了一个包含开发react必要配置的文件：1、看官网点击doc，找到create react app。使用npm安装create-react-app脚手架。我这里和文档的安装方法不一样，因为安装官方文档的安装方法安装失...
2018-07-25 23:42:20
165
转载 HTMLCollection
1、是什么？它是HTML DOM对象的一个接口，这个接口包含了获取到的DOM元素集合，返回的类型是Object。 它很像数组，又不是数组，如果你想使用数组的一些方法操作这个集合，那么不好意思。 它是及时更新的，当文档中的DOM变化是，它是会随之变化的。 属性：HTMLCollection.length，返回集合当中子元素的数目。 它有自带的方法 1.HTMLCo...
2018-07-18 13:10:01
5401
转载 GitHub上仓库名的修改和仓库的删除操作
处理步骤如下列图所示： 1、首先登录你的github,查看你的仓库目录页，点击你需要更改的仓库 2、进入此仓库管理页面，点击Settings 3、进入到设置页面，如果你是想要更改名称的话，直接在这里改，然后点击Rename即可 4、进入到设置页面，如果你是想要删除此仓库，则进行如下图操作即可 ...
2018-07-16 18:41:41
1734
转载 React.createClass({})
eact组件 -- React.createClass()方法1、React.createClass()方法用于生成一个组件类2、所有组件类都必须有自己的render方法，用于输出组件3、假如生成一个组件类HelloMessage，模板插入<HelloMessage />时，会自动生成组件类HelloMessage的一个实例4、组件类的第一个字母必须大写，否则会报错，比...
2018-07-16 18:08:24
1275
原创 事件集合
一、Web浏览器中可能发生的事件有很多类型；DOM3级事件规定了以下几类事件： 1、 UI事件：当用户与页面上的元素发生交互时触发 2、 焦点事件：当元素获得或者失去焦点时触发 3、 鼠标事件：通过鼠标在页面上执行操作时触发 4、 滚轮事件：使用鼠标滚轮时触发 5、 文本事件：在文档中输入文本时触发 6、 键盘事件：用户通过键盘在页面上执行操作时触发...
2018-07-13 15:12:24
646
原创 git指令——只关于上传文件部分
git init //把这个目录变成Git可以管理的仓库 git add README.md //文件添加到仓库 git add . //不但可以跟单一文件，还可以跟通配符，更可以跟目录。一个点就把当前目录下所有未追踪的文件全部add了 git commit -m "first commit" //把文件提交到仓库 git remote add origin git@githu...
2018-07-08 23:06:47
5040
原创 小白入门git-----使用git将本地代码上传至github
1、首先得有一个Github的账号。没有的话先去注册一个。https://github.com2、使用git需要一个Git工具：给出下载地址，一路点击安装即可：https://git-for-windows.github.io/、不懂怎么安装的话可以看看这篇博客，讲的很详细。我就不再赘述https://www.cnblogs.com/specter45/p/github.html#s13、创建仓库...
2018-07-08 22:59:46
349
原创 学习笔记-----sass
sass有关的命令行语句：1、sass-convert 待转换的文件 转换之后的文件 eg:sass-convert main.scss main.sass2、compass create 文件名 利用compass创建一个sass项目3、compass watch ，进入到文件名下（：cd 文件名） 后，监听sass文件的变化，每次修改sass文件，系统自动将其转换为css文件。并...
2018-07-05 16:50:46
140
原创 对链表的简单学习
什么是链表要存储多个元素，数组可能是最常用的数据结构。这种数据结构非常方便，但是有一个缺点：从数组的起点或者中间插入或移除项的成本非常高，因为需要移动元素（比如你插入一个元素后面的所有的元素都移动了“位置”）。链表存储有序的元素集合，但是不同于数组，链表中的元素在内存中并不是连续放置的。每个元素都是由一个存储元素本身的节点和一个指向下一元素的引用（也叫指针或者链接）组成。相比于数组来说，链表的好处...
2018-07-05 09:43:17
135
原创 在二维数组中的查找
题目：在一个二维数组中，每一行都按照从左到右递增的顺序排序，每一列都按照从上到下的顺序排列，请完成一个函数，输入这样一个二维数组和一个整数，判断数组中是否含有该整数方法一：最开始的想法：用两个for循环来做，代码如下：function find2(matrix,rows,columns,number){ var found2=false; for(var i=0;i<rows;i++...
2018-07-03 21:52:28
259
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人