- 博客(36)
- 收藏
- 关注
RSS订阅
原创 React性能优化——PureComponent & ShouldComponentUpdate详解篇
背景 为了响应公司中台化的战略，6.7月份的时候做了一个中台组件的项目。 组件逻辑比较复杂，而且因为有不同的接入方，需求可能都会不一样，所以都是通过读接口来获取配置，所有的字段依据配置来决定显隐，是否必填，以及各种的校验，联动，并且划分的一些功能模快同样也是走的配置。 以上听起来还是比较复杂的，组件因为包含大量的不同类型的表单，而不同表单又有一些通用的输入框，像文本输入框，时间选择框，所以我们选择以最小颗粒度拆分出一些组件。为了优化
2020-11-30 09:46:46
1313
1
原创 三个好用又令人期待的JavaScript新特性！
1、Optional Chaining(可选链式调用)当访问一个深层树形结构的对象时，我们总需要判断中间节点属性是否存在：let person ={ name:'abc',}let address = person.info.address// Uncaught TypeError: Cannot read property 'address' of undefined这是我们现在...
2019-11-08 10:37:46
323
原创 React进阶——useRef()
RefReact提供了一个属性ref，用于表示对组价实例的引用，其实就是ReactDOM.render()返回的组件实例：ReactDOM.render()渲染组件时返回的是组件实例；渲染dom元素时，返回是具体的dom节点。ref可以挂载到组件上也可以是dom元素上；挂到组件(class声明的组件)上的ref表示对组件实例的引用。不能在函数式组件上使用 ref 属性，因为它们没有实例：挂载到dom元素上时表示具体的dom元素节点。useRef()useRef这个hooks函数，除了
2020-05-27 22:40:46
4291
3
原创 JS遍历对象，获取key、value的几种方法
1. 使用for…inlet person = { name: '张三', age: '21',}for(let key in person){ if(Object.prototype.hasOwnProperty.call(person, key)){ console.log('key-value',key,person[key]) }}//key-valu...
2020-04-28 15:23:40
18736
4
原创 一文带你了解 JavaScript 函数式编程
一、什么是函数式编程函数式编程是一种编程范式，主要是利用函数把运算过程封装起来，通过组合各种函数来计算结果。函数式编程意味着你可以在更短的时间内编写具有更少错误的代码。举个简单的例子，假设我们要把字符串 functional programming is great变成每个单词首字母大写，我们可以这样实现：var string = 'functional programming is grea...
2019-08-23 19:40:30
132
原创 Git常用命令详解
Git 是一个开源的分布式版本控制系统，用于敏捷高效地处理任何或小或大的项目。常用命令1.创建仓库git init初始化仓库，使用当前目录作为Git仓库，该命令执行完后会在当前目录生成一个 .git 目录。2.克隆git clone <repo>使用 git clone 拷贝一个 Git 仓库到本地，让自己能够查看该项目，或者进行修改。如果我们需要克隆到指定的目...
2019-07-02 09:43:11
207
原创 Node.js之process进程
Node process.env在看一些前框框架实现的源码的时候，经常会看到类似如下的代码：if (process.env.NODE_ENV === 'production') { module.exports = require('./prod.js')} else { module.exports = require('./dev.js')}node中有全局变量process表...
2019-04-17 14:29:03
247
原创 构建 react应用程序 （二）（react-scripts实现原理）
在前面讲到了使用create-react-app来创建项目，这节我们来分析下原理。react-scripts有以下支持，都帮你配置好了：React, JSX, ES6, and Flow syntax support.Language extras beyond ES6 like the object spread operator.Import CSS and image file...
2019-04-17 11:47:08
3955
原创 create-react-app 构建 react应用程序 （一 )
第一步 全局安装 create-react-appnpm install -g create-react-app 第二步 通过create-react-app来构建自己的项目create-react-app demo-app //demo-app是你要创建的项目名 第三步 执行npm start...
2019-04-17 10:38:24
280
原创 JavaScript的this原理
Javascript 是一个文本作用域的语言，就是说，一个变量的作用域，在写这个变量的时候确定。this 关键字是为了在 JS 中加入动态作用域而做的努力。所谓动态作用域，就是说变量的作用范围，是根据函数调用的位置而定的。从这个角度来理解 this, 就简单的多。this 是 JS 中的动态作用域机制, 具体来说有四种, 优先级由低到高分别如下：1. 默认的 this 绑定，就是说 在一...
2019-03-15 14:53:01
175
原创 js开发中的常用小技巧（持续更新ing）
1. if 语句可以用&&运算代替这样做的好处有两个： 代码会更加简洁 &&运算执行比 if 语句速度更快如if(id===4){ //your code}可以写成id===4&&{ //your code}2. 使用 || 运算符来赋值let params={ id:123,...
2019-03-04 15:34:06
377
转载 用 async/await 来处理异步
async、await 是异步的终极解决方案async方法执行时，遇到await会立即执行表达式，然后把表达式后面的代码放到微任务队列里，让出执行栈让同步代码先执行。
2019-02-28 17:35:23
290
原创 package.json和package-lock.json的区别
package.json:通过npm init命令创建，主要用来定义这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）。npm install命令根据这个配置文件，自动下载所需的模块，也就是配置项目所需的运行和开发环境。package-lock.json：在 npm install时候自动生成，用以记录当前状态下实际安装的各个npm packa...
2019-02-27 18:02:59
1158
2
原创 react组件生命周期详解
生命周期状态组件的生命周期可分成三个状态：Mounting：已插入真实Dom Updating：正在被重新渲染 Unmounting：已移除真实Dom生命周期方法React为每个状态都提供了两种处理函数，will在进入状态之前调用，did在函数进入状态之后调用，三种状态供给五种处理函数。componentWillMount 在渲染前调用,在客户端也在服务端。 compon...
2019-02-22 17:50:28
262
原创 JavaScript 作用域链、闭包、原型和原型链
作用域链及和标识符解析每一个JavaScript函数都表示为一个对象, 要确切的说, 是Function对象的一个实例. Function对象同其他对象一样, 拥有可以编程访问的属性, 和一系列不能通过代码访问而仅供JavaScript引擎存取的内部属性. 其中有一个内部属性是[[Scope]].内部属性[[Scope]]包含了一个函数被创建的作用域中对象的集合。这个集合被称为函数的作用域...
2019-01-27 15:15:38
242
原创 脚本无阻塞加载策略
从上图可以看出，当浏览器遇到<script>标签时，浏览器会停止处理页面，先执行Javascript代码，然后再继续解析和渲染页面。在这个过程中，页面和用户的交互完全被阻塞了。通常表现为显示空白页面，用户无法浏览内容。 现在的浏览器都支持并行下载文件，比如上图同时下载多个图片。而且，IE8 、FireFox3.5、Safari4和Chrome2都支持并行...
2019-01-13 11:28:39
263
原创 sublime Text3下Emmet使用技巧
转自：http://blog.csdn.net/laokdidiao/article/details/514294041.Package Control安装第一种方法是在控制台中复制粘贴代码按回车，https://sublime.wbond.NET/installation第二种办法下载pc文件，百度一下很多方案，这里不详说了2.Emmet安装1、按Ctrl+Shift+P命令板2、输...
2018-11-15 19:14:14
556
原创 CSS基本布局
左列定宽，右列自适应.left{float:left;width:100px;} .right{margin-left:100px;}
2018-09-25 22:41:52
154
原创 leetcode 35. 搜索插入位置
给定一个排序数组和一个目标值，在数组中找到目标值，并返回其索引。如果目标值不存在于数组中，返回它将会被按顺序插入的位置。你可以假设数组中无重复元素。示例 1:输入: [1,3,5,6], 5输出: 2示例 2:输入: [1,3,5,6], 2输出: 1示例 3:输入: [1,3,5,6], 7输出: 4示例 4:输入: [1,3,5,6], 0输出: 0一道典型...
2018-09-23 15:51:32
237
原创 程序员面试常考知识点之 前端篇
知识点:JavaScript的hoisting机制（声明提升机制）1.我是变量声明，我会被提升在作用域顶端！var a;2.我是变量定义，我的声明部分会被提升，赋值部分不会被提升！var b = 'test';3.我是函数定义，或者叫我函数表达式。其实我就是变量定义，只不过恰好被赋值的类型是函数，所以也只提升变量名，不提升函数值！var c = function() {...
2018-09-12 23:05:22
441
原创 leetcode 498. 对角线遍历
给定一个含有 M x N 个元素的矩阵（M行，N列），请以对角线遍历的顺序返回这个矩阵中的所有元素，对角线遍历如下图所示。示例:输入:[ [ 1, 2, 3 ], [ 4, 5, 6 ], [ 7, 8, 9 ]]输出: [1,2,4,7,5,3,6,8,9]说明:给定矩阵中的元素总数不会超过 100000 。这道题的思路就是判断一下边界，用一个up变量记录方向，碰...
2018-09-06 17:44:37
585
原创 程序员面试必备知识点之 计算机网络
1.计算机网络分为哪几层？ISO/OSI七层模型ISO：国际标准化组织 OSI：开放系统互联模型 IOS：苹果操作系统，而且是思科公司为其网络设备开发的操作维护系统以下是ISO七层模型图解： 其中上三层是对用户提供服务的，下四层是对用户信息传递进行传递的。各层功能详解物理层：物理层是最底层的一层，它是数据之间比特流传输的实际形式；数据链路层：数据...
2018-09-03 10:11:42
1591
原创 leetcode 66. 加一
给定一个由整数组成的非空数组所表示的非负整数，在该数的基础上加一。最高位数字存放在数组的首位， 数组中每个元素只存储一个数字。你可以假设除了整数 0 之外，这个整数不会以零开头。示例 1:输入: [1,2,3]输出: [1,2,4]解释: 输入数组表示数字 123。示例 2:输入: [4,3,2,1]输出: [4,3,2,2]解释: 输入数组表示数字 4321。...
2018-08-31 09:42:11
123
原创 leetcode 136. 只出现一次的数字
给定一个非空整数数组，除了某个元素只出现一次以外，其余每个元素均出现两次。找出那个只出现了一次的元素。说明：你的算法应该具有线性时间复杂度。 你可以不使用额外空间来实现吗？示例 1:输入: [2,2,1]输出: 1示例 2:输入: [4,1,2,1,2]输出: 4这道题的可以考虑使用异或操作，下面对异或操作做一个简单的介绍： 异或运算规则： 0 ^ 0 = 0...
2018-08-30 17:17:43
198
原创 leetcode 217. 存在重复元素(C++)
给定一个整数数组，判断是否存在重复元素。如果任何值在数组中出现至少两次，函数返回 true。如果数组中每个元素都不相同，则返回 false。示例 1:输入: [1,2,3,1]输出: true示例 2:输入: [1,2,3,4]输出: false示例 3:输入: [1,1,1,3,3,4,3,2,4,2]输出: true这道题的思路最容易想到的就是双重f...
2018-08-30 14:42:39
762
原创 leetcode 189. 旋转数组
给定一个数组，将数组中的元素向右移动 k 个位置，其中 k 是非负数。示例 1:输入: [1,2,3,4,5,6,7] 和 k = 3输出: [5,6,7,1,2,3,4]解释:向右旋转 1 步: [7,1,2,3,4,5,6]向右旋转 2 步: [6,7,1,2,3,4,5]向右旋转 3 步: [5,6,7,1,2,3,4]示例 2:输入: [-1,-100,3,99...
2018-08-30 12:37:52
117
原创 leetcode 122. 买卖股票的最佳时机 II
给定一个数组，它的第 i 个元素是一支给定股票第 i 天的价格。设计一个算法来计算你所能获取的最大利润。你可以尽可能地完成更多的交易（多次买卖一支股票）。注意：你不能同时参与多笔交易（你必须在再次购买前出售掉之前的股票）。示例 1:输入: [7,1,5,3,6,4]输出: 7解释: 在第 2 天（股票价格 = 1）的时候买入，在第 3 天（股票价格 = 5）的时候卖出, 这笔...
2018-08-29 23:01:45
165
原创 leetcode 26. 删除排序数组中的重复项
给定一个排序数组，你需要在原地删除重复出现的元素，使得每个元素只出现一次，返回移除后数组的新长度。不要使用额外的数组空间，你必须在原地修改输入数组并在使用 O(1) 额外空间的条件下完成。示例 1:给定数组 nums = [1,1,2], 函数应该返回新的长度 2, 并且原数组 nums 的前两个元素被修改为 1, 2。 你不需要考虑数组中超出新长度后面的元素。示例 2:...
2018-08-29 11:32:28
154
原创 php Maximum execution time of 30 seconds exceeded解决办法
今天在做上传附件的功能的时候，一直报Fatal error: Maximum execution time of 30 seconds exceeded in C:\WWW\index.php on line 56错误。 百度了一下，发现问题是php配置文件的问题，默认的最大执行时间不能超过30s，于是修改php.ini，将max_execution_time`=30改为300，结果发现还是不行...
2018-08-27 23:05:44
1371
原创 leetcode 101. 对称二叉树
给定一个二叉树，检查它是否是镜像对称的。例如，二叉树 [1,2,2,3,4,4,3] 是对称的。 1 / \ 2 2 / \ / \3 4 4 3但是下面这个 [1,2,2,null,3,null,3] 则不是镜像对称的: 1 / \ 2 2 \ \ 3 3说明:如果你可以运用递归和迭代两种方法解决这...
2018-08-24 17:06:18
121
原创 leetcode 160. 相交链表
编写一个程序，找到两个单链表相交的起始节点。例如，下面的两个链表：A: a1 → a2 ↘ c1 → c2 → c3 ↗ B: b1 → b2 → b3在节点 c1 开始相交。注意：如果两个链表没有交点，返回 null. 在返回结果...
2018-08-23 16:24:05
105
原创 leetcode 142. 环形链表 II
给定一个链表，返回链表开始入环的第一个节点。 如果链表无环，则返回 null。说明：不允许修改给定的链表。进阶： 你是否可以不用额外空间解决此题？优化后解法：//使用快慢指针来进行求解//画图可得（非环的线性部分为L，入环节点到第一次相遇的节点为a，环剩余部分为b）：//第一次相遇：2（L+a）=（L+a）+b+a，得：L=b//所以第一次相遇时，让慢指针回到head节...
2018-08-22 20:22:36
552
原创 leetcode 141. 环形链表
给定一个链表，判断链表中是否有环。进阶： 你能否不使用额外空间解决此题？优化后解法：//主要通过判断是否遇到链表尾，是的话提前结束循环;//优化时间：16ms->8msclass Solution {public: bool hasCycle(ListNode *head) { if(head==NULL||head->next==NUL...
2018-08-22 19:17:55
100
原创 leetcode 104. 二叉树的最大深度
给定一个二叉树，找出其最大深度。二叉树的深度为根节点到最远叶子节点的最长路径上的节点数。说明: 叶子节点是指没有子节点的节点。示例： 给定二叉树 [3,9,20,null,null,15,7]， 3 / \ 9 20 / \ 15 7返回它的最大深度 3 。优化后解法：//对每个节点，当前节点为空的话，返回0；//不为空，...
2018-08-22 18:37:39
121
原创 leetcode 102.二叉树的层次遍历
给定一个二叉树，返回其按层次遍历的节点值。 （即逐层地，从左到右访问所有节点）。例如: 给定二叉树: [3,9,20,null,null,15,7],3 / \ 9 20 / \ 15 7 返回其层次遍历结果：[ [3], [9,20], [15,7] ] /** * Definition for a bin...
2018-08-22 16:22:51
1635
原创 C++引用和指针的区别
C++引用引用相当于变量的别名。一旦把引用初始化为某个变量，就可以使用该引用名称或变量名称来指向变量。C++引用和指针的区别引用很容易与指针混淆，它们之间有三个主要的不同：- 不存在空引用。引用必须连接到一块合法的内存；- 一旦引用被初始化为一个对象，就不能被指向到另一个对象，指针可以在任何时候指向到另一个对象；- 引用必须在创建时被初始化。指针可以在任何时间被初始化。...
2018-08-22 14:08:31
166
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人