React 的性能优化之当 PureComponent 遇上 ImmutableJS

一、痛点

在我们的印象中，React 好像就意味着组件化、高性能，我们永远只需要关心数据整体，两次数据之间的 UI 如何变化，则完全交给 React Virtual Dom 的 Diff 算法 去做。以至于我们很随意的去操纵数据，基本优化 shouldComponentUpdate 也懒得去写，毕竟不写也能正确渲染。但随着应用体积越来越大，会发现页面好像有点变慢了，特别是组件嵌套比较多，数据结构比较复杂的情况下，随便改变一个表单项，或者对列表做一个筛选都要耗时 100ms 以上，这个时候我们就需要优化了！当然如果没有遇到性能瓶颈，完全不用担心，过早优化是邪恶的。这里我们总结一个很简单的方案来让 React 应用性能发挥到极致。在下面一部分，我们先回顾一下一些背景知识，包括：JavaScript 变量类型和 React 渲染机制，如果你是老鸟可以直接跳过。

手撕常用代码

夯实基础，日常练习，点滴积累，进阶提升。（长期维护更新）

1. 浅拷贝：

1
2
3
4
5
6
7

function clone(o) {
 	var _o = {};
 	for (let k in o) {
 		_o[k] = o[k];
 	}
 	return _o;
 }

2. 深拷贝：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

function deepClone(o) {
 	if (typeof o === 'string' || typeof o === 'number' || typeof o === 'boolean' || typeof o === 'undefined') {
 		return o;
 	} else if (Array.isArray(o)) {
 		var arr = [];
 		for(let i = 0; i < o.length; i++) {
 			arr.push(deepClone(o[i]))
 		}
 		return arr;
 	} else if (typeof o === 'object') {
 		var obj = {};
 		for(let k in o) {
 			obj[k] = deepClone(o[k]);
 		}
 		return obj;
 	}
 }

前端进阶笔记

夯实基础，日常笔记，点滴积累，进阶提升。（长期维护更新）

一、JS 事件机制 Event Loop

1. 几个概念

谈到事件机制首先弄清楚主线程，执行栈， 任务队列这几个概念。

主线程：运行 JS 代码。JS 的单线程针对的是单一的主线程，不是只能有一个线程。

执行栈：关于执行栈的概念结合执行上下文来看

任务队列 Task Queue：即队列，是一种先进先出的数据结构

三者的关系是：主线程要执行的都在执行栈里，执行栈里的内容是从任务队列里拿过来的。

2. 关于任务

任务可以划分为宏任务和微任务。

宏任务（MacroTask）：整个 script、 setTimeout、 setInterval、 setImmidiate(浏览器暂时不支持，只有 IE10，但是在 nodejs 中常用到)、I/O、UI Redering。

微任务（MicroTask）：Promise、Async/Await(底层就是 Promise)、Process.nextTick (node 独有)、MutationObserver。

React 前端路由实现及 react-router v4 源码分析

前言

react-router 目前作为 react 最流行的路由管理库，已经成为了某种意义上的官方路由库（不过下一代的路由库 reach-router 已经蓄势待发了），并且更新到了 v4 版本，完成了一切皆组件的升级。本文将对 react-router v4（以下简称 rr4） 的源码进行分析，来理解 rr4 是如何帮助我们管理路由状态的。

路由

在分析源码之前，先来对路由有一个认识。在 SPA 盛行之前，还不存在前端层面的路由概念，每个 URL 对应一个页面，所有的跳转或者链接都通过 <a> 标签来完成，随着 SPA 的逐渐兴盛及 HTML5 的普及，hash 路由及基于 history 的路由库越来越多。

路由库最大的作用就是同步 URL 与其对应的回调函数。对于基于 history 的路由，它通过 history.pushState 来修改 URL，通过 window.addEventListener('popstate', callback) 来监听前进/后退事件；对于 hash 路由，通过操作 window.location 的字符串来更改 hash，通过 window.addEventListener('hashchange', callback) 来监听 URL 的变化。

浅析 React v16.3 新生命周期函数

生命周期的变化

vue 项目里使用 vue-area-linkage 插件遇到的坑

最近写的项目有一个需求是要写省市区联动选择，上网搜罗了一遍之后发现了vue-area-linkage这个插件挺热门的，于是打算开始用这个插件，结果在使用的时候遇到一些坑，于是写下本文来分享下自己的爬坑记。

使用方法作者介绍的很详细了，我就不赘述了vue-area-linkage 的使用方法。

插件使用之后的样子:

vue 项目实战中的小技巧

1. 在注册，提交订单，新增按钮请求接口，为了防止用户的重复提交我们前端可以进行简单处理(函数节流或者标志位开关)

//函数节流，当一个函数被反复调用的时候，他只会执行一次，函数柯里化，调用一个函数，返回另一个函数

1
2
3
4
5
6
7
8
9
10
11

export function debounce(func,delay) {
  let timer
  return function (...args) {
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(()=>{
      func.apply(this,args)
    },delay)
  }
}

Vue.js 中侦听器（watch）的高级用法

假设有如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<div>
    <p>FullName: {{fullName}}</p>
    <p>FirstName: <input type="text" v-model="firstName"></p>
</div>

new Vue({
    el: '#root',
    data: {
        firstName: 'Dawei',
        lastName: 'Lou',
        fullName: '',
    },
    watch: {
        firstName(newName, oldName) {
            this.fullName = newName + ' ' + this.lastName;
        }
    }
})

上面的代码的效果是，当我们输入 firstName 后，wacth 监听每次修改变化的新值，然后计算输出 fullName。

Vue 入门基础笔记

Vue 实例上的属性

Xcode 无证书打包

写这篇博客的原因是：公司申请了很长时间的苹果企业账号，却久久没有回应，同时又没有苹果个人账号以及公司账号，但 app 又急着给用户用；无奈之下只好找第三方服务进行企业重签。在没有证书的情况下，我只好打一个自签名的安装包给第三方了；打包的过程遇到一些小坑，因此记录下这次经历，方便于有需要的人！