Kut

Kut，一个简朴的React-Like的前端视图衬着库，是我在进修React源码时造的轮子。Kut是基于Typescript的React最小完成。如今Kut支撑的Top-Level要领唯一两个，即createElement、render，同时也支撑组件化开辟，Demo在这里。

本文重要对Kut的源码举行申明和纪录，项目地点：Github。

源码申明

源码都在src目录下，如今一共9个文件，离别以下。

component.ts

定义了Component类，以用于自定义组件，只是定义了一些属性和要领，与React的Component类似。

element.ts

Element是用于组织Virtual DOM节点的对象，element.ts中包括一个工场函数createElement。Element有3个属性：type是范例，可所以DOM tag（如div等）或自定义组件（即Component子类）；key用于diff时对节点举行唯一辨别；children是子节点数组，其元素可所以文本或许Element，和React的区分是，假如children只要一项时，Kut的children还是数组，不过只要一项。

instance.ts

instance.ts中包括了三种差别范例Element对应的实例类Instance，对应ReactComponent（注重区分Component，为防止殽杂，Kut中命名为Instance），离别为文本实例TextInstance、DOM节点实例DOMInstance和自定义组件实例ComponentInstance。三种Instance类构造基础类似，起首包括其对应于DOM节点的唯一kutId，以轻易举行挂载、更新和卸载；而index只用于列表项没指定key时运用，可疏忽；key和node用于猎取DOM节点的key和节点自身。

Instance的代价重要在于mount、shouldReceive、update和unmount要领。mount要领用于遍历VDOM树，拼接HTML和增加监听函数。而shouldReceive用于推断是不是为统一节点，若Element的type和key雷同，则直接挪用update更新，不然挪用unmount卸载并从新mount挂载。update要领则递归更新以当前节点为根节点的VDOM子树，个中若children大于一项的，会运用diff算法盘算其差别并挪用patch举行更新。末了，unmount要领则从DOM树上卸载节点，并消灭援用。

diff.ts

关于列表项更新，须要运用diff算法盘算其差别。React的完成能够参考这篇文章，我称其为前向diff。Kut基础的完成逻辑和React是类似的，但关于把元素从列表中底部挪到顶部的做法，React的前向diff会致使DOM更新操纵过量。Kut的做法是引入后向diff，逻辑是和前向diff一致，只是方向相反，时候复杂度仍为O(n)。取前向diff和后向diff的更新操纵较少者，挪用patch函数对DOM举行更新。这部分诠释我都写在了diff.ts的解释里了。

kut.ts/renderer.ts/constant.ts/util.ts

离别是进口文件、衬着要领、一些常量和一些东西函数。个中renderer.ts中定义了Element实例化instantiate函数（即由Element天生Instance）和render函数（运用innerHTML举行挂载），因为采纳innerHTML要领举行挂载，须要运用事宜托付来处理事宜，也须要运用DOM节点唯一kutId举行区分，详细见event.ts。

event.ts

React为保证兼容性，具有合成事宜。而Kut为简朴起见，仍运用原生事宜，采纳事宜托付的体式格局，将一切监听函数挂在document上。event.ts的做法参考了的做法，完成了在document上增加和删除监听函数的要领，并以kutId推断触发的节点。

后续设计

近来忙着练习口试和论文临时也没太多时候加新功能，如今依然有些bug，如componentDidMount的触发机遇不对。逐步先盘算支撑异步更新和Context，最少让Redux能用对吧，先写篇纪录以免背面来看连本身都忘了（苦笑）。引荐个近来看到的关于React源码的专栏，觉得讲得还不错的，在这里：编程小思。

迎接pr和stars，项目地点：Github。