React InternalsIntroduction to React.js diff “algorithm” in no time

<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>

VirtualDOM

N3

1000 * 1000 * 1000

KISS

Two components of the same class will generate similar trees

and two components of different classes will generate different trees.

…

setState()

setState()

setState()

setState()

render()

render() render()

render()

render() render()

render() render()

Levenstein Distance

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

div key="first"

HashMap

a b

a b

c

d

render()

render() render()

render()

render()?

shouldComponentUpdate(nextProps, nextState)

render()

render() render()

render()

render()<>

Immutable.js

https://facebook.github.io/react/docs/reconciliation.htmlReact Reconciliation

http://calendar.perfplanet.com/2013/diff/React Diff Algorithm

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_distanceLevenstein Distance

Thank You