Cheney's Blog

一、Javascript 异步的由来

Javascript 单线程

大家都知道 js 是单线程的，那为什么要是单线程的呢？

因为 js 的运用场景是浏览器，包含了很多用户的交互，如果是多线程，那一个线程要在某个 DOM 上添加内容，另一个线程直接要删除这个 DOM，那浏览器到底听哪个的好呢？所以为了降低复杂性，js 从一诞生，就是单线程，这也是这门语言的核心特征，因为 js 一开始就是为浏览器而生的

既然是单线程，也就是每次只执行一个任务，只有等到当前任务执行完毕，才能执行后面的任务，这些任务会形成一个任务队列，排队等候执行

就像大家去超市买东西排队结账，得前面一个人付完钱，排在他后面的那个才能买单。但是如果前面一个任务很耗时，比如正常每个人手里都是拿着一两样东西等着排队，而你前面那位大哥推着满满一车的东西，你是不是得崩溃了？

所以像我们平时遇到的浏览器无响应和页面假死，往往是因为某段 js 代码执行时间过长，或者直接陷入死循环，导致页面卡死，后面的任务当然就无法继续执行了

但是，在前端的某些任务的确是非常耗时的，比如网络请求、定时器和事件监听等等，如果让他们和别的任务一样都老老实实的排队等待执行的话，执行效率会非常低。所以，这时候浏览器为这些耗时的任务开辟了另外的线程，主要包括事件触发线程、定时器触发线程和异步 HTTP 请求线程

浏览器多线程

浏览器渲染进程是多线程的，它包含如下线程：

• GUI 渲染线程
• JS 引擎线程
• 事件触发线程
• 定时器触发线程
• 异步 HTTP 请求线程

1、GUI 渲染线程

负责渲染浏览器界面，解析 HTML、CSS
当界面需要重绘（Repaint）或由于某种操作引发回流（Reflow）时，该线程就会执行
GUI 渲染线程与 JS 引擎线程是互斥的，因为 JS 可以操作 DOM 元素， 从而影响到 GUI 的渲染结果，当 JS 引擎执行时 GUI 线程会被挂起，GUI 更新会被保存在一个队列中等到 JS 引擎空闲时立即被执行

2、JS 引擎线程

JS 内核（例如V8引擎），负责处理 Javascript 脚本程序
JS 引擎一直等待着任务队列中任务的到来，然后加以处理
因为 GUI 渲染线程与JS引擎线程是互斥的，所以如果 JS 执行时间过长，页面渲染就不连贯，造成页面渲染加载阻塞

3、事件触发线程

由于 JS 引擎这个单线程的家伙自己都忙不过来，所以需要浏览器另开一个线程协助它
待处理队列中的事件都得排队等待 JS 引擎处理（当 JS 引擎空闲时才会去执行）

4、定时触发器线程

setInterval 与 setTimeout所在线程
JS 引擎阻塞状态下计时不准确，所以由浏览器另开线程单独计时
计时完毕后，添加到事件队列中，等待 JS 引擎空闲后执行

5、异步 HTTP 请求线程

如果请求有回调事件，异步线程就产生状态变更事件，将这个回调再放入事件队列中，等 JS 引擎空闲后执行

要优化性能，那首先需要对 react 渲染机制有一些深入的了解

背景知识

1.JS 变量类型

• 基本类型：6 种基本数据类型， Undefined 、 Null 、 Boolean 、 Number 、 String 、 Symbol
• 引用类型：统称为 Object 类型，细分为：Object 类型、 Array 类型、 Date 类型、 RegExp 类型、 Function 类型等

举个栗子：

1
2
3
4
5
6
7

let p1 = { name: '张三' };

let p2 = p1;

p2.name = '李四';

console.log(p1.name); // 李四

在引用类型里，声明一个 p1 的对象，把 p1 赋值给 p2 ，此时赋的其实是该对象的在堆中的地址，而不是堆中的数据，也就是两个变量指向的是同一个存储空间，后面 p2.name 改变后，也就影响到了 p1。虽然这样做可以节约内存，但当应用复杂后，就需要很小心的操作数据了，因为一不注意修改一个变量的值可能就影响到了另外一个变量

如果我们想要让他们不互相影响，就需要拷贝出一份一模一样的数据，拷贝又分浅拷贝与深拷贝，浅拷贝只会拷贝第一层的数据，深拷贝则会递归所有层级都拷贝一份，比较消耗性能

2.React 中的 Render

react 的组件渲染分为初始化渲染和更新渲染。
在初始化渲染的时候会调用根组件下的所有组件的render方法进行渲染，如下图（绿色表示已渲染，这一层是没有问题的）：

概要：

1. React Native 发展历程
2. 我们为什么用 React Native
3. React Native 组件分析
4. React Native 基础

一、React Native 发展历程

什么是 React ？

简单讲一下， React 起源于 Facebook 内部项目，Facebook 调研了市场所有 js 框架，发现一个能打的都木有，就决定自己撸一套，用来架设 Instagram 的网站。做出来以后，发现，诶，不错哟，就在2013年5月开源了

