qq_38164763的博客

react hook面世已经有一段时间了，相信很多人都已经在代码中用上了hooks。而对于 useEffect 和 useLayoutEffect，我们使用的最多的应该就是useEffect。那他们两个到底有什么不一样的地方？使用方式这两个函数的使用方式其实非常简单，他们都接受一个函数一个数组，只有在数组里面的值改变的情况下才会再次执行 effect。所以对于使用方式我就不过多介绍了，不清楚的可以先参考官网。差异useEffect 是异步执行的，而useLayoutEffect是同步执行的。u

起因React 的 key 相信大家都很了解，也不用我多说。但是平时对于key的使用可能没有那么严格，有可能不给 key ，有可能给 index ，其实一般来说不会出什么问题，顶多就是性能上会有一些损失，但是在某些特定的情况下使用不当也可能会导致 bug ，比如下面这种情况。key导致的bug在一个后台管理系统中，左侧是一个菜单可以选择不同的选项，右侧对应了不同的视频。但是左侧菜单切换的时候，右侧视频的封面图虽然重新加载了，点击播放后视频的内容并不是新的，还是上一个选项卡的视频，看起来就像没有重新渲染

隐式转换可谓是JS中的一大难点之一，也是我们平时写代码遇见最多的东西。如果搞不清楚，我们就不能完全掌控我们的代码，因为不知道它会有什么结果。今天我们就来好好唠唠这玩意。抽象操作ES5规范的第9节中定义了一些抽象操作(abstract operation)，这些操作仅供内部使用。通俗的解释就是我们不能去调用他们，你可以理解为这只是一个规则，用于隐式转换的规则，这些规则都有他们自己的名字，方便理解...

占

做过前端开发的小伙伴就算不是非常理解重排与重绘，但是肯定都听过这两个词。那为什么这两个东西这么重要？因为他与我们的页面性能息息相关，今天，我们就来好好研究一下这两个东西。浏览器的渲染流程在讲解重排和重绘之前，我们有必要说一下浏览器的渲染流程。下面是浏览器渲染过程中最关键的几个部分。如果想了解完整的浏览器渲染流程，推荐大家去阅读其他的博客，这不是本文关注的重点。JavaScript：一般来...

一、前言  做前端的同学和npm打交道的次数可不算少，npm上有许多好用的库可以帮我们节省很多时间，那么今天我们就尝试发布一个angular组件到npm上。二、创建项目  首先，我们来创建一个angular项目，不同于平时我们使用ng new app  来创建项目，我们本次使用ng new angular-npm --createApplication=false  来创建我们的...

