From 72cd7304df832c84ff8a04f9292b515e7037bbbd Mon Sep 17 00:00:00 2001 From: Thomas Hintz Date: Sun, 26 Jul 2020 15:35:10 -0700 Subject: [PATCH] Citing tree diffing paper. --- high-performance-react.org | 8 +++----- manuscript/fundamentals--building-our-own-react.markua | 4 +--- 2 files changed, 4 insertions(+), 8 deletions(-) diff --git a/high-performance-react.org b/high-performance-react.org index 9ca4ea5..c4f5fed 100644 --- a/high-performance-react.org +++ b/high-performance-react.org @@ -407,9 +407,9 @@ 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 +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 +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 @@ -430,8 +430,6 @@ and based on two major components: 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 diff --git a/manuscript/fundamentals--building-our-own-react.markua b/manuscript/fundamentals--building-our-own-react.markua index f74ce6f..be85f7a 100644 --- a/manuscript/fundamentals--building-our-own-react.markua +++ b/manuscript/fundamentals--building-our-own-react.markua @@ -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. -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. @@ -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. -TODO - 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.