Node.js代码举例
title: 01-数据库的基础知识publish: false
在 Node.js 上建一个 http 服务器（1）新建一个文件 server01.js，然后在里面输入如下代码：
const http = require('http'); //引入 node.js里面的一个http包。因为引入之后，我们不会去修改它，所以用常量来表示// 创建一台服务器var server = http.createServer(function (){ //当有人来访问这台服务器时，就会执行 function 回调函数 console.log('有人来访问我了');});server.listen(8080); //要让服务器设置为监听状态，端口设置为8080
注意看注释。
我们把上面这个 js 文件跑起来，然后在浏览器端输入http://localhost:8080/，每请求一次，服务器的控制台就会打印 有人来访问我了。
（2）write()函数和 end()函数：
将上面的代码修改如下：
server02.js： ...
WebSocket
title: 01-数据库的基础知识publish: false
WebSocket 的引入背景分析HTTP协议是无状态的，服务器只会响应来自客户端的请求，但是它与客户端之间不具备持续连接。
当用户在浏览器上进行操作时，可以请求服务器上的api；但是反过来却不可能：服务器端发生了一个事件，无法将这个事件的信息实时主动地通知客户端。只有在客户端查询服务器当前状态时，所发生事件的信息才会从服务器传递到客户端。
那怎么去实时地知道服务器的状态呢？方法有两个：
（1）轮询：客户端每隔很短的时间，都会对服务器发出请求，查看是否有新的消息，只要轮询速度足够快，例如1秒，就能给人造成交互是实时进行的印象。这种做法是无奈之举，实际上对服务器、客户端双方都造成了大量的性能浪费。
（2）长连接：客户端只请求一次，但是服务器会将连接保持，不会返回结果。当服务器有了新数据时，实时地发给客户端，而一直保持挂起状态。这种做法的也造成了大量的性能浪费。
WebSocket 协议最新的 HTML5协议，制定了 WebSocket 协议标准，允许客户端和服务器端以全双工的方式进行通信。
WebSocket 的原理非 ...
事件驱动和非阻塞机制
异步编程异步操作
Node 采用 Chrome V8 引擎处理 JavaScript 脚本。V8 最大特点就是单线程运行，一次只能运行一个任务。
Node 大量采用异步操作（asynchronous operation），即任务不是马上执行，而是插在任务队列的尾部，等到前面的任务运行完后再执行。
提高代码的响应能力。
异步IO也叫非阻塞IO。例如读文件，传统的语言，基本都是读取完毕才能进行下一步操作。非阻塞就是Node的callback，不会影响下一步操作，等到文件读取完毕，回调函数自动被执行，而不是在等待。
异步操作回调由于系统永远不知道用户什么时候会输入内容，所以代码不能永远停在一个地方。
Node 中的操作方式就是以异步回调的方式解决无状态的问题。
回调函数的设计：错误优先异步操作中，无法通过 try catch 捕获异常。
这是因为回调函数主要用于异步操作，当回调函数运行时，前期的操作早结束了，错误的执行栈早就不存在了，传统的错误捕捉机制try…catch对于异步操作行不通，所以只能把错误交给回调函数处理。
统一约定：
回调函数的第一个参数默认接收错误信息，第二个参数才 ...
01-React介绍
title: 01-React介绍publish: true
虚拟DOM和diff算法
在学习 React 之前，我们需要先了解两个概念：虚拟DOM、diff算法。
虚拟DOM问题描述：
假设我们的数据发生一点点的变化，也会被强制重建整颗DOM树，这么做，会涉及到很多元素的重绘和重排，导致性能浪费严重。
解决上述问题的思路：
实现按需更新页面上的元素即可。也就是说，把 需要修改的元素，所对应的 DOM 元素重新构建；其他没有变化的数据，所对应的 DOM 节点不需要被强制更新。
具体实现方案：（如何按需更新页面上的元素）
只需要拿到 页面更新前的 内存中的DOM树，同时再拿到 页面更新前的 新渲染出来的 内存DOM树；然后，对比这两颗新旧DOM树，找到那些需要被重新创建和修改的元素即可。这样就能实现 DOM 的按需更新。
如何拿到这两棵DOM树：（即：如何从浏览器的内存住哪个获取到 浏览器私有的那两颗DOM树？）
如果要拿到浏览器私有的DOM树，那我们必须调用浏览器提供的相关JS的API才行。但是问题来了，浏览器并没有提供这样的API。既然如此，那我们可以自己模拟这两颗 新旧DOM ...
02-JSX语法介绍
title: 02-JSX语法介绍publish: true
JSX介绍JSX的引入如果直接让用户通过 JS 代码手动创建DOM元素，肯定是非常麻烦的。
于是，React 官方就提出了一套 JSX 语法规范，能够让我们在 JS 文件中，书写类似于 HTML 那样的代码，快速定义虚拟DOM结构。
JSX的全称JSX：JavaScript XML，一种类似于XML的JS扩展语法。也可以理解成：符合 XML 规范的 JS 语法。
需要注意的是，哪怕你在 JS 中写的是 JSX 语法（即JSX这样的标签），但是，JSX内部在运行的时候，并不是直接把 我们的 HTML 标签渲染到页面上；而是先把 类似于HTML 这样的标签代码，转换成 React.createElement 这样的JS代码，再渲染到页面中。
从这一点我们可以看出，JSX是一个对程序员友好的语法糖。
JSX语法的本质：以 React.createElement 的形式来实现的，并没有直接把 用户写的 HTML代码，渲染到页面上。
babel转换工具如果要直接使用 JSX 语法，需要先安装相关的 语法转换工具：
运行 cnpm ...
03-React组件（一）：生命周期
title: 03-React组件（一）：生命周期publish: true
组件的生命周期在组件创建、到加载到页面上运行、以及组件被销毁的过程中，总是伴随着各种各样的事件，这些在组件特定时期，触发的事件统称为组件的生命周期。
生命周期的阶段组件生命周期分为三个阶段，下面分别来讲解。
1、组件创建阶段
组件创建阶段的生命周期函数，有一个显著的特点：创建阶段的生命周期函数，在组件的一辈子中，只执行一次。
getDefaultProps
初始化 props 属性默认值。
getInitialState
初始化组件的私有数据。因为 state 是定义在组件的 constructor 构造器当中的，只要new 了 class类，必然会调用 constructor构造器。
componentWillMount()
组件将要被挂载。此时还没有开始渲染虚拟DOM。
在这个阶段，不能去操作DOM元素，但可以操作属性、状态、function。相当于 Vue 中的Create()函数。
render()
第一次开始渲染真正的虚拟DOM。当render执行完，内存中就有了完整的虚拟DO ...
04-React组件（二）：常见属性和函数
title: 04-React组件（二）：常见属性和函数publish: true
defaultProps 和 prop-types使用 defaultProps 设置组件的默认值React 中，使用静态的 defaultProps 属性，来设置组件的默认属性值。
格式举例：
// 在 React 中，使用静态的 defaultProps 属性，来设置组件的默认属性值static defaultProps = { initcount: 0 // 如果外界没有传递 initcount，那么，自己初始化一个数值（比如0）};
使用prop-types进行props数据类型的校验在组件中，可以通过 prop-types 把外界传递过来的属性，做类型校验。如果类型不匹配，控制台会弹出告警。
注意：如果要为 传递过来的属性做类型校验，必须安装 React 提供的 第三方包，叫做 prop-types。
格式举例：
static propTypes = { initcount: ReactTypes.number // 使用 prop-types 包，来 ...
05-React中绑定this并给函数传参的几种方式
title: 05-React中绑定this并给函数传参的几种方式publish: true
前言我们先来看下面这段代码：
components/MyComponent.jsx
import React from "react";export default class MyComponent extends React.Component { constructor(props) { super(props); this.state = { msg: "这是 MyComponent 组件 默认的msg" }; } render() { return ( <div> <h1>绑定This并传参</h1> <input type="button" value="绑定this并传参" onClick={this.chan ...
06-React的单向数据绑定
title: 06-React的单向数据绑定publish: true
单项数据绑定在 Vue 中，可以通过 v-model 指令来实现双向数据绑定。但是，在 React 中并没有指令的概念，而且 React 默认不支持 双向数据绑定。
React 只支持，把数据从 state 上传输到 页面，但是，无法自动实现数据从 页面 传输到 state 中 进行保存。
React中，只支持单项数据绑定，不支持双向数据绑定。不信的话，我们来看下面这个例子：
import React from "react";export default class MyComponent extends React.Component { constructor(props) { super(props); this.state = { msg: "这是 MyComponent 组件 默认的msg" }; } render() { return ( <d ...
07-React路由的使用
title: 07-React路由的使用publish: true
React路由的使用使用React路由之前，我们需要先安装 react-router-dom这个包。比如：
yarn add react-router-dom
代码举例：
（1）index.html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title></head><body> <!-- 容器，通过 R ...
08-Ant Design的基本使用
title: 08-Ant Design的基本使用publish: true
andt 的介绍Ant Design 是基于 React 实现，开发和服务于企业级后台产品。
支持环境
现代浏览器和 IE9 及以上（需要 polyfills）。
支持服务端渲染。
Electron
Electron（原名为Atom Shell）是GitHub开发的一个开源框架。 它允许使用Node.js（作为后端）和Chromium（作为前端）完成桌面GUI应用程序的开发。
很多客户端软件都是基于 Electron 开发的。比如 VS Code。我们打开 VS Code 菜单栏的 “帮助 –> 切换开发人员工具”，就会看到类似于 chrome的调试工具。
相关链接
官方文档：https://ant.design/docs/react/introduce-cn
andt 的使用环境安装npm install antd --save
代码示例我们需要什么组件，就导入该组件即可。
（1）index.html:
<!DOCTYPE html><html lang=" ...
09-AntD框架的upload组件上传图片时遇到的一些坑
title: 09-AntD框架的upload组件上传图片时遇到的一些坑publish: true
前言本次做后台管理系统，采用的是 AntD 框架。涉及到图片的上传，用的是AntD的 upload 组件。
前端做文件上传这个功能，是很有技术难度的。既然框架给我们提供好了，那就直接用呗。结果用的时候，发现 upload 组件的很多bug。下面来列举几个。
备注：本文写于2019-03-02，使用的 antd 版本是 3.13.6。
使用 AntD 的 upload 组件做图片的上传因为需要上传多张图片，所以采用的是照片墙的形式。上传成功后的界面如下：
（1）上传中：
（2）上传成功：
（3）图片预览：
按照官方提供的实例，特此整理出项目开发中的完整写法，亲测有效。代码如下：
/* eslint-disable */import { Upload, Icon, Modal, Form } from 'antd';const FormItem = Form.Item;class PicturesWall extends PureCompon ...
10-AntD框架的upload组件上传图片时使用customRequest方法自定义上传行为
title: 10-AntD框架的upload组件上传图片时使用customRequest方法自定义上传行为publish: true
本次做后台管理系统，采用的是 AntD 框架。涉及到图片的上传，用的是AntD的 upload 组件。
我在上一篇文章《前端AntD框架的upload组件上传图片时遇到的一些坑》中讲到：AntD 的 upload 组件有很多坑，引起了很多人的关注。折腾过的人，自然明白其中的苦楚。
今天这篇文章，我们继续来研究 AntD 的 upload 组件的另一个坑。
备注：本文写于2020-06-11，使用的 antd 版本是 3.13.6。
使用 AntD 的 upload 组件做图片的上传，效果演示因为需要上传多张图片，所以采用的是照片墙的形式。上传成功后的界面如下：
（1）上传中：
（2）上传成功：
（3）图片预览：
代码实现首先，你需要让后台同学提供好图片上传的接口。上一篇文章中，我们是把接口调用直接写在了 <Upload> 标签的 action 属性当中。但如果你在调接口的时候，动作很复杂（比如根据业务要求，需要连续调两个接口才能上 ...
11-React Navive初识
title: 11-React Navive初识publish: true
搭建开发环境官方文档：https://reactnative.cn/docs/getting-started.html
安装Node、homebrew、Watchman安装 homebrew：
安装 watchman：
brew install watchman
Watchman则是由 Facebook 提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能（packager 可以快速捕捉文件的变化从而实现实时刷新）。
安装 React Native 的命令行工具（react-native-cli）安装 react-native-cli：
npm install -g react-native-cli
React Native 的命令行工具用于执行创建、初始化、更新项目、运行打包服务（packager）等任务。
创建新项目react-native init MyApp --version 0.44.3
编译并运行 React Native 应用在 ios 模拟器上运行：
react-na ...
00-前端性能优化认知
title: 00-前端性能优化认知publish: true
前端性能优化认知什么是前端性能优化通常来讲，前端性能优化是指：从用户开始访问网站到整个页面完整地展现出来的过程中，通过各种优化策略和优化方法，让页面加载得更快，让用户的操作相应更及时，给用户更好的使用体验。
优化是在做什么：
如上图所示，优化工作是围绕前端的基本工作原理展开的，包括：客户端和服务器端建立连接、加载资源、解析资源并渲染。
上方图片的来源：
The Cost Of JavaScript
[译]JavaScript 的时间消耗
性能优化的重要性（程序员角度）当领导问：“为什么网页访问这么慢？”我们不能只是回答“网络不好”这么简单，网络不可能一直都不好。
每个程序员如果想要成长，就不能回避“性能优化”这个话题。很多人写了多年的代码，一直在构建样式、写业务逻辑。但是平凡的程序员之路，何时才是尽头？前端职业发展的瓶颈在哪儿？怎么才能从团队中脱颖而出？如何区分出平凡程序员/大牛程序员/架构师的分水岭？
职场晋升时，我们也要想一想：大部分人都在写业务代码，和别人相比，我的核心竞争力在哪里？除了技术深度、前端工程化 ...
