知识共享许可协议

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 元素
阅读全部

ECharts GL 1.0 alpha 发布

距离 ECharts-X 最近一个版本已经过去了两年多时间,期间我们不断被开发者在各种渠道询问 ECharts-X 为什么还不升级新版本,是不是不再维护了等等,对于这些问题我们只能回答我们还没准备好。尽管这两年时间 ECharts X 没什么动静,但是其它的工作,像 ECharts 3 的架构大改动和后续版本的迭代升级,以及其它 WebGL 产品的开发,都是对新版本架构和技术上的积累。现在我们终于可以说我们准备得差不多了,ECharts-X 的下一代,ECharts-GL 发布 1.0 alpha。

阅读全部

React Native Code Push iOS

最近研究了下 React Native 的 Code Push 热更新,先来 iOS 版本~

阅读全部

How you create your own Native Bridge - JSVM and the first adventure

原文地址:https://medium.com/@kureevalexey/how-to-create-your-own-native-bridge-bfa050e708fc#.ykryuzmun

JSVM and the first adventure

JSVM and the first adventure

What do you know about JavaScript engines? Did you ever try to embed one? In this chapter I’m going to guide you through the dark spooky forest of hosted objects, virtual machines, interpreters and other evil spirits that we call JavaScript engines.

你之前对 JS 引擎是否有过了解?有没有试着在自己的项目里面嵌入一个 JS 引擎玩玩儿?在这篇文章里面,我会给你一些指引,以便可以顺利通过含有 Hosted Objects, Virtual Machines, Interpreters 以及一些其它稀奇古怪玩意儿的『魔法森林』。(不太准确

I know that it may look scary, but don’t forget that a journey of a thousand miles starts with a single step. In our case it’ll be a step into code parsing. At this stage our JavaScript source is getting converted to a structure called abstract syntax tree (AST). There are many different techniques to parse your code (LL(k), LR(k) etc) and convert it to AST, but for the sake of simplicity I want to keep it out of this article.

我知道这听起来很疯狂,不过我们要牢记『千里之行,始于足下』。对我们来说,第一步就是代码解析,也就是把原始的 JS 代码转化成抽象语法树(AST)的表示形式。业界已经有很多不同的方案可以把原始代码转化成抽象语法树,例如 LL(k), LR(k) 等等,不够为了简单起见,这篇文章里面我不会涉及相关的内容。

阅读全部

ECharts v3.5 发布:新增日历坐标系、坐标轴指示器;同时统计扩展 v1.0 发布

在 ECharts 新发布的 3.5 版本中,新增了日历坐标系,增强了坐标轴指示器。同时,ECharts 统计扩展 1.0 版本发布了。日历坐标系用于在日历中绘制图表,坐标轴指示器方便用户观察数据内容,统计扩展是一个专门用来进行数据分析的工具。

阅读全部

可视化中的数据

当下随着大数据热潮的到来,数据可视化作为一个新兴的领域,受到了学术界和工业界的重视。从可视分析、数据新闻到商业报表,各个领域都在越来越多的使用它。既然是数据可视化,说明数据是主体,可视化只是将数据以可视的形式表达的手段。接下来小编就与大家一起揭开可视化中数据的面纱,一探究竟。

阅读全部