[ PROMPT_NODE_25254 ]
rerender-transitions
[ SKILL_DOCUMENTATION ]
## 使用 Transitions 处理非紧急更新
将频繁且非紧急的状态更新标记为 transitions，以保持 UI 的响应性。
**错误示例（每次滚动都会阻塞 UI）：**
tsx
function ScrollTracker() {
const [scrollY, setScrollY] = useState(0)
useEffect(() => {
const handler = () => setScrollY(window.scrollY)
window.addEventListener('scroll', handler, { passive: true })
return () => window.removeEventListener('scroll', handler)
}, [])
}
**正确示例（非阻塞更新）：**
tsx
import { startTransition } from 'react'
function ScrollTracker() {
const [scrollY, setScrollY] = useState(0)
useEffect(() => {
const handler = () => {
startTransition(() => setScrollY(window.scrollY))
}
window.addEventListener('scroll', handler, { passive: true })
return () => window.removeEventListener('scroll', handler)
}, [])
}
粤公网安备44030002003366号