原文：The Inner Workings Of Virtual DOM
虚拟DOM (VDOM，也称为 VNode) 是非常神奇的，同时也是复杂难懂的。 React，Preact 以及其他类似的 JS 库都使用了虚拟 DOM 技术作为内核。可惜我找不到任何靠谱的文章或者文档可以简单又清楚解释清虚拟DOM的内部细节。所以，我就想到自己动手写一篇。
注：这是一篇很长的博客。为了让内容更容易理解，我添加了很多图片。这也导致这篇博客看上去更长了。
在这篇博客中，我是基于 Preact 的代码和 VDOM 机制来介绍的。因为 Preact 代码量更少，你在以后也可以不费力地自己看看源码。但是我觉得绝大部分的概念也同样适用于 React。
我希望读者通过这篇博客可以更好地理解虚拟DOM，并期待你们可以为 React 和 Preact 等开源项目提供贡献。
在这篇博客中，我会通过一个简单的例子来仔细地介绍虚拟DOM的每个场景，给大家虚拟DOM是如何工作的。特别地，我会介绍以下内容：
- Babel 和 JSX
- 创建 VNode -- 单个虚拟 DOM 元素
- 处理组件和子组件
- 初始渲染和创建 DOM 元素
- 再次渲染
- 删除 DOM 元素
- 替换 DOM 元素
阅读全部
原文：Composers and audiences
(没错，这篇文章是关于 JavaScript 的，在这个比喻里 YY 一会吧。)
想象一下自己是一个十八世纪的年轻宫廷作曲家。你刚刚从学校里出来到维也纳，心里有一个目标：向前辈大师们学习，提高你的技艺。你听过莫扎特的令人震撼的歌剧，巴赫沉重的赋格曲，也梦想着用这种传奇的艺术形式来征服你的听众。
你对近期在乐器响度上的进展感到激动——毕竟小提琴的音孔在你那个年代才刚刚完善。你还被探索者们所描述的来自远东的陌生记谱法深深吸引，它们完全不像你在学校所学的12个音符音阶。你甚至还听过非洲鼓复杂的韵律，要远远的复杂于欧洲标准锁步打击乐器。
阅读全部
前言
貌似前端[1]圈一直以来流传着一种误解：前端用不到算法知识。[2]
长久以来，我也曾受这种说法的影响。直到前阵子遇到一个产品需求，回过头来看，发现事实并非如此。
阅读全部
在ES2015发布后，JavaScript最终也有了一个标准的模块化方案，而同时从webpack开始，也带来了一波“一切皆模块”的潮流。整个2015-2016的前端发展中，除去在UI层不断的努力和突破外，几乎每一件事都和模块化脱不开关系。
本文也试图从几个方面简单地说一下模块化，并分析一些在模块化实施中产生的误区。
阅读全部
原文：Mixins Are Dead. Long Live Composition
当 React 0.13 推出的时候，大家都震惊了。
它的开篇表达得很明确，mixin 正在逐步退出历史舞台：
不好意思，React ES6 将不再支持mixin，否则有悖 JavaScript 语义化的初衷。
在 JavaScript 中我们找不到通用的标准来定义 mixin，事实上，ES6 也摒弃了不少支持 mixin 的特性。语义混乱的类库已经很多了。尽管我们认为应该有一个统一的方法来定义 mixin，便于对 JavaScript 各种“类”的操作，但 React 并不打算这么做。
mixin 始终会来的，某些人可能会有这样的理解。但实际上， Sebastian Markbåge，伟大的API终结者，也不太看好 mixin：
“坦白说，mixin 其实是一个后门，它可以绕过系统对某些复用的限制，但是语义化的 React 不该是这样的。让组合更加便捷较之随心所欲地 mixin 应该享有更高的优先级，对 React 来说，这才是正事。”
为什么要用 mixin？mixin 解决了什么问题？我们是否可以换一种无继（Tong）承（ku）的方式去解决这些问题？
通用函数
这个例子举得稍微有点脑残。与其用 mixin 的方式去共享通用功能，直接将其提取出来并模块化，需要的时候直接引用不是更好么？
生命周期和状态选择
这是 mixin 的主要用例。如果你对 React 的 mixin 系统还不是特别熟悉，可以这么理解，它"合并"了生命周期钩子并且更加智能。假如同时使用了组合以及一些 mixin 去定义 componentDidMountlifecycle 钩子，React 会自动合并它们以保证每个方法都能被调用。类似地，使用一些mixin也能作用于 getInitialState 方法。
在实践中，这是唯一体现 mixin 用处的地方。mixin 可以向 Flux Store 订阅组件的状态或者作用于更新后的组件 DOM 节点。任何一个组件扩展机制均能获得组件的生命周期，这一点是绝对有必要的。
然而mixin还是有不少弱点：
阅读全部