• React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源
• React 是一个用于构建用户界面的 JS 库
• React 主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）

以上是 github start 数量，光看这个数量，可能觉得和 vue 相差不大。当然，这只是一个维度

咱们再来看 npm 近两年的下载量，react 几乎是碾压对手

Native App(原生应用)

• 优点：功能强大，性能优越，能最大程度的压榨硬件
• 缺点：研发成本高，周期长，版本维护困难

React Native 起源

• 为了不受苹果掌控，Facebook 曾花费大量的人力物力进行移动 HTML5 技术研发。虽然有些成果，但始终离 Native App 有差距，而且这个差距可能永远赶不上

• 2012年9月，Facebook 方面承认『Betting on HTML5 was a mistake』。便放弃移动 HTML5，全力转型原生 App 开发

• 在转型原生 App 开发后，Facebook 内部其实还在研发一种新的移动技术，并开始使用这种技术开发内部 App。这个技术便是 React Native

• 2015年3月，Facebook 正式开源 React Native，虽然当时开发平台仅支持 Mac 系统，部署也仅支持 iOS 平台

• 2015年9月15日，Facebook 发布了 React Native for Android，把 Web 和原生平台的 JavaScript 开发技术扩展到了 Google 的流行移动平台 Android 上。至此，React Native 实现了跨平台的特性

之前买的 VPN 服务快到期了，正好手上有东京的 VPS，趁机利用起来，整个过程这里记录一下

配置 PPTP

安装 pptpd，安装之前可以先 apt-get update 一下

1

sudo apt-get install pptpd

装好了之后修改配置文件

1

sudo vim /etc/pptpd.conf

取消以下两行注释：

1
2

localip 192.168.0.1
remoteip 192.168.0.234-238,192.168.0.245

分别是通过 VPN 连接后主机和客户端所使用的 IP，可以自行修改。注意这个IP在下面还会用的到

设置 dns：

1

sudo vim /etc/ppp/pptpd-options

找到 ms-dns，取消掉注释，改成 8.8.8.8, 8.8.4.4

设置账号：

1

sudo vim /etc/ppp/chap-secrets

添加一行，依次为：用户名，服务，密码，限制 ip

1

username pptpd password *

重启服务，查看状态，是否监听了 1723 端口:

1
2
3

sudo service pptpd restart
sudo service pptpd status
netstat -antp|grep 1723

Web 应用程序，由前端和后端两个部分构成。以前在传统的网站中，前端只需配合后端开发模板、美化样式以及用 Ajax 和后端交互

随着现在的发展趋势，前端设备层出不穷，网络客户端变的愈来愈复杂，不仅有桌面 web 端，移动端 web 端，还有 iOS、Android 这位大佬，另外对应 iPad 的版本也跑不掉。因此必须有一套统一的机制，方便不同的前端设备与后端进行交互，RESTful API 应运而生！

REST 的全称是 Representational State Transfer，即表述性无状态传输。它是一种设计风格，而不是标准，一般是基于 HTTP，因为本身 HTTP 也是无状态的，无需 session。分工的时候，后端只需输出接口（通常是 json 格式），响应客户端请求，而前端则负责渲染视图，处理业务逻辑。前后端只通过 API 来交互，大大的降低了耦合性

Markdown 和 API blueprint

以前我们写文档一般都是用 Markdown（到现在看见用 word 写文档的真的是泪牛满面（ ＴДＴ）），这是一种用来写作的轻量级标记语言（真的比 HTML 简单多了）。Markdown 可以随心所欲的导出多种格式，比如 HTML 和 PDF 等，而且很多网站也都直接支持 Markdown

之所以用 Markdown 来写文档，原因有二：其一是如上面提到的，优雅轻便，非常灵活；其二便是方便管理，因为是纯文本的，可以用 Git 做版本控制和多人协作，团队每个人都可以参与进来，而且每个改动都被记录在历史，这对有时因为特殊原因要退回到某个 API 版本的时候特别管用

而 API blueprint，它其实就是基于 Markdown 的拓展，向下兼容 Markdown，有以下特点：

• 采用 Markdown 格式撰写，容易上手
• 只定义规则和结构，不负责渲染，渲染由插件负责
• 有非常多的插件，可以生成漂亮的 HTML 文档 或是 作为 Mock Server 运行

自打有个 VPS ，真是想怎么折腾怎么折腾。以前经常像别人推荐 git，那有人就会问，git 这么好，那你来搭一个？奈何那时只会用不会搭，现在有机会了，自己搭了一个，暂时没有用到 Gitosis ，过程既轻松又愉悦，在这里分享记录一下

安装

1
2

sudo apt-get update
sudo apt-get install git

创建用户

git 自带了 git-shell 工具，它可以限制 Git 库所属用户的活动范围，只要把它设为此用户登入的 shell，那么该用户就无法使用普通的 bash 或者 zsh 等 shell 程序

1
2
3

which git-shell
/usr/bin/git-shell
sudo useradd -m -s /usr/bin/git-shell git

这里我们创建了一个带用户主目录的 git 用户，shell 指定为 git-shell