Skip to content

Instantly share code, notes, and snippets.

@jmlsf

jmlsf/reagent-render-remount.md

Last active February 27, 2018 03:06
Download ZIP

Revisions

  1. jmlsf revised this gist Feb 27, 2018. 1 changed file with 0 additions and 1 deletion.
    1 change: 0 additions & 1 deletion reagent-render-remount.md
    View file
    Original file line number Diff line number Diff line change
    @@ -19,7 +19,6 @@
    (print "form3-child-component being rendered")
    [:div num])})))

    ;;
    (defn test-component []
    (print "test-component being rendered")
    [:div
  2. jmlsf revised this gist Feb 27, 2018. 1 changed file with 11 additions and 3 deletions.
    14 changes: 11 additions & 3 deletions reagent-render-remount.md
    View file
    Original file line number Diff line number Diff line change
    @@ -11,11 +11,15 @@
    (let [pointless-atom (reagent/atom nil)]
    (reagent/create-class
    {:component-did-mount
    (fn [this] (println "form3-child-component being mounted"))
    (fn [this] (print "form3-child-component being mounted"))
    :component-will-unmount
    (fn [this] (print "form3-child-component being unmounted"))
    :reagent-render
    (fn [num]
    (print "form3-child-component being rendered")
    [:div num])})))


    ;;
    (defn test-component []
    (print "test-component being rendered")
    [:div
    @@ -35,10 +39,14 @@
    test-component being rendered
    form2-child-component being created
    form2-child-component being rendered
    form3-child-component being rendered
    form3-child-component being mounted
    form3-child-component being unmounted
    test-component being rendered
    form2-child-component being created
    form2-child-component being rendered
    form3-child-component being rendered
    form3-child-component being mounted
    ```



  3. jmlsf created this gist Feb 27, 2018.
    44 changes: 44 additions & 0 deletions reagent-render-remount.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,44 @@
    ```clojure
    (defn form2-child-component [num]
    (print "form2-child-component being created")
    (let [pointless-atom (reagent/atom nil)]
    (print "form2-child-component being rendered")
    (fn [num]
    [:div num])))

    (defn form3-child-component [num]
    [num]
    (let [pointless-atom (reagent/atom nil)]
    (reagent/create-class
    {:component-did-mount
    (fn [this] (println "form3-child-component being mounted"))
    :reagent-render
    (fn [num]
    [:div num])})))

    (defn test-component []
    (print "test-component being rendered")
    [:div
    [form2-child-component 2]
    [form3-child-component 3]])

    (defn mount-root []
    (reagent/render [#'test-component]
    (.getElementById js/document "app"))
    (js/setTimeout (fn []
    (reagent/render [#'test-component]
    (.getElementById js/document "app")))
    1000))
    ```
    In console:
    ```
    test-component being rendered
    form2-child-component being created
    form2-child-component being rendered
    form3-child-component being mounted
    test-component being rendered
    form2-child-component being created
    form2-child-component being rendered
    form3-child-component being mounted
    ```