Virtual DOM and React¶
JupyterLab is based on PhosphorJS,
which provides a flexible Widget
class that handles the following:
- Resize events that propagate down the Widget hierarchy.
- Lifecycle events (
onBeforeDetach
,onAfterAttach
, etc.). - Both CSS-based and absolutely positioned layouts.
In situations where these features are needed, we recommend using
Phosphor’s Widget
class directly.
The idea of virtual DOM rendering, which became popular in the React community, is a very elegant and efficient way of rendering and updating DOM content in response to model/state changes.
Phosphor’s Widget
class integrates well with ReactJS and we are now
using React in JupyterLab to render leaf content when the above
capabilities are not needed.
An example of using React with Phosphor can be found in the launcher of JupyterLab.