顺带一提，以后会用 Function Component 代替 Stateless Component 的说法，原因是：自从 Hooks 出现，函数式组件功能在不断丰富，函数式组件不再需要强调其无状态特性，因此叫 Function Component 更为恰当。

1. 引言 Serverless 是一种 “无服务器架构”，让用户无需关心程序运行环境、资源及数量，只要将精力 Focus 到业务逻辑上的技术。 现在公司已经实现 DevOps 化，正在向 Serverless 迈进，而为什么前端要关注 Serverless？ 对业务前端同学： 会改变前后端接口定义规范。 一定会改变前后端联调方式，让前端参与服务器逻辑开...

1. 引言 syntax-parser 是一个 JS 版语法解析器生成器，具有分词、语法树解析的能力。 通过两个例子介绍它的功能。 第一个例子是创建一个词法解析器 myLexer： {代码...} 如上，通过正则分别匹配了 “空格”、“字母或数字”、“加号”，并将匹配到的空格忽略（不输出）。 分词匹配是从左到右的，优先匹配数组的第一项，依此类...

React 项目中，一般一个文件就是一个类，状态最细粒度就是文件的粒度。然而文件粒度并非状态管理最合适的粒度，所以有了 Redux 之类的全局状态库。

1. 引言 本周精读的文章是 regexp-features-regular-expressions。 这篇文章介绍了 ES2018 正则支持的几个重要特性： Lookbehind assertions - 后行断言 Named capture groups - 命名捕获组 s (dotAll) Flag - . 匹配任意字符 Unicode property escapes - Unicode 属性转义 2. 概述 还在用下标匹配内容吗？匹配任意字符...

1 引言 上周参加的 极客公园 2019 充满了科技前沿的思考，而且给 “互联网寒冬” 带来了未来的期望中，可以看到前端将发挥越来越重要的作用。 这篇文章将以前端的视角解读这次极客公园。 本次极客公园的主题是 WHY NOT： 一些人看到世界现在的样子，会选择「就这样吧」而另一些人看到世界可能的样子，会思考「为什么不能更...

1 引言 说到前端编译方案，也就是如何打包项目，如何编译组件，可选方案有很多，比如： 通过 webpack / parcel / gulp 构建项目。 通过 parcel / gulp / babel 构建组件。 如果你喜欢零配置的 parcel，那么项目和组件都可以拿它来编译。 如果你业务比较复杂，需要使用 webpack 做深度定制，那么常见组合是：项目 - webpa...

caches 这个 API 是针对 Request Response 的。caches 一般结合 Service Worker 使用，因为请求级别的缓存与具有页面拦截功能的 Service Worker 最配。

但是 setState 函数是 react 包导出的，他们又是如何与 react-dom react-native react-art 这些包结合的呢？

“一带一路” 正在积极推动中国的国际化进程，前端网站也面临着前所未有的国际化挑战。那么怎么才能积极响应 “一带一路” 战略，推动网站的国际化工作呢？可以先从国际化布局开始考虑。

经过连续几期的介绍，《手写 SQL 编译器》系列进入了 “智能提示” 模块，前几期从 词法到文法、语法，再到构造语法树，错误提示等等，都是为 “智能提示” 做准备。

1 引言 Typescript 3.2 发布了几个新特性，主要变化是类型检查更严格，对 ES6、ES7 一些时髦功能拓展了类型支持。 2 概要 下面挑一些相对重要配置介绍。 strictBindCallApply 对 bind call apply 更严格的类型检测。 比如如下可以检测出 apply 函数参数数量和类型的错误： {代码...} 特别对一些 react 老代码，函数需要...

于 2017.09.26 Facebook 发布 React v16.0 版本，时至今日已更新到 React v16.6，且引入了大量的令人振奋的新特性，本文章将带领大家根据 React 更新的时间脉络了解 React16 的新特性。

1 引言 htm 是 preact 作者的新尝试，利用原生 HTML 规范支持了类 JSX 的写法。 2 概要 htm 没有特别的文档，假如你用过 JSX，那只需要记住下面三个不同点： className -> class。 标签引号可选（回归 html 规范）：<div class=foo>。 支持 HTML 模式的注释：<div><!-- don't delete this! --><...

虽然现在 Css Module 与 Css-in-js 更流行，但使用它们会导致过分依赖 滥用 class 做唯一定位，违背了 Css 选择器的初衷。

