本文主要详细介绍了，如何使用 webpack，打包多套不同主题的解决方案以及实践中所遇到的问题及解决方案。

这张图展示的是8种不同的字体，其中第一、第二个分别为 font-awesome图标、自定义的字体图标，其余字体依次为Avenir、Trebuchet MS、Arial、Helvetica、Hiragino Sans GB、STXihei。源代码在这里。这些字符的font-size:100px，但是占的高度却不一样。有的是 100px，有的大于 100px。另外可以看出，垂直方向并没有居中对齐。
这篇文章主要研究：

• font 的工作原理及度量参数
• CSS box models 的类型、定义

这篇文章主要记录了，使用 Electron 构建的一个 APP 过程的关键步骤和遇到的问题及解决方法。

最终成品效果图

查看源码

背景

高阶组件的这种写法的诞生来自于社区的实践，目的是解决一些交叉问题(Cross-Cutting Concerns)。而最早时候 React 官方给出的解决方案是使用 mixin 。而 React 也在官网中写道：

We previously recommended mixins as a way to handle cross-cutting concerns. We’ve since realized that mixins create more trouble than they are worth.

官方明显也意识到了使用mixins技术来解决此类问题所带来的困扰远高于其本身的价值。更多资料可以查阅官方的说明。

高阶函数的定义

说到高阶组件，就不得不先简单的介绍一下高阶函数。下面展示一个最简单的高阶函数

1

const add = (x,y,f) => f(x)+f(y)

当我们调用add(-5, 6, Math.abs)时，参数 x，y 和f 分别接收 -5，6 和 Math.abs，根据函数定义，我们可以推导计算过程为：

1
2
3
4

x ==> -5
y ==> 6
f ==> abs
f(x) + f(y) ==> Math.abs(-5) + Math.abs(6) ==> 11

1

add(-5, 6, Math.abs); //11

高阶函数是至少满足下列一个条件的函数：

• 接受一个或多个函数作为输入
• 输出一个函数

高阶组件的定义

那么，什么是高阶组件呢？类比高阶函数的定义，高阶组件就是接受一个组件作为参数并返回一个新组件的函数。这里需要注意高阶组件是一个函数，并不是组件，这一点一定要注意。
同时这里强调一点高阶组件本身并不是 React API。它只是一种模式，这种模式是由 React 自身的组合性质必然产生的。
更加通俗的讲，高阶组件通过包裹（wrapped）被传入的React组件，经过一系列处理，最终返回一个相对增强（enhanced）的 React 组件，供其他组件调用。

大纲图