14 Jul A look inside Rendering
If you want to take control of rendered nodes, write a custom View with a render function. The Flipper class is a simple example (and the RenderController is a complex example of this pattern)
How Famo.us renders:
- Every RenderNode has a render function which creates a renderSpec.
- The renderSpec contains information about a Modifier or Surface.
- The Modifier specs are used to calculate the final CSS properties.
- The Surface specs are coupled to DOM elements.
- Every tick of the Engine, the renderSpec is rendered using the RenderNode.commit function.
- The commit function uses the ElementAllocator (from the Context) to allocate/deallocate DOM elements. (Which actually recycles DOM nodes to conserve memory).
Therefore: Just return the correct renderSpec in your custom View, and famo.us will manage memory and performance for you.
- You don’t need to use the View class – an object with a render function will suffice. The Viewclass simply adds events and options which is a nice way to create encapsulated, reusable components.
- When a Surface element is allocated in the DOM, the “deploy” event is fired.
- When a Surface element is deallocated, the “recall” event is fired.