Awesome
React Element Diff like Binary Tree Diff in Golang
Features
- Support React Element Diff (which only run
O(n)
on Tree diff) - Support
three diff options
. - Support Graphviz tree display (Mac OSX only)
What is React Element Diff like Binary Tree Diff
It is a biary tree diff, which support three option:
INSERT_MARKUP
: Diff and Insert node if current tree don't have this node.MOVE_EXISTING
: Move node refer diff tree.REMOVE_NODE
: Remove node if found node not exist in diff tree.
The diff rule refer to "React Element Diff" and trying to modify some rul into tree diff.
Limitations
It has some limitation when we trying to apply element dif into tree diff.
- The tree must be binary tree (could be unsort)
- The diff most obey the diff option, otherwise diff result will be wrong.
- It take more memory space and run time to support three diff options.
Install
go get github.com/kkdai/react-diff
Usage
package main
import (
. "github.com/kkdai/react-diff"
)
func main() {
nT := NewReactDiffTree(20)
nT.InsertNote("a", 1)
nT.InsertNote("b", 2)
nT.InsertNote("c", 3)
nT.InsertNote("d", 4)
nT.InsertNote("f", 6)
nT.InsertNote("e", 8)
nT2 := NewReactDiffTree(20)
nT2.InsertNote("a", 1)
nT2.InsertNote("b", 2)
nT2.InsertNote("c", 3)
nT2.InsertNote("d", 5)
nT2.InsertNote("h", 7)
nT2.InsertNote("e", 10)
nT.DiffTree(nT2, INSERT_MARKUP)
nT.DisplayGraphvizTree()
}
Benchmark
BenchmarkAdd-4 1000000 1229 ns/op
BenchmarkDel-4 5000000 228 ns/op
BenchmarkGet-4 10000 122375 ns/op
BenchmarkDiff-4 300000 4396 ns/op
Inspired
- React 源码剖析系列 - 不可思议的 react diff
- React -Get Started
- React’s diff algorithm
- React (Virtual) DOM Terminology
- 深度剖析:如何实现一个 Virtual DOM 算法
Project52
It is one of my project 52.
License
This package is licensed under MIT license. See LICENSE for details.