8 The reconciliation algorithm: Patching the DOM
This chapter covers
- Implementing the
patchDOM()function - Using the
objectsDiff()function to find the differences in attributes and styles - Using the
arraysDiff()function to find the differences between CSS classes - Using the
arraysDiffSequence()function to find the differences between virtual DOM children - Using the Document API to patch DOM changes
In chapter 7, you saw how the reconciliation algorithm works in two phases: finding the differences between two virtual Document Object Model (DOM) trees and patching those differences in the real DOM. You implemented the three key functions to find differences between two objects or two arrays: objectsDiff(), arraysDiff(), and arraysDiffSequence(). In this chapter, you’ll use these functions to implement the reconciliation algorithm inside the patchDOM() function. patchDOM() finds the differences between two virtual DOM trees (the one that’s currently rendered and the one after the state has changed) and patches the real DOM accordingly.