From 1aaa61d5cf9197778edb40706a1a4b06edc257d0 Mon Sep 17 00:00:00 2001 From: Thomas Hintz Date: Sun, 2 Aug 2020 12:36:44 -0700 Subject: [PATCH] Final refinements of chapter 1 before forking to separate book. --- high-performance-react.org | 54 +++++++++---------- ...undamentals--building-our-own-react.markua | 16 ++---- 2 files changed, 30 insertions(+), 40 deletions(-) diff --git a/high-performance-react.org b/high-performance-react.org index 0006ab2..dd5b285 100644 --- a/high-performance-react.org +++ b/high-performance-react.org @@ -7,7 +7,7 @@ #+END_SRC #+latex_class: book -#+latex_class_options: [book,16pt,oneside] +#+latex_class_options: [book,12pt,oneside] #+latex_header: \usepackage[book,top=2.5cm,bottom=2.5cm,left=2.5cm,right=2.5cm]{geometry} #+TITLE: High-Performance React @@ -683,14 +683,16 @@ tearing down and rebuilding the trees of child components. ** Fibers The actual React implementation used to look very similar to what -we've gone through so far but with React 16 this has changed -dramatically with the introduction of Fibers. Fibers are a name that -React gives to discrete units of work. And the React reconciliation -algorithm was changed to be based on small units of work instead of -one large, potentially long-running call to ~render~. This means that -React is now able to process just part of the render phase, pause to -let the browser take care of other things, and resume again. This is -the underlying change the enables the experimental Concurrent Mode. +we've built so far, but with React 16 this has changed dramatically +with the introduction of Fibers. Fibers are a name that React gives to +discrete units of work during the render process. And the React +reconciliation algorithm was changed to be based on small units of +work instead of one large, potentially long-running call to +~render~. This means that React is now able to process just part of +the render phase, pause to let the browser take care of other things, +and resume again. This is the underlying change the enables the +experimental Concurrent Mode as well as running most hooks without +blocking the render. But even with such a large change, the underlying algorithms for deciding how and when to render components is the same. And when not @@ -700,11 +702,8 @@ interpretation that doesn't include all the complexities of breaking up the process in to chunks enables us to see more clearly how the process as a whole works. At this point bottlenecks are much more likely to occur from the underlying algorithms and not from the Fiber -specific details. In the chapter on Concurrent Mode we will go in to -this more. - -TODO note that unlike class lifecycle events most hooks, like -useEffect +specific details. In the chapter on Concurrent Mode we will learn more +about Fibers. ** Putting it all together @@ -729,13 +728,14 @@ components and use them! render(createElement(App()), document.getElementById('root')); #+END_SRC -We are just creating two components, based on the same JSX-like -notation we were using earlier. We create one ~prop~: ~dateTime~. It -gets passed to the ~SayNow~ component which just prints out the -DateTime passed in to it. To simplify our implementation we are just -passing props as object literals. +We are creating two components, that output JSM, as we defined it +earlier. We create one component prop for the ~SayNow~ component: +~dateTime~. It gets passed from the ~App~ component. The ~SayNow~ +component prints out the ~DateTime~ passed in to it. You might notice +that we are passing props the same way one does in the real React, and +it just works! -The next step is to just call render multiple times. +The next step is to call render multiple times. #+BEGIN_SRC javascript setInterval(() => @@ -743,11 +743,11 @@ setInterval(() => 1000); #+END_SRC -If you do that you will see the DateTime display being updated every -second. And if you watch in your dev tools or if you profile the run -you will see that the only part of the DOM that gets updated or -replaced is the part that changes (aside from the DOM props). We now -have a working version of our own React. +If you run the code above you will see the DateTime display being +updated every second. And if you watch in your dev tools or if you +profile the run you will see that the only part of the DOM that gets +updated or replaced is the part that changes (aside from the DOM +props). We now have a working version of our own React. #+begin_note This implementation is designed for teaching purposes and has some @@ -772,10 +772,6 @@ looking at practical applications of it so that we are prepared to build high performance React applications and diagnose any bottlenecks. -TODO maybe a graphic summarizing the heuristics? - -TODO maybe show full example with our React - * Rendering Model :PROPERTIES: :EXPORT_FILE_NAME: manuscript/rendering-model.markua diff --git a/manuscript/fundamentals--building-our-own-react.markua b/manuscript/fundamentals--building-our-own-react.markua index 33392e2..4830aa6 100644 --- a/manuscript/fundamentals--building-our-own-react.markua +++ b/manuscript/fundamentals--building-our-own-react.markua @@ -363,11 +363,9 @@ There are a few things to note here. First, it is important to pay attention to ## Fibers -The actual React implementation used to look very similar to what we've gone through so far but with React 16 this has changed dramatically with the introduction of Fibers. Fibers are a name that React gives to discrete units of work. And the React reconciliation algorithm was changed to be based on small units of work instead of one large, potentially long-running call to `render`. This means that React is now able to process just part of the render phase, pause to let the browser take care of other things, and resume again. This is the underlying change the enables the experimental Concurrent Mode. +The actual React implementation used to look very similar to what we've built so far, but with React 16 this has changed dramatically with the introduction of Fibers. Fibers are a name that React gives to discrete units of work during the render process. And the React reconciliation algorithm was changed to be based on small units of work instead of one large, potentially long-running call to `render`. This means that React is now able to process just part of the render phase, pause to let the browser take care of other things, and resume again. This is the underlying change the enables the experimental Concurrent Mode as well as running most hooks without blocking the render. -But even with such a large change, the underlying algorithms for deciding how and when to render components is the same. And when not running in Concurrent Mode the effect is still the same as React does the render phase in one block still. So using a simplified interpretation that doesn't include all the complexities of breaking up the process in to chunks enables us to see more clearly how the process as a whole works. At this point bottlenecks are much more likely to occur from the underlying algorithms and not from the Fiber specific details. In the chapter on Concurrent Mode we will go in to this more. - -TODO note that unlike class lifecycle events most hooks, like useEffect +But even with such a large change, the underlying algorithms for deciding how and when to render components is the same. And when not running in Concurrent Mode the effect is still the same as React does the render phase in one block still. So using a simplified interpretation that doesn't include all the complexities of breaking up the process in to chunks enables us to see more clearly how the process as a whole works. At this point bottlenecks are much more likely to occur from the underlying algorithms and not from the Fiber specific details. In the chapter on Concurrent Mode we will learn more about Fibers. ## Putting it all together @@ -390,9 +388,9 @@ const App = () => { render(createElement(App()), document.getElementById('root')); ``` -We are just creating two components, based on the same JSX-like notation we were using earlier. We create one `prop`: `dateTime`. It gets passed to the `SayNow` component which just prints out the DateTime passed in to it. To simplify our implementation we are just passing props as object literals. +We are creating two components, that output JSM, as we defined it earlier. We create one component prop for the `SayNow` component: `dateTime`. It gets passed from the `App` component. The `SayNow` component prints out the `DateTime` passed in to it. You might notice that we are passing props the same way one does in the real React, and it just works! -The next step is to just call render multiple times. +The next step is to call render multiple times. {format: "javascript"} ``` @@ -401,7 +399,7 @@ setInterval(() => 1000); ``` -If you do that you will see the DateTime display being updated every second. And if you watch in your dev tools or if you profile the run you will see that the only part of the DOM that gets updated or replaced is the part that changes (aside from the DOM props). We now have a working version of our own React. +If you run the code above you will see the DateTime display being updated every second. And if you watch in your dev tools or if you profile the run you will see that the only part of the DOM that gets updated or replaced is the part that changes (aside from the DOM props). We now have a working version of our own React. I> This implementation is designed for teaching purposes and has some known issues and bugs, like always updating the DOM props, along with other things. Fundamentally, it functions the same as React but if you wanted to use it in a more production setting it would take a lot more development. @@ -411,8 +409,4 @@ Of course our version of React elides over many details that React must contend At this point you should have an understanding of how React works. In the rest of the book we are going to be refining this model and looking at practical applications of it so that we are prepared to build high performance React applications and diagnose any bottlenecks. -TODO maybe a graphic summarizing the heuristics? - -TODO maybe show full example with our React -