知识共享许可协议

Vitual DOM 的内部工作原理

原文:The Inner Workings Of Virtual DOM

Preact VDOM 工作流程图

Preact VDOM 工作流程图

虚拟DOM (VDOM,也称为 VNode) 是非常神奇的,同时也是复杂难懂的。 ReactPreact 以及其他类似的 JS 库都使用了虚拟 DOM 技术作为内核。可惜我找不到任何靠谱的文章或者文档可以简单又清楚解释清虚拟DOM的内部细节。所以,我就想到自己动手写一篇。

注:这是一篇很长的博客。为了让内容更容易理解,我添加了很多图片。这也导致这篇博客看上去更长了。

在这篇博客中,我是基于 Preact 的代码和 VDOM 机制来介绍的。因为 Preact 代码量更少,你在以后也可以不费力地自己看看源码。但是我觉得绝大部分的概念也同样适用于 React。

我希望读者通过这篇博客可以更好地理解虚拟DOM,并期待你们可以为 React 和 Preact 等开源项目提供贡献。

在这篇博客中,我会通过一个简单的例子来仔细地介绍虚拟DOM的每个场景,给大家虚拟DOM是如何工作的。特别地,我会介绍以下内容:

  1. Babel 和 JSX
  2. 创建 VNode – 单个虚拟 DOM 元素
  3. 处理组件和子组件
  4. 初始渲染和创建 DOM 元素
  5. 再次渲染
  6. 删除 DOM 元素
  7. 替换 DOM 元素
阅读全部

作曲家与听众

原文:Composers and audiences

(没错,这篇文章是关于 JavaScript 的,在这个比喻里 YY 一会吧。)

想象一下自己是一个十八世纪的年轻宫廷作曲家。你刚刚从学校里出来到维也纳,心里有一个目标:向前辈大师们学习,提高你的技艺。你听过莫扎特的令人震撼的歌剧,巴赫沉重的赋格曲,也梦想着用这种传奇的艺术形式来征服你的听众。

Source: Wikimedia Commons

Source: Wikimedia Commons

你对近期在乐器响度上的进展感到激动——毕竟小提琴的音孔在你那个年代才刚刚完善。你还被探索者们所描述的来自远东的陌生记谱法深深吸引,它们完全不像你在学校所学的12个音符音阶。你甚至还听过非洲鼓复杂的韵律,要远远的复杂于欧洲标准锁步打击乐器。

阅读全部

聊聊前端排序的那些事

前言

貌似前端[1]圈一直以来流传着一种误解:前端用不到算法知识。[2]

长久以来,我也曾受这种说法的影响。直到前阵子遇到一个产品需求,回过头来看,发现事实并非如此。

阅读全部

强迫症的模块化

在ES2015发布后,JavaScript最终也有了一个标准的模块化方案,而同时从webpack开始,也带来了一波“一切皆模块”的潮流。整个2015-2016的前端发展中,除去在UI层不断的努力和突破外,几乎每一件事都和模块化脱不开关系。

本文也试图从几个方面简单地说一下模块化,并分析一些在模块化实施中产生的误区。

阅读全部

如何在ES6中管理类的私有数据

原文:http://www.2ality.com/2016/01/private-data-classes.html

如何在ES6中管理类的私有数据?本文为你介绍四种方法:

  • 在类的构造函数作用域中处理私有数据成员
  • 遵照命名约定(例如前置下划线)标记私有属性
  • 将私有数据保存在WeakMap中
  • 使用Symbol作为私有属性的键
阅读全部

Mixin 已死,Composition 万岁

原文: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还是有不少弱点:

阅读全部