一、前言我们知道，在js的对象中，有下面几种属性:可枚举属性不可枚举属性从原型链上继承的属性以Symbol作为key值今天，我们就来谈一谈如何遍历这些属性。二、遍历可枚举属性  首先，遍历可枚举属性是非常常见的一个需求，我们平时比较常用的方法是for in和Object.keys()，这两个方法都能遍历可枚举属性，我们看看如下的代码:let obj = { name: "...

一、引言  深拷贝浅拷贝是一个老生常谈的问题了，那么，到底什么是深拷贝，什么是浅拷贝，又如何实现一个深拷贝。今天，我们就来谈一谈这些问题。首先，我推荐你阅读我之前写过的一篇文章js的栈内存和堆内存，其实，它就是深浅拷贝的底层原理，话不多说，我们现在开始。二、深拷贝和浅拷贝  如果你仔细阅读了我之前的那篇文章，相信你已经很了解js中的两种内存了，而深浅拷贝正是与他们的存储方式有关。  对于基...

一、前言  我们知道跨域在前端开发中是一个非常常见的问题，我们平时也有很多方法去解决他，比如说降域、cors、jsonp、postMessage等。还有一种很常用的方式是用nginx反代的方式去实现跨域，今天我们就来谈一谈关于使用nginx反代来实现跨域的问题。二、原理  我们都知道，跨域问题的产生是因为不同源的问题，那么，同源是指什么呢？同源，即域名、协议、端口都一样即同源。如果有一个不一...

一、前言  学前端的人不能不会js, 学js的人不能不懂原型链。原型链可以说是js中非常关键的一环，今天借此机会好好剖析一下原型链，也加深一下自己的理解。二、js对象的几个属性  在js中, __proto__和prototype是两个比较重要的属性，这两个的区别其实也非常简单。首先，每个对象都会有__proto属性，他会指向自己的构造函数的原型。而并不是每个对象都有prototype属性，...

一、前言  在前段时间公司有个需求是对前一个页面的操作进行记忆，例如分页的样式，选中的条件等。之前是用的session去存储记忆数据，老大让我调研一下目前比较合理的方式然后分析一下，这里以本篇博客作为总结。二、核心思想  既然需要返回上一个页面时能够回到上一次的操作界面, 势必需要对某些数据进行记忆, 所以关键点就是缓存数据.随之而来的问题是:需要缓存哪些数据数据缓存在什么位置缓存的...

一、前言  在html5出来以后，有许多新特性值得我们关注, 其中一个就是web worker。相信如果关心前端发展的同学就算没有使用过web worker也听过这个东西。今天我们就来讲一讲web worker。二、基本使用  其实，web worker的作用十分简单，就是可以在后台运行一个js文件，所以我们在实际使用中可以将一些非常耗时的计算交给web worker去做。但是值得注意的是，...

一、前言  如果使用npm来管理依赖包的同学可能会经常遇见package和package-json这两个文件，但是可能并不是每个人都知道这两个文件的含义，今天我们来简单介绍一下这两个文件。首先我们先来介绍一下语义化版本控制二、语义化版本  什么是语义化版本？我们使用npm引入的包版本都是0.1.93或者0.1.97，这就是语义化版本，这几个数字可不是随随便便写的，那么他们到底都是什么意思呢？...

一、前言  如果没有接触过js的人可能对于这两个概念比较陌生, 但是对于使用js的人来说这应该是在熟悉不过的两个概念了, 但是在es6出来以后， 函数提升的行为有了很大的变化。最根本的原因就是因为es6中有了块级作用域的概念, 下面我们开始本文的介绍。二、es6之前的变量提升和函数提升  变量提升:使用var声明的变量会提升到作用域顶部。是不是听起来很简单, 我们来看一个简单的例子:con...

一、前言  promise是es6中一个比较重要的东西，解决了之前的回调地狱的问题。也是在各种面试中出现比较频繁的问题，之前自己在面京东的时候就被问到了finally是如何实现的。可惜当时自己自认为会用promise了，殊不知对其原理了解过于肤浅，自然这次面试也挂掉了。话不多少，本文将从0开始介绍如何实现一个promise，包括then,reject,resolve,race,all,final...

一、引言  说起这三个函数，可能大部分人都觉得，这有啥，我用的贼熟练。对，没错，这是js中十分常见的三个改变this指向的函数，但是里面其实还是有一些细节的地方值得大家注意。下面我们先简要介绍一下这三个函数。二、函数的用法  其实这三个函数的用法挺简单的，所以我就不过多介绍了，只是简要的介绍一下。apply函数接受两个参数，第一个是要绑定给this的值，第二个是一个数组，call函数和ap...

1.前言  对于前端开发人员来说，js中的this指向一直是一个非常难以搞懂的东西，若你没有花一定的时间去理解它，在开发的过程中还真的会踩很多坑。所以，我也借此博客来分享一下自己对于js中this的理解。2.规则总结  对于js中的this到底指向什么，我借用我在别人博客上看见的几点总结。因为我看那篇文章离现在的时间比较久远，所以目前也找不到那篇文章了。只能对原作者说一声抱歉，如果有人在其他...

一、前言  Vue可以说是最近比较火的一个框架了，自己也用vue写过几个小项目了，所以在空余时间研究了一下vue双向绑定的原理，最后形成博客让自己印象更加深刻，也算给大家分享一些经验。二、实现原理  首先我们来说一下vue的双向绑定到底是如何实现的。其实vue是使用了数据劫持+订阅发布模式来实现的双向绑定。其中最主要的一个函数就是Object.definProperty()，如果不清楚这个函...

前言  三列等高布局可能是我们平时开发中用的比较多的布局, 因为有时为了美观必须让三列等高, 但是我们的div又是被内容撑开的, 不能提前设置高度, 这时候就需要我们利用一些骚操作。不过在flex布局出来以后, 这个问题就变得很简单了, 我们后面再介绍。margin+padding实现  首先我们先来看一下最后的效果:  左边两列都会自动和第三列对齐, 下面我们一步步来实现。  首先很...

一、引言  首先，我们应该对于栈内存和堆内存有一个大概的了解。存储在栈内存中的变量应该是大小固定并且不可扩展的。而存储在堆内存中的变量则灵活许多，可以动态增加或减少。通过理解js的栈内存和堆内存能够帮助我们理解很多js中的内容，下面我们正式开始。首先介绍一下js中的基本类型和引用类型。二、基本类型和引用类型  我们知道在js中的数据类型可以分为基本类型和引用类型。基本类型是存在栈内存中的，引...

一、前言  这个简单树组件也是自己为了熟悉react而做的，所以只是简单实现了基本功能，但是做完之后感觉其中也有很多需要自己总结的地方。其中还有几个未解决的问题自己在解决之后会修改这篇博文。话不多少，首先来看看我们到底要实现什么效果我们的目标很简单，就是实现这样一个功能就行了，但是注意需要有一个半勾选的状态，就是父节点的某个子结点被选中了，那么这个结点就是半勾选状态。二、思路分析  当我...

一、什么是闭包  在JS高程上，是这样介绍闭包的:闭包是指有权访问另一个函数作用域中的变量的函数。比如下面这个最简单的例子：function returnf() { var a = 1; return function f() { console.log(a); }}  在f中可以访问returnf函数中的a变量，所以这样就创建了一个闭包。当我们用变量接到f函数的时候，就可以在...

 之前本人花了一天时间粗略阅读了vue.js的文档，这是官方文档链接，然后再开始在视频的帮助下进行学习。今天学习的内容主要有以下几点:1.vue.js的基本语法2.一些基本指令3.事件修饰符4.vue中的样式5.区分MVC和MVVM，区分框架和库5.写了两个简单的实例下面我将阐述个人认为的难点以及重要的地方，vue的基本语法以及事件修饰符我将不再过多阐述，官方文...