上周的 精读《React Hooks》 已经实现了对 React Hooks 的基本认知，也许你也看了 React Hooks 基本实现剖析（就是数组），但理解实现原理就可以用好了吗？学的是知识，而用的是技能，看别人的用法就像刷抖音一样（哇，饭还可以这样吃？），你总会有新的收获。

1 引言 React Hooks 是 React 16.7.0-alpha 版本推出的新特性，想尝试的同学安装此版本即可。 React Hooks 要解决的问题是状态共享，是继 render-props 和 higher-order components 之后的第三种状态共享方案，不会产生 JSX 嵌套地狱问题。 状态共享可能描述的不恰当，称为状态逻辑复用会更恰当，因为只共享数据处理逻辑...

1 引言 重回 “手写 SQL 编辑器” 系列。这次介绍如何利用缓存优化编译器执行性能。 可以利用 Frist 集 与 Match 节点缓存 这两种方式优化。 本文会用到一些图做解释，下面介绍图形规则： First 集优化，是指在初始化时，将整体文法的 First 集找到，因此在节点匹配时，如果 Token 不存在于 First 集中，可以快速跳过这个...

最后一个值 0 是起始值，每次 reduce 返回的值都会作为下次 reduce 回调函数的第一个参数，直到队列循环完毕，因此可以进行累加计算。

1 引言 本周精读的文章是 speedy-introduction-to-web-workers，是一篇 Web Workers 快速入门的文章，借精读这篇文章的机会，谈谈对 Web Workers 的理解与运用。 2 概述 就像分工，你只负责编码，而你的朋友负责设计，那你就可以专心把自己的事情做好，而且更快速的完成任务。 本文通过一个比方，描述了 Web Workers 的...

前端发展了 20 多年，随着发展中国家越来越多的互联网从业者涌入，现在前端知识玲琅满足，概念、库也越来越多。虽然内容越来越多，但作为个体的你的时间并没有增多，如何持续学习新知识，学什么将会是个大问题。

1 引言 作者给出了从 12 个角度全面分析 JS 库的可用性，分别是： 特性。 稳定性。 性能。 包生态。 社区。 学习曲线。 文档。 工具。 发展历史。 团队。 兼容性。 趋势。 下面总结一下作者的观点。 2 概述 & 精读 特性 当你调研一个 JS 库，功能当然是最重要的，就好比 React 的用于开发 UI 界面非常方便，这是流行...

可能有人会问，利用编程语言生成 SQL 有什么意义？既没有语法树规范，也不如直接写 SQL 通用。对，有利就有弊，这些库不遵循语法树，但利用简化的对象模型快速生成 SQL，使得代码抽象程度得到了提高。而代码抽象程度得到提高，第一个好处就是易读，第二个好处就是易操作。

每当项目进入联调阶段，或者提前约定接口时，前后端就会聚在一起热火朝天的讨论起来。可能 99% 的场景都在约定 Http 接口，讨论 URL 是什么，入参是什么，出参是什么。

比如当用户输入 select (name，这是个未完成的 SQL 语句，我们的目标是提示出这个语句未完成，并给出后续的建议： ) - + % / * . ( 。

1 引言 重回 “手写 SQL 编辑器” 系列。之前几期介绍了 词法、文法、语法的解析，以及回溯功能的实现，这次介绍如何生成语法树。 基于 《回溯》 一文介绍的思路，我们利用 JS 实现一个微型 SQL 解析器，并介绍如何生成语法树，如何在 JS SQL 引擎实现语法树生成功能！ 解析目标是： {代码...} 文法： {代码...} 这是本文...

对时序数据的处理有两种方式，如图所示，右边是 SQL，左边是自定义查询语言，也称为 NoSQL，处于中间地带的称为 SQL-LIKE 语言。

我们把语法分析树当作一个迷宫，有直线有岔路，而想要走出迷宫，在遇到岔路时需要提前进行存档，在后面走错时读档换下一个岔路进行尝试，这个功能就叫回溯。

自顶而下一般采用递归下降方式处理，称为 LL(k)，第一个 L 是指从左到右分析，第二个 L 指从左开始推导，k 是指超前查看的数量，如果实现了回溯功能，k 就是无限大的，所以带有回溯功能的 LL(k) 几乎是最强大的。LL 系列一般分为 LL(0)、LL(1)、LL(k)、LL(∞)。

我们将一块语法规则称为 产生式，使用 “Left → Right” 表示任意产生式，用 “Left => Right” 表示产生式的推导过程，比如对于产生式：