Talk about reconciler, life cycles, and custom-renderer. The idea is to introduce how to create a custom renderer and how the reconciler handles elements, components, and instances.
React provides a declarative API so that you don’t have to worry about exactly what changes on every update. Reconciliation is responsible for doing that.
Reconciliation is the React’s “diffing” algorithm. It makes component updates more predictable. When a component's state changes, React has to calculate if it is necessary to update the instances.
https://reactjs.org/docs/reconciliation.html className="before" title="noice" /> Elements of The Same Type className="after" title="noice" /> By comparing these two elements, Reconciler specifies what is going to be changed. In this case, React-DOM knows how to only modify the className on the underlying DOM node.
so.. reconciliation: is the algorithm React uses to diff one tree with another to determine which parts need to be changed. update: A change in the data used to render a React app. Usually the result of setState. Eventually results in a re-render.
scheduling: the process of determining when work should be performed. work: Any computations that must be performed. Work is usually the result of an update (e.g. setState).
This allow us to: - pause work and come back to it later. - assign priority to different types of work. - reuse previously completed work. - abort work if it's no longer needed.
React Renderers understand React component- driven architecture and it should provide such a declarative and composable abstraction as React. "Learn Once, Write Anywhere"
github.com/chentsulin/awesome-react-renderer React DOM React Ape React TV React Titanium React Hardware React Native DOM React Native React Blessed React Gibbon React PDF Proton Native PDF Documents DOM Structure Netflix’s Internal renderer (WebGL) Canvas DOM Structure Terminal interface (using Blessed) Renderer for Appcelerator® Titanium™ SDK Build firmata-based hardware applications Port of React Native to the web Build native mobile apps* Build native desktop apps
import Reconciler from 'react-reconciler'; const SongReconciler = Reconciler(hostConfig); We will create a reconciler instance using Reconciler which accepts a host config object.
createInstance, appendInitialChild, createTextInstance, finalizeInitialChildren, getPublicInstance, prepareForCommit, prepareUpdate, resetAfterCommit, resetTextContent, getRootHostContext, getChildHostContext, scheduleAnimationCallback, scheduleDeferredCallback, useSyncScheduling, now, shouldSetTextContent, mutation […] Also, I challenge Ken Wheeler to remix this into a song.
const SongReconciler = Reconciler({ createInstance(type, props) {}, // e.g. DOM renderer returns a DOM node supportsMutation: true, // it works by mutating nodes mutation: {}, // mutation operations appendChild(parent, child) { // e.g. DOM renderer would call .appendChild() here }, … });