前言​

在 HTTP 发布正式版之前，HTTP 的版本号被定位在 0.9 以区分后来的版本。HTTP/0.9 极其简单：请求由单行指令构成，以唯一可用方法 GET 开头，其后跟目标资源的路径。

GET /mypage.html

请求的响应不包含 HTTP 头，且只支持传输 HTML 类型的文档，无法传输其他类型的文件；也没有状态码或错误代码：一旦出现问题，一个特殊的包含问题描述信息的 HTML 文件将被发回，供人们查看。

有时我们并不想立即执行一个函数，而是等待特定一段时间之后再执行，目前有两种方式可以实现：

• setTimeout 将函数的执行推迟到一段时间之后再执行。
• setInterval 让函数间隔一定时间周期性执行。

这两个方法并不存在于 JavaScript 的规范中。但是大多数运行环境都有内置的定时器，而且也提供了这两个方法的实现。目前来讲，所有浏览器，包括 Node.js 都支持这两个方法。

事件系统概述​

基础概念​

JavaScript 和 HTML 之间的交互是通过事件来实现的。事件，就是文档或浏览器窗口之间发生的一些交互瞬间。可以使用侦听器（或处理程序）来监听事件，以便事情发生时执行相应的代码。

一个完整的事件系统，通常存在以下三个角色：

• 事件对象，用于储存事件的状态。
• 事件源对象，当前事件在操作的对象，如元素节点，文档对象，window 对象，XMLHttpRequest 对象等。
• 事件监听函数，当一个事件源生成一个事件对象时，它会调用相应的回调函数进行操作。

通俗点讲，事件源对象相当于”当事人“，事件监听函数相当于”监护人“，事件对象相当于”事故详情“。一个事件可以理解为，当事人出了点事，至于什么事情（被打了，还是被抢了）都记录在事故详情里，监护人根据事故详情得做出点反应（回调函数）。

查找节点​

前面四个方法除了定义在 document 对象上，还定义在 Element 上，即在元素节点上也可以调用。

querySelector()​

document.querySelector 方法接受一个 CSS 选择器作为参数，返回匹配该选择器的元素节点。如果有多个节点满足匹配条件，则返回第一个匹配的节点。如果没有发现匹配的节点，则返回null。

let el1 = document.querySelector('.myclass');
let el2 = document.querySelector('#myParent > [ng-click]');

Since HTML5 it’s been valid to start an HTML element ID with a number. For example <div id="10">. From an HTML perspective, that’s fine.

概览​

• Flexbox 布局语法速查手册
• Learn Flexbox with 30 Code Tidbits

• 在线编写和检验正则的网站：https://regex101.com 支持多语言切换
• freeCodeCamp: Introduction to the Regular Expression Challenges
  • 在线练习
  • 在线视频

React.memo​

const MyComponent = React.memo(function MyComponent(props) {
  /* render using props */
});

React.memo is a higher order component. It's similar to React.PureComponent but for function components instead of classes.

If your function component renders the same result given the same props, you can wrap it in a call to React.memo for a performance boost in some cases by memoizing the result. This means that React will skip rendering the component, and reuse the last rendered result.

By default it will only shallowly compare complex objects in the props object. If you want control over the comparison, you can also provide a custom comparison function as the second argument.

DOM 是 JavaScript 操作网页的接口，全称为“文档对象模型”（Document Object Model）。它的作用是将网页转为一个 JavaScript 对象，从而可以用脚本进行各种操作（比如增删内容）。

浏览器会根据 DOM 模型，将结构化文档（比如 HTML 和 XML）解析成一系列的节点，再由这些节点组成一个树状结构（DOM Tree）。所有的节点和最终的树状结构，都有规范的对外接口。

DOM 只是一个接口规范，可以用各种语言实现。所以严格地说，DOM 不是 JavaScript 语法的一部分，但是 DOM 操作是 JavaScript 最常见的任务，离开了 DOM，JavaScript 就无法控制网页。另一方面，JavaScript 也是最常用于 DOM 操作的语言。后面介绍的就是 JavaScript 对 DOM 标准的实现和用法。

什么是 Portal?​

Portal 中文即“传送门”的意思，来看一张电影剧照，不用多说，你应该能猜出来是什么意思：

图：《奇异博士》中的传送门

官方定义：Portals 提供了一种很好的将子节点渲染到父组件以外的 DOM 节点的方式。

ReactDOM.createPortal(child, container);