Wei
## path vs. publicPath vs. contentBase ### output.path 一个绝对路径，代表打包在本地磁盘上的物理位置。 比如： ```js output: { filename: '[name].js', path: path.resolve(__dirname, '../dist'), publicPath: '/dev/' }, ``` 这个配置项在生产模式下是必须的（因为你要打包至少要指定打包到哪吧..），但是在开发模式下不是必须的，因为 webpackDevServer 打包出来的文件都在内存中而没有打包到磁盘中。 ### output.publicPath 打包出来的资源的 URL 前缀（虽然名为打包，但是这个配置项在生产模式和开发模式中都很重要，因为开发模式就是打包在内存中），即在浏览器中访问的路径的前缀。可以填写相对路径或者绝对路径：...
## 目录 koa2 的目录结构相当整洁，只有四个文件，搭起了整个 server 的框架，koa 只是负「开头」（接受请求）和「结尾」（响应请求），对请求的处理都是由中间件来实现。 ``` ├── lib │ ├── application.js // 负责串联起 context request response 和中间件 │ ├── context.js // 一次请求的上下文 │ ├── request.js // koa 中的请求...
## 问题 先来看一下 FOIT（Flash of Invisible Text） 的表现（GitHub 只会播放一次 GIF，拖到一个新窗口刷新可重放）：  简单来说 FOIT 就是文字使用了自定义的 font-face，所以导致在自定义的字体加载完毕在之前，对应的文字会显示一片空白。 在老版本的浏览器中，会优先显示 font-family 中已经可以显示的候选字体，然后当 font-face 的字体加载完毕后，再变成 font-face 的字体，这被称作 FOUT（Flash of Unstyled Text） 下面是对 FOUT 和 FOIT...
## 问题 项目一开始使用的是 create-react-app 创建的，配置的 ESLint 是用的 AlloyTeam 的 [eslint-config-alloy/react](https://github.com/AlloyTeam/eslint-config-alloy#react)， 默认配置已经很合理了，并且每条配置都有相应的说明，只需要再根据个人喜好修改一些 rule 即可，我个人修改的 `.eslintrc.json` 配置如下 ```js { "extends": [ "eslint-config-alloy/react" ], "globals": { // 这里填入你的项目需要的全局变量 // 这里值为 false 表示这个全局变量不允许被重新赋值，比如： //...
## 前言 > 本文基于 react 16.3- 版本，所讨论的都是老版本的生命周期函数。 React 作为一个视图框架，速度已经很快了，并且在 React16 新推出的 Fiber 架构中，通过时间切片及高优先级任务中断来尽快相应用户的操作。尽管如此，React 也并不能揣测出开发者真正的意图，如果开发者的代码没有遵循最佳实践，就容易造成性能上的负担。 ## 高效渲染 React 在内部维护了一套虚拟 DOM（VDOM），在内部维护着一颗 VDOM 树，这颗 VDOM 树映射到浏览器真实的 DOM 树，React 通过更新 VDOM 树来对真实 DOM 更新，VDOM...
## 生命周期的变化  ## Fiber 架构 生命周期函数的更改是因为 16.3 采用了 Fiber 架构，在新的 Fiber 架构中，组件的更新分为了两个阶段： 1. render phase：这个阶段决定究竟哪些组件会被更新。 2. commit phase：这个阶段是 React 开始执行更新（比如插入，移动，删除节点）。 commit phase 的执行很快，但是真实 DOM 的更新很慢，所以 React 在更新的时候会暂停再恢复组件的更新以免长时间的阻塞浏览器，这就意味着 render phase...
## 目的 在开发时，经常会需要从命令行中启用各种环境 (express, webpack, gulp 等等)，而且大多数项目需要同时开启数个环境，如果每次开发时都一遍遍的开终端然后 cd 到指定目录再执行，难免有些繁琐，直接使用 shell 脚本来完成这些自动化的工作即可。 ## 举个例子 比如我在开发 [hexo-theme-archer](https://github.com/fi3ework/hexo-theme-archer) 时，需要以下几个步骤 1. cd 到 hexo 的目录 2. 执行 `hexo s` 来开启 hexo 的本地服务器 3. 再开启一个新的...
在 [深入react 技术栈](https://book.douban.com/subject/26918038/) 一书中，提到了基于 Decorator 的 HOC。而不是直接通过父组件来逐层传递 props，因为当业务逻辑越来越复杂的时候，props 的传递和维护也将变得困难且冗余。 书里对基于 Decorator 的 HOC 没有给出完整的实现，在这里实现并记录一下实现的思路。 整个实现的代码放到了 [我的Github](https://github.com/fi3ework/React-decorator-HOC) 上，是用来获取豆瓣的电影列表的，`npm start` 即可。 ## 整体思路  书里描述的整体思路，先将整个组件，按照 **view** 抽象为互不重叠的最小的原子组件，使组件间组合更自由。在这里最小的组件就是 `SearchInput`、`SelectInput`、`List`。原子组件一定是**纯粹的、木偶式的组件**，如果他们自身带有复杂的交互/业务逻辑，那么在组合起来以后可想需要修改多少个原子组件，也就失去了相对配置式的优势。 ## 组件实现 ### 原子组件...
## 目的 在 heroku 上部署 React App 的展示页，并且这个 React App 需要 node 来做转发。 ## 思考 基本的 heroku 配置可以直接参照 [文档](https://devcenter.heroku.com/categories/nodejs)。 如果是不需要 node 来做转发的单纯的 react 项目，可以直接参照官方文档的 [Deploying React with Zero Configuration](https://blog.heroku.com/deploying-react-with-zero-configuration)，顺便附上 [GitHub项目地址](https://github.com/mars/create-react-app-buildpack)。...
## 前言 在看 [React 的内联函数和性能](https://juejin.im/post/5ac20b5ff265da23945fa6bd#comment) 看到了一段很有意思的代码段，乍一看挺简单的代码，但是弄懂还是认真的想了一下，在这里分享一下思考的过程。 ## 代码 ```jsx // 1. App 会传递一个 prop 给 From 表单 // 2. Form 将向下传递一个函数给 button // 这个函数与它从 App 得到的 prop 相接近 // 3....