Summary
In this chapter, we went over how Blazor handles the DOM manipulation process using an abstraction layer called RenderTree between the DOM and our components. We went over how things work inside Blazor, then built a component using purely C# with RenderTreeBuilder. Finally, we saw a new directive called @key that helps us have a more efficient rendering process and more predictable output when rendering collections.
So, after building components in the previous chapter, this one has completed the picture and has fed our curiosity. But the most important takeaways of this chapter are as follows:
- Blazor uses
RenderTreeto track changes in the UI, aggregate them, and apply them to the DOM efficiently. RenderTreedoesn’t rerender the markup every time an update is made. It only updates what has changed in the UI.- Use
@keywhenever you render a list of items, for example, within aforeachloop, to have a better-controlled rendering process.
The next...