如何使用react 18和shadow-cljs reload重新渲染reagent ui？

Question

当我们保存文件和shadow-cljs重新加载时如何重新渲染整个试剂树？

• React 18 有新的 createRoot api
• 甚至之前 - 如果没有任何改变，调用 render 没有任何效果

Answer 1

使用 React v18，您只需创建一次根节点。之后，您可以.render()从中调用该函数来（重新）渲染您的应用程序。

此外，您还需要配置一个函数/行为来告诉 Shadow-cljs 在重新加载期间应该执行哪些操作。

这是一个完整的示例，取自此处https://github.com/schnaq/cljs-reagent-template

(ns playground
  (:require ["react-dom/client" :refer [createRoot]]
            [goog.dom :as gdom]
            [reagent.core :as r]))

(defn- main []
  [:main.container.mx-auto
   [:h1 "Welcome to your app"]])

;; -----------------------------------------------------------------------------

(defonce root (createRoot (gdom/getElement "app")))

(defn init
  []
  (.render root (r/as-element [main])))

(defn ^:dev/after-load re-render
  []
  ;; The `:dev/after-load` metadata causes this function to be called
  ;; after shadow-cljs hot-reloads code.
  ;; This function is called implicitly by its annotation.
  (init))

Shadow-cljs 配置为从 Playground/init 调用 init 函数。

;; shadow-cljs.edn
{...
 :builds {:frontend {:modules {:main {:init-fn playground/init}}}}}