自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

scu_南的博客

不会总结的前端不是好前端

  • 博客(36)
  • 收藏
  • 关注

原创 React性能优化——PureComponent & ShouldComponentUpdate详解篇

背景  为了响应公司中台化的战略,6.7月份的时候做了一个中台组件的项目。   组件逻辑比较复杂,而且因为有不同的接入方,需求可能都会不一样,所以都是通过读接口来获取配置,所有的字段依据配置来决定显隐,是否必填,以及各种的校验,联动,并且划分的一些功能模快同样也是走的配置。   以上听起来还是比较复杂的,组件因为包含大量的不同类型的表单,而不同表单又有一些通用的输入框,像文本输入框,时间选择框,所以我们选择以最小颗粒度拆分出一些组件。为了优化

2020-11-30 09:46:46 1310 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 322

原创 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 4290 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 18697 4

原创 一文带你了解 JavaScript 函数式编程

一、什么是函数式编程函数式编程是一种编程范式,主要是利用函数把运算过程封装起来,通过组合各种函数来计算结果。函数式编程意味着你可以在更短的时间内编写具有更少错误的代码。举个简单的例子,假设我们要把字符串 functional programming is great变成每个单词首字母大写,我们可以这样实现:var string = 'functional programming is grea...

2019-08-23 19:40:30 130

原创 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 246

原创 构建 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 3953

原创 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 279

原创 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 376

转载 用 async/await 来处理异步

async、await 是异步的终极解决方案async方法执行时,遇到await会立即执行表达式,然后把表达式后面的代码放到微任务队列里,让出执行栈让同步代码先执行。

2019-02-28 17:35:23 289

原创 package.json和package-lock.json的区别

package.json:通过npm init命令创建,主要用来定义这个项目所需要的各种模块,以及项目的配置信息(比如名称、版本、许可证等元数据)。npm install命令根据这个配置文件,自动下载所需的模块,也就是配置项目所需的运行和开发环境。package-lock.json:在 npm install时候自动生成,用以记录当前状态下实际安装的各个npm packa...

2019-02-27 18:02:59 1157 2

原创 react组件生命周期详解

生命周期状态组件的生命周期可分成三个状态:Mounting:已插入真实Dom Updating:正在被重新渲染 Unmounting:已移除真实Dom生命周期方法React为每个状态都提供了两种处理函数,will在进入状态之前调用,did在函数进入状态之后调用,三种状态供给五种处理函数。componentWillMount 在渲染前调用,在客户端也在服务端。 compon...

2019-02-22 17:50:28 261

原创 JavaScript 作用域链、闭包、原型和原型链

作用域链及和标识符解析每一个JavaScript函数都表示为一个对象, 要确切的说, 是Function对象的一个实例. Function对象同其他对象一样, 拥有可以编程访问的属性, 和一系列不能通过代码访问而仅供JavaScript引擎存取的内部属性. 其中有一个内部属性是[[Scope]].内部属性[[Scope]]包含了一个函数被创建的作用域中对象的集合。这个集合被称为函数的作用域...

2019-01-27 15:15:38 241

原创 脚本无阻塞加载策略

从上图可以看出,当浏览器遇到&lt;script&gt;标签时,浏览器会停止处理页面,先执行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 555

原创 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 236

原创 程序员面试常考知识点之 前端篇

知识点: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 1586

原创 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 122

原创 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 759

原创 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 116

原创 leetcode 122. 买卖股票的最佳时机 II

给定一个数组,它的第 i 个元素是一支给定股票第 i 天的价格。设计一个算法来计算你所能获取的最大利润。你可以尽可能地完成更多的交易(多次买卖一支股票)。注意:你不能同时参与多笔交易(你必须在再次购买前出售掉之前的股票)。示例 1:输入: [7,1,5,3,6,4]输出: 7解释: 在第 2 天(股票价格 = 1)的时候买入,在第 3 天(股票价格 = 5)的时候卖出, 这笔...

2018-08-29 23:01:45 164

原创 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 120

原创 leetcode 160. 相交链表

编写一个程序,找到两个单链表相交的起始节点。例如,下面的两个链表:A: a1 → a2 ↘ c1 → c2 → c3 ↗ B: b1 → b2 → b3在节点 c1 开始相交。注意:如果两个链表没有交点,返回 null. 在返回结果...

2018-08-23 16:24:05 104

原创 leetcode 142. 环形链表 II

给定一个链表,返回链表开始入环的第一个节点。 如果链表无环,则返回 null。说明:不允许修改给定的链表。进阶: 你是否可以不用额外空间解决此题?优化后解法://使用快慢指针来进行求解//画图可得(非环的线性部分为L,入环节点到第一次相遇的节点为a,环剩余部分为b)://第一次相遇:2(L+a)=(L+a)+b+a,得:L=b//所以第一次相遇时,让慢指针回到head节...

2018-08-22 20:22:36 549

原创 leetcode 141. 环形链表

给定一个链表,判断链表中是否有环。进阶: 你能否不使用额外空间解决此题?优化后解法://主要通过判断是否遇到链表尾,是的话提前结束循环;//优化时间:16ms-&gt;8msclass Solution {public: bool hasCycle(ListNode *head) { if(head==NULL||head-&gt;next==NUL...

2018-08-22 19:17:55 99

原创 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 1418

原创 C++引用和指针的区别

C++引用引用相当于变量的别名。一旦把引用初始化为某个变量,就可以使用该引用名称或变量名称来指向变量。C++引用和指针的区别引用很容易与指针混淆,它们之间有三个主要的不同:- 不存在空引用。引用必须连接到一块合法的内存;- 一旦引用被初始化为一个对象,就不能被指向到另一个对象,指针可以在任何时候指向到另一个对象;- 引用必须在创建时被初始化。指针可以在任何时间被初始化。...

2018-08-22 14:08:31 165

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除