Putting Everything Together

[00:00:00]
>> Evan You: So putting everything together, this is putting the render function side and our reactivity lessons together. Each component has a render function. And this render function, when we run it, it's essentially wrapped inside an auto run that we implemented earlier. So that's why when it renders, we're collecting all these dependencies by invoking these getters on our data properties.

[00:00:24]
And then we have this additional concept, kind of watcher, that each component has a watcher that's responsible for collecting dependencies, cleaning them up, and notifying everything. And the component render functions returns Virtual DOM. So you see the loop here because we're inside Autorun where we render. The render will be called over and over again, whenever the property that we depend on viewing the render changes.

[00:00:54]
So each component has sort of it's own Autorun loop. And a component tree consists of many of these components, each as a dependency boundary, so each component tracks its own dependencies. So, this is in fact an advantage when you have a huge component tree, because you can have the data dependencies change.

[00:01:20]
Your data may be mutated from anywhere, but because each component tracks its own dependencies inside a big component tree, we precisely know which components are affected by arbitrary data manipulation. So, we never over render, we don't have the problem of having too many components being rerendered unnecessarily, because we have a precise dependency tracking system in place.

[00:01:46]
So, [COUGH] that's an architectural advantage that gets rid of some sort of optimization efforts that you need to do in a more top down based rendering model that React uses. But we also pay the overhead of converting these data into getters and setters. This has a slight overhead as well.

[00:02:08]
So it's not like a silver bullet, there's pros and cons on both sides, but in general both approaches are viable and people have built huge apps in both React and View, so, in practice, the difference would only show up in very extreme cases.