Introduction to React.js diff “algorithm” in no time. Coffee Code, Schibsted Tech Polska, 27.06.2015.

1. React Internals
Introduction to React.js diff “algorithm” in no time

8. <div>
First Container
</div>
<div>
This <b>Our Content</b>
</div>
<div>
<i>This Our</i> Content
</div>
<div>
<i>This <b>Our</i>Content</b>
</div>

9. VirtualDOM

10. N
3
1000 * 1000 * 1000

11. KISS

12. Two components of the same class
will generate similar trees
and two components of different
classes will generate different trees.
…

14. setState()

15. setState()
setState()
setState()

16. render()
render() render()
render()
render() render()
render() render()

23. Levenstein Distance

25. It is possible to provide a unique key
for elements that is stable
across different renders

26. div key="first"
HashMap

27. a b

28. a b
c
d

29. render()
render() render()
render()
render()?

30. shouldComponentUpdate(nextProps, nextState)

31. render()
render() render()
render()
render()<>

33. Immutable.js

35. https://facebook.github.io/react/docs/reconciliation.html
React Reconciliation
http://calendar.perfplanet.com/2013/diff/
React Diff Algorithm

36. http://grfia.dlsi.ua.es/ml/algorithms/references/
editsurvey_bille.pdf
A Survey on Tree Edit Distance and Related
Problems
https://en.wikipedia.org/wiki/Levenshtein_distance
Levenstein Distance

37. Thank You