- Support React Element Diff (which only run
O(n)
on Tree diff) - Support
three diff options
. - Support Graphviz tree display (Mac OSX only)
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.
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.
go get github.com/kkdai/react-diff
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()
}
BenchmarkAdd-4 1000000 1229 ns/op
BenchmarkDel-4 5000000 228 ns/op
BenchmarkGet-4 10000 122375 ns/op
BenchmarkDiff-4 300000 4396 ns/op
- React 源码剖析系列 - 不可思议的 react diff
- React -Get Started
- React’s diff algorithm
- React (Virtual) DOM Terminology
- 深度剖析:如何实现一个 Virtual DOM 算法
It is one of my project 52.
This package is licensed under MIT license. See LICENSE for details.