Add section on externally managed nodes

docs-src/0.7/src/essentials/advanced/breaking_out.md

@@ -73,3 +73,18 @@ DemoFrame {
     breaking_out::Downcast {}
 }
 ```
+
+## Externally Managed Nodes
+
+Dioxus uses diffs between templates to determine which elements have changed in the DOM and applies those changes to the existing DOM. A great post about this can be found [here](https://dioxuslabs.com/blog/templates-diffing/). In short, what these means for managing elements outside of Dioxus with Javascript is, one must be careful that the diffing process does not overwite the changes or if so, this is accounted for.
+
+An `rsx` block creates a tree of static and dynamic elements. If the structure of this tree changes then everything underneath it is replaced as well.
+
+```rust, no_run
+{{#include ../docs-router/src/doc_examples/breaking_out.rs:template_diffing}}
+```
+```inject-dioxus
+DemoFrame {
+    breaking_out::TemplateDiffing {}
+}
+```

packages/docs-router/src/doc_examples/breaking_out.rs

@@ -4,6 +4,7 @@ pub use eval::Eval;
 pub use onmounted_::OnMounted;
 pub use use_effect::Canvas;
 pub use web_sys::WebSys;
+pub use template_diffing::TemplateDiffing;
 
 mod eval {
     use super::*;
@@ -143,3 +144,30 @@ mod onmounted_ {
     }
     // ANCHOR_END: onmounted
 }
+
+mod template_diffing {
+    use super::*;
+
+    // ANCHOR: template_diffing
+    pub fn TemplateDiffing() -> Element {
+        let mut signal = use_signal(|| false);
+
+        rsx! {
+            div { style: if *signal.read() { "background-color:lightcoral;" } else { "background-color:lightsteelblue;" },
+                "Only the style property of the parent div is relaced"
+            }
+            if *signal.read() {
+                div { style: "background-color:lightcoral;", "The entire parent div is replaced" }
+            } else {
+                div { style: "background-color:lightsteelblue;", "The entire parent div is replaced" }
+            }
+            button {
+                onclick: move |_| {
+                    signal.set(!signal());
+                },
+                "Click me and watch changes in the DOM with your browsers dev tools"
+            }
+        }
+    }
+    // ANCHOR_END: template_diffing
+}