Struct dioxus_core::virtual_dom::VirtualDom

pub struct VirtualDom { /* fields omitted */ }

An integrated virtual node system that progresses events and diffs UI trees. Differences are converted into patches which a renderer can use to draw the UI.

Implementations

impl VirtualDom

pub fn new(root: FC<()>) -> Self

Create a new instance of the Dioxus Virtual Dom with no properties for the root component.

This means that the root component must either consumes its own context, or statics are used to generate the page. The root component can access things like routing in its context.

pub fn new_with_props<P: 'static>(root: FC<P>, root_props: P) -> Self

Start a new VirtualDom instance with a dependent props. Later, the props can be updated by calling “update” with a new set of props, causing a set of re-renders.

This is useful when a component tree can be driven by external state (IE SSR) but it would be too expensive to toss out the entire tree.

pub fn rebuild(&mut self) -> Result<EditList<'_>>

Performs a full rebuild of the virtual dom, returning every edit required to generate the actual dom.

pub fn progress_with_event(
    &mut self,
    event: EventTrigger
) -> Result<EditList<'_>>

This method is the most sophisticated way of updating the virtual dom after an external event has been triggered.

Given a synthetic event, the component that triggered the event, and the index of the callback, this runs the virtual dom to completion, tagging components that need updates, compressing events together, and finally emitting a single change list.

If implementing an external renderer, this is the perfect method to combine with an async event loop that waits on listeners.

Note: this method is not async and does not provide suspense-like functionality. It is up to the renderer to provide the executor and handlers for suspense as show in the example.

let (sender, receiver) = channel::new();
sender.send(EventTrigger::start());

let mut dom = VirtualDom::new();
dom.suspense_handler(|event| sender.send(event));

while let Ok(diffs) = dom.progress_with_event(receiver.recv().await) {
    render(diffs);
}

pub fn pop_event(&self) -> Option<LifecycleEvent>

Pop the top event of the internal lifecycle event queu

pub fn update_props<P: 'static>(
    &mut self,
    new_props: P
) -> Result<LifecycleEvent>

With access to the virtual dom, schedule an update to the Root component’s props. This generates the appropriate Lifecycle even. It’s up to the renderer to actually feed this lifecycle event back into the event system to get an edit list.