Citing tree diffing paper.

master
Thomas Hintz 4 years ago
parent 55266e0daa
commit 72cd7304df

@ -407,9 +407,9 @@ algorithm.
Unfortunately those researching tree diffing in Computer Science have Unfortunately those researching tree diffing in Computer Science have
not yet produced a generic algorithm with sufficient performance for not yet produced a generic algorithm with sufficient performance for
use in something like React as the current best still runs in use in something like React as the current best still [[https://grfia.dlsi.ua.es/ml/algorithms/references/editsurvey_bille.pdf][runs in
O(n^3). This leads to the largest performance related aspect in all of O(n^3)]]. This leads to the largest performance related aspect in all of
React. H_2O React.
Since an O(n^3) algorithm isn't going to cut it the creators of React Since an O(n^3) algorithm isn't going to cut it the creators of React
instead use a set of heuristics to determine what parts of the tree instead use a set of heuristics to determine what parts of the tree
@ -430,8 +430,6 @@ and based on two major components:
In this section we will focus on the first part: differing In this section we will focus on the first part: differing
types. Later on we will discuss and implement the ~key~ prop. types. Later on we will discuss and implement the ~key~ prop.
TODO https://grfia.dlsi.ua.es/ml/algorithms/references/editsurvey_bille.pdf
The approach we will take here is to integrate the heuristics that The approach we will take here is to integrate the heuristics that
React uses into our render method. This is similar to how React itself React uses into our render method. This is similar to how React itself
does it and we will discuss React's actual implementation later when we does it and we will discuss React's actual implementation later when we

@ -201,7 +201,7 @@ A tale of two trees. These are the two trees that people most often talk about w
Conceptually the way this works is that React generates a new element tree for every render and compares to the newly generated tree to the tree generated on the previous render. Where it finds differences in the tree it knows to mutate the DOM state. This is the "tree diffing" algorithm. Conceptually the way this works is that React generates a new element tree for every render and compares to the newly generated tree to the tree generated on the previous render. Where it finds differences in the tree it knows to mutate the DOM state. This is the "tree diffing" algorithm.
Unfortunately those researching tree diffing in Computer Science have not yet produced a generic algorithm with sufficient performance for use in something like React as the current best still runs in O(n^3^). This leads to the largest performance related aspect in all of React. H~2O~ Unfortunately those researching tree diffing in Computer Science have not yet produced a generic algorithm with sufficient performance for use in something like React as the current best still [runs in O(n^3^)](https://grfia.dlsi.ua.es/ml/algorithms/references/editsurvey_bille.pdf). This leads to the largest performance related aspect in all of React.
Since an O(n^3^) algorithm isn't going to cut it the creators of React instead use a set of heuristics to determine what parts of the tree have changed. Understanding how the React tree diffing algorithm works in general and the heuristics currently in use can help immensely in detecting and fixing React performance bottlenecks. And beyond that it can help one's understanding of some of React's quirks and usage. Even though this algorithm is internal to React and can be changed anytime its details have leaked out in some ways and are overall unlikely to change in major ways without larger changes to React. Since an O(n^3^) algorithm isn't going to cut it the creators of React instead use a set of heuristics to determine what parts of the tree have changed. Understanding how the React tree diffing algorithm works in general and the heuristics currently in use can help immensely in detecting and fixing React performance bottlenecks. And beyond that it can help one's understanding of some of React's quirks and usage. Even though this algorithm is internal to React and can be changed anytime its details have leaked out in some ways and are overall unlikely to change in major ways without larger changes to React.
@ -212,8 +212,6 @@ According to the React documentation their diffing algorithm is O(n) and based o
In this section we will focus on the first part: differing types. Later on we will discuss and implement the `key` prop. In this section we will focus on the first part: differing types. Later on we will discuss and implement the `key` prop.
TODO <https://grfia.dlsi.ua.es/ml/algorithms/references/editsurvey_bille.pdf>
The approach we will take here is to integrate the heuristics that React uses into our render method. This is similar to how React itself does it and we will discuss React's actual implementation later when we talk about Fibers. The approach we will take here is to integrate the heuristics that React uses into our render method. This is similar to how React itself does it and we will discuss React's actual implementation later when we talk about Fibers.
Before we get into the code changes that implement the heuristics it is important to remember that React *only* looks at an element's type, existence, and key. It does not do any other diffing. It does not diff props. It does not diff sub-trees of modified parents. If you could only take away one thing from this book it would that. Before we get into the code changes that implement the heuristics it is important to remember that React *only* looks at an element's type, existence, and key. It does not do any other diffing. It does not diff props. It does not diff sub-trees of modified parents. If you could only take away one thing from this book it would that.

Loading…
Cancel
Save