From 7e47b03baad53b662472173a7721e1ae28f6b18a Mon Sep 17 00:00:00 2001 From: Thomas Hintz Date: Sun, 2 Aug 2020 12:18:06 -0700 Subject: [PATCH] Updating caption for renderChildren table. --- high-performance-react.org | 6 ++---- manuscript/fundamentals--building-our-own-react.markua | 4 ++-- 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/high-performance-react.org b/high-performance-react.org index 172697b..0006ab2 100644 --- a/high-performance-react.org +++ b/high-performance-react.org @@ -623,7 +623,7 @@ need to be updated or removed. #+begin_warning This algorithm for setting props does not correctly handle events, which must be treated specially. For this exercise that detail is not -important though. +important and we leave it out for simplicity. #+end_warning For rendering children we use two loops. The first loop removes any @@ -663,9 +663,7 @@ minor difference in determining which ~child~ gets paired with which ~prevChild~. Otherwise this is effectively the same algorithm React uses when rendering lists of children. -#+CAPTION: Example of ~renderChildren~ 2nd loop when the 1st element -#+CAPTION: has been removed. In this case the trees for all of the -#+CAPTION: children will be torn down and rebuilt. +#+CAPTION: Example of ~renderChildren~ 2nd loop when the 1st element has been removed. In this case the trees for all of the children will be torn down and rebuilt. | i | child Type | prevChild Type | |---+------------+----------------| | 0 | span | div | diff --git a/manuscript/fundamentals--building-our-own-react.markua b/manuscript/fundamentals--building-our-own-react.markua index fbf618b..33392e2 100644 --- a/manuscript/fundamentals--building-our-own-react.markua +++ b/manuscript/fundamentals--building-our-own-react.markua @@ -329,7 +329,7 @@ function setDOMProps(element, domElement, prevElement) { I> React is more intelligent about only updating or removing props that need to be updated or removed. -W> This algorithm for setting props does not correctly handle events, which must be treated specially. For this exercise that detail is not important though. +W> This algorithm for setting props does not correctly handle events, which must be treated specially. For this exercise that detail is not important and we leave it out for simplicity. For rendering children we use two loops. The first loop removes any elements that are no longer being used. This would happen when the number of children is decreased. The second loop starts at the first child and then iterates through all of the children of the parent element, calling `render_internal` on each child. When `render_internal` is called the corresponding previous element in that position is passed to `render_internal`, or `undefined` if there is no corresponding element, like when the list of children has grown. @@ -352,7 +352,7 @@ function renderChildren(element, domElement, prevElement = { props: { children: It's very important to understand the algorithm used here because this is essentially what happens in React when incorrect keys are used, like using a list index for a key. And this is why keys are so critical to high performance (and correct) React code. For example, in our algorithm here, if you removed an item from the front of the list you may cause every element in the list to be created anew in the DOM if the types no longer match up. Later on, in the chapter on keys, we will update this algorithm to incorporate keys. It's actually only a minor difference in determining which `child` gets paired with which `prevChild`. Otherwise this is effectively the same algorithm React uses when rendering lists of children. -{caption: "children will be torn down and rebuilt."} +{caption: "Example of `renderChildren` 2nd loop when the 1st element has been removed. In this case the trees for all of the children will be torn down and rebuilt."} | i | child Type | prevChild Type | |--- |---------- |-------------- | | 0 | span | div |