This algorithm for setting props does not correctly handle events,
This algorithm for setting props does not correctly handle events,
which must be treated specially. For this exercise that detail is not
which must be treated specially. For this exercise that detail is not
important though.
important and we leave it out for simplicity.
#+end_warning
#+end_warning
For rendering children we use two loops. The first loop removes any
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
~prevChild~. Otherwise this is effectively the same algorithm React
uses when rendering lists of children.
uses when rendering lists of children.
#+CAPTION: Example of ~renderChildren~ 2nd loop when the 1st element
#+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.
#+CAPTION: has been removed. In this case the trees for all of the
#+CAPTION: children will be torn down and rebuilt.
@ -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.
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.
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.
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.
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."}
