update

yisar · yisar · commit 8bc8bd799644 · 2025-12-12T15:14:40.000+08:00
diff --git a/demo/index.html b/demo/index.html
@@ -12,7 +12,7 @@
 
 <body>
   <div id="app"></div>
-  <script type="module" src="/src/concurrent.tsx"></script>
+  <script type="module" src="/src/time-slicing.tsx"></script>
   <script>
   </script>
 </body>
diff --git a/demo/src/time-slicing.tsx b/demo/src/time-slicing.tsx
@@ -1,6 +1,6 @@
-import { useState, useEffect, useRef, useMemo, useCallback, h, memo, render } from "../../src/index"
+import { useState, memo, h, render, useEffect } from "../../src/index"
 
-// 注入样式
+// 注入样式（包含CSS动画）
 const styleSheet = document.createElement("style")
 styleSheet.textContent = `
 .container {
@@ -11,6 +11,14 @@ styleSheet.textContent = `
   width: 10px;
   height: 10px;
   background: #eee;
+  animation: scaleAnimation 10s linear infinite;
+  transform: translateZ(0);
+}
+
+@keyframes scaleAnimation {
+  0% { transform: scaleX(0.476) scaleY(0.7); }  /* 1/2.1 ≈ 0.476 */
+  50% { transform: scaleX(0.905) scaleY(0.7); } /* (1+0.9)/2.1 ≈ 0.905 */
+  100% { transform: scaleX(0.476) scaleY(0.7); }
 }
 
 .dot {
@@ -23,32 +31,27 @@ styleSheet.textContent = `
 `
 document.head.appendChild(styleSheet)
 
-// Dot 组件
-const Dot = memo(({ x, y, size, text }) => {
+const SlowDot = memo(({ x, y, size, text }) => {
   const [hover, setHover] = useState(false)
-
-  const dotStyle = useMemo(() => {
-    const s = size * 1.3
-    return {
-      width: `${s}px`,
-      height: `${s}px`,
-      left: `${x}px`,
-      top: `${y}px`,
-      borderRadius: `${s / 2}px`,
-      lineHeight: `${s}px`,
-      background: hover ? "#ff0" : "#61dafb"
-    }
-  }, [x, y, size, hover])
-
-  const handleMouseEnter = useCallback(() => setHover(true), [])
-  const handleMouseLeave = useCallback(() => setHover(false), [])
+  const start = performance.now()
+  while (performance.now() - start < 2) {} // here
+
+  const dotStyle = {
+    width: `${size * 1.3}px`,
+    height: `${size * 1.3}px`,
+    left: `${x}px`,
+    top: `${y}px`,
+    borderRadius: `${size * 1.3 / 2}px`,
+    lineHeight: `${size * 1.3}px`,
+    background: hover ? "#ff0" : "#61dafb"
+  }
 
   return (
     <div
       className="dot"
       style={dotStyle}
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}
+      onMouseEnter={() => setHover(true)}
+      onMouseLeave={() => setHover(false)}
     >
       {hover ? `*${text}*` : text}
     </div>
@@ -58,7 +61,6 @@ const Dot = memo(({ x, y, size, text }) => {
 // Sierpinski 三角形组件
 const targetSize = 25
 
-// 同步计算
 const getValue = (key, kid) => {
   const number = kid.props.nodeValue
   return number
@@ -69,7 +71,7 @@ const SierpinskiTriangle = memo(({ x, y, s, children }) => {
 
   if (s <= targetSize) {
     return (
-      <Dot
+      <SlowDot
         x={x - targetSize / 2}
         y={y - targetSize / 2}
         size={targetSize}
@@ -95,39 +97,23 @@ const SierpinskiTriangle = memo(({ x, y, s, children }) => {
   )
 })
 
-// 主应用组件（移除 forwardRef）
+// 主应用组件
 const App = () => {
   const [seconds, setSeconds] = useState(0)
-  const [elapsed, setElapsed] = useState(0)
-  const startTime = useRef(new Date().getTime())
 
-  // 定时器逻辑
+  // 仅更新秒数
   useEffect(() => {
-    // 更新秒数
-    const secondInterval = setInterval(() => {
-      setSeconds((prev) => (prev % 10) + 1)
+    const timer = setInterval(() => {
+      setSeconds(prev => (prev % 10) + 1)
     }, 1000)
-
-    // 更新动画时间
-    const frameInterval = setInterval(() => {
-      setElapsed(new Date().getTime() - startTime.current)
-    }, 16)
-
-    return () => {
-      clearInterval(secondInterval)
-      clearInterval(frameInterval)
-    }
+    
+    return () => clearInterval(timer)
   }, [])
 
-  // 计算缩放变换
-  const t = (elapsed / 1000) % 10
-  const scale = 1 + (t > 5 ? 10 - t : t) / 10
-  const transform = `scaleX(${scale / 2.1}) scaleY(0.7) translateZ(0.1px)`
-
   return (
     <div>
       <h1>Fre Time Slicing</h1>
-      <div className="container" style={{ transform }}>
+      <div className="container">
         <SierpinskiTriangle x={0} y={0} s={1000}>
           {seconds}
         </SierpinskiTriangle>
