Welcome to the Virtual Dom Diff Algorithm, The repo is a simple algorithm implementation for virtual dom diff for react or vue dom.
- Learn something about virtual dom diff from react or vue dom calculate way.
We had used the babel plugin which named @babel/plugin-transform-react-jsx transform for this step.
React
In
const profile = (
<div>
<img src="avatar.png" className="profile" />
<h3>{[user.firstName, user.lastName].join(' ')}</h3>
</div>
);Out
const profile = React.createElement("div", null,
React.createElement("img", { src: "avatar.png", className: "profile" }),
React.createElement("h3", null, [user.firstName, user.lastName].join(" "))
);More info go to @babel/plugin-transform-react-jsx
or you can create a class(ES6) to descript the dom, just like this:
class Element {
type: string;
props: Object<any>;
children: Array<any>;
constructor(type: stirng, props: Object<any>, children: Array<any>) {
this.type = type;
this.props = props;
this.children = children;
}
}The javascript virtual dom renders to the HTML real dom.
if (isString(node)) {
return document.createTextNode(node + '');
}
const el = document.createElement(node.type);
setProps(el, node.props || {});
node.children &&
node.children.map(createElement).forEach(el.appendChild.bind(el));
return el;function diff(oldNode, newNode) {
if (!oldNode) {
return { type: CREATE, newNode };
}
if (!newNode) {
return { type: REMOVE };
}
if (changed(oldNode, newNode)) {
return { type: REPLACE, newNode };
}
if (oldNode.type !== newNode.type) {
return {
type: UPDATE,
props: diffProps(oldNode.props, newNode.props),
children: diffChildren(oldNode.children, newNode.children)
};
}
}function patch(parent, patches, index = 0) {
if (!patches) {
return;
}
const el = parent.children[index];
switch (patches.type) {
case CREATE: {
const { newNode } = patches;
const newEl = document.createElement(newNode);
return parent.appendChild(newEl);
}
case REMOVE: {
return parent.removeChild(el);
}
case REPLACE: {
const { newNode } = patches;
const newEl = createElement(newNode);
return parent.replaceChild(newEl, el);
}
case UPDATE: {
const { props, children } = patches;
patchProps(el, props);
children.forEach((child, idx) => {
patch(el, child, idx);
});
}
}
}
We welcome all contributions. You can submit any ideas as pull requests or as a GitHub issue.
Front-End development engineer, technology stack: React + Typescript + Mobx, also used Vue + Vuex for a while
Copyright ยฉ 2020-present Rain120.