test

src/constant/route.ts

@@ -3,6 +3,7 @@ export enum RoutePath {
   home = '/',
   scene = '/scene',
   example = '/example',
+  test = '/test'
 }
 
 export const ViewHome = RoutePath.scene

src/router/config.ts

@@ -45,6 +45,10 @@ export const routesConfig: RoutesConfig = [
       }
     ]
   },
+  {
+    path: RoutePath.test,
+    element: () => import('views/test')
+  }
 ]
 
 

src/utils/only-open.ts

@@ -2,6 +2,7 @@
 // let cacheWin: Window | null
 
 export const onlyOpenWindow = (url: string | URL) => {
+  console.log('open', url)
   window.open(url)
 
   // if (cacheWin && !cacheWin.closed) {

src/views/test/index.tsx

@@ -0,0 +1,32 @@
+import { useEffect, useState } from "react"
+
+const TP = (props: { children: string }) => {
+  useEffect(() => {
+    console.log(props.children, 'mount')
+    return () => console.log(props.children, 'unmount')
+  }, [props.children])
+
+  return <p>{ props.children }</p>
+}
+
+const TP1 = () => <TP children="111" />
+const TP2 = () => <TP children="222" />
+const TP3 = () => <TP children="333" />
+const TP4 = () => <TP children="444" />
+
+const Test = () => {
+  const [show, setShow] = useState(false)
+  const children = show ? [ TP1, TP2, TP3 ] : [ TP4, TP1, TP2, TP3 ]
+
+  return (
+    <>
+      <button onClick={() => setShow(show => !show)}>切换</button>
+      { show && <TP4 /> }
+      <TP1 />
+      <TP2 />
+      <TP3 />
+    </>
+  )
+}
+
+export default Test