--- title: "React useReducedMotion Hook：尊重 prefers-reduced-motion（2026）" description: "一篇實用的 useReducedMotion 上手指南：讀取作業系統層級的 prefers-reduced-motion 設定，為前庭功能障礙使用者停用或簡化動畫，並搞清楚 WCAG 真正要求你拿掉的是哪些動效。只是 useMediaQuery 上的一行封裝，SSR 安全，且能即時響應系統設定的變化。" date: 2026-07-08 canonical: https://reactuse.com/zh-Hant/blog/react-usereducedmotion-hook/ --- # React useReducedMotion Hook：尊重 prefers-reduced-motion（2026） 一張鋪滿整個螢幕的視差首圖。一個自動捲動的輪播圖。一個又轉又彈又跳的載入動畫。對大多數使用者來說這只是「夠現代」。但對有前庭功能障礙、先兆偏頭痛或梅尼爾氏症的使用者來說，這可能會引發真實的噁心、暈眩，或是嚴重到直接關掉頁面的頭痛——這不是「不爽」，而是實實在在的生理症狀。這正是為什麼每個主流作業系統都內建「減弱動態效果」開關（iOS 從 2013 年起、macOS、Windows、Android、GNOME），也是為什麼 CSS 把它暴露給了 Web，也就是 [`prefers-reduced-motion`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) 媒體特性。 `useReducedMotion` 就是把這個設定讀進 React state 的 hook——響應式的，使用者一切換系統開關就立刻更新；也是安全的，不會在 SSR 期間碰 `window`。本文講清楚真實的 [`@reactuses/core`](https://reactuse.com) API、`prefers-reduced-motion` 到底要求你拿掉什麼動效（它比「完全不能動」要窄得多），以及你會真正用到的三種整合模式。 ## 最樸素的寫法 最直覺的做法是在 effect 裡手寫 `window.matchMedia`： ```tsx function Hero() { const [reduce, setReduce] = useState(false); useEffect(() => { const mql = window.matchMedia('(prefers-reduced-motion: reduce)'); setReduce(mql.matches); // 🐛 忘了這行，值就再也不會更新了 const onChange = () => setReduce(mql.matches); mql.addEventListener('change', onChange); return () => mql.removeEventListener('change', onChange); }, []); return
; } ``` 實務上這會以三種方式出問題。第一，`window` 在伺服器端不存在，所以這整段一旦跑在 Next.js、Remix 或 Astro 上就需要守衛——而人們很容易圖方便，在渲染邏輯裡到處撒 `typeof window !== 'undefined'`，而不是把它收斂進一個 effect。第二，很多人只用 `mql.matches` 初始化一次 state，然後乾脆省略 `change` 監聽——這在大多數情況下沒問題，直到使用者在分頁開著的時候*真的*切換了這個設定（筆電從電池切到插電，在某些系統上就會觸發它，而這一點 QA 幾乎從不測）。第三，每個關心動效偏好的元件都在重寫同一套 `matchMedia` + 監聽器 + 清理的舞步。 ## API [`useReducedMotion`](https://reactuse.com/browser/usereducedmotion/) 只是一次呼叫： ```ts const prefersReducedMotion = useReducedMotion(defaultState?: boolean): boolean; ``` - **`defaultState`** —— 可選，預設 `false`。這是 SSR 期間以及客戶端首次渲染時（媒體查詢還來不及求值之前）回傳的值。 - **回傳值** —— 一個從 `defaultState` 開始的布林值，會在使用者改變作業系統層級的動效偏好時即時更新。不用手寫監聽器，也沒有清理邏輯要忘記。 在底層，實作真的就這麼簡單——整個實作就是對 [`useMediaQuery`](https://reactuse.com/browser/usemediaquery/) 的一行呼叫： ```ts export function useReducedMotion(defaultState?: boolean) { return useMediaQuery('(prefers-reduced-motion: reduce)', defaultState); } ``` 真正做事的是 `useMediaQuery`——它在 effect 內部建構 `MediaQueryList`（所以渲染期間和伺服器端都不會碰 `matchMedia`），並替你訂閱它的 `change` 事件。`useReducedMotion` 只是把查詢字串釘死了。這就是它的全部價值：你每次都能拿到正確、拼寫正確、接線正確的那個查詢。 ## 模式一：關掉單一動畫 最小的用法——用這個旗標控制單一 CSS transition 或類別名稱： ```tsx import { useReducedMotion } from '@reactuses/core'; function Hero() { const reduce = useReducedMotion(); return (

Welcome

); } ``` `.hero--parallax` 帶著那個捲動聯動的 `transform: translateY(...)` 動畫；基礎的 `.hero` 類別沒有。當 `reduce` 為 `true` 時，根本沒有任何 JS 動畫邏輯在跑——你不只是跳過了*視覺上*的動效，也跳過了驅動它的那個捲動監聽器或 `requestAnimationFrame` 迴圈，這在低階裝置上同樣是實打實的效能收益。 ## 模式二：接入 Framer Motion / GSAP 如果你在用動畫函式庫，hook 的值可以直接接進它的 duration/transition 設定，而不是切換類別名稱： ```tsx import { motion } from 'framer-motion'; import { useReducedMotion } from '@reactuses/core'; function Card({ children }: { children: React.ReactNode }) { const reduce = useReducedMotion(); return ( {children} ); } ``` 注意這裡並沒有拿掉淡入效果——`opacity` 不屬於 `prefers-reduced-motion` 想管的那類動效（見下一節）。它拿掉的是*位移*：`reduce` 為真時 `y` 永遠不動，過渡也是瞬時的，所以卡片只是「出現」而已。Framer Motion 自己也帶了一個 [`useReducedMotion`](https://www.framer.com/motion/use-reduced-motion/) hook，做的是同樣的 `matchMedia` 讀取——如果你已經在用 `@reactuses/core` 處理其他一切，用這個 hook 能讓你保持單一真相來源，而不是兩個函式庫各自獨立讀同一個媒體查詢。 ## 模式三：一個全域開關，而不是 N 處判斷 一旦設計系統裡有幾十個帶動畫的元件，逐一用 `reduce ? ... : ...` 判斷的寫法會很難擴展。真正能擴展的模式是：在靠近應用程式根部的地方讀一次這個 hook，用它驅動一個 `data-` 屬性，讓全域樣式表來響應。 ```tsx function App({ children }: { children: React.ReactNode }) { const reduce = useReducedMotion(); return (
{children}
); } ``` ```css [data-motion="reduce"] *, [data-motion="reduce"] *::before, [data-motion="reduce"] *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } ``` 這和那個經典的、[直接建在媒體查詢上的 CSS 萬用選擇器規則](https://web.dev/prefers-reduced-motion/)是同一個形狀——差別是這裡的 `data-motion` 屬性由 React state 驅動，所以同一個旗標既能給你的 JS 動畫邏輯用（模式二），也能給這裡的 CSS 用，不用把媒體查詢讀兩遍，也不用擔心兩邊會不同步。 ## 「減弱」不等於什麼 `prefers-reduced-motion: reduce` 不是「停用一切動效」。[WCAG 2.3.3](https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions.html) 和各平台廠商真正針對的是**大範圍、非必要的動效**：視差捲動、自動播放的背景影片、縮放/平移式的首圖動畫、自動輪播、裝飾性的彈跳/旋轉載入動畫。而那些承載資訊或確認互動的動效——核取方塊的打勾動畫、按鈕短暫的按壓狀態、指示「仍在載入」的載入指示器、拖放回饋——一般可以保留，理想情況下只是更短、更平靜一些。把*每一個*像素的移動都拿掉，包括一個 `:hover` 的顏色過渡，並不是這個設定想要的，反而可能讓介面顯得像是壞了，而不是變得無障礙。拿不準的時候可以這樣判斷：「這個動效是不是鋪滿了螢幕的大部分區域，或是在沒有使用者操作的情況下持續執行？」——這才是該拿掉的那類動效。 還有一點值得知道：如果你只需要在 CSS 裡用它，從來不需要在 JS 邏輯裡用，Tailwind 的 [`motion-reduce:`](https://tailwindcss.com/docs/animation#accounting-for-reduced-motion-preferences) 變體（或是一段普通的 `@media (prefers-reduced-motion: reduce)` 規則）就能零 JavaScript 搞定。真正需要用到這個 hook 的場景，是這個判斷需要深入到渲染或 effect 邏輯裡的時候——比如在自動播放的 `