一個開源項目想改變你學React的方式

八年前React剛火的時候，學它的路徑幾乎沒變過：看文檔、刷視頻、搭個Todo應用。但真到了項目里，useCallback該什么時候用、useDeferredValue和useTransition有什么區別，很多人還是懵的。React Dojo的作者顯然也踩過這個坑——所以他干脆建了個平臺，專門解決"學了不會用"的問題。

這個平臺的核心邏輯寫在明面上：React是練出來的，不是讀出來的。每個概念配三件套：簡明解釋、可運行的交互沙盒、真實編碼練習。沒有手把手教程，也不給捷徑，就是讓你直接跟代碼硬碰硬。

目前React Dojo覆蓋了27個概念、15道練習、10套測驗，分成6個板塊。狀態與內存這塊包括useState、useReducer、useRef、useOptimistic、useActionState；同步機制有useEffect、useLayoutEffect、useEffectEvent；性能優化聚焦useMemo、useCallback和memo；并發特性涵蓋useTransition、useDeferredValue、Suspense和use；組件組合涉及useContext、createPortal、lazy、useId、useFormStatus；最后還有面試專區，聊虛擬DOM、高階組件、屬性透傳、受控與非受控組件這些經典考點。

練習難度從基礎到進階：計數器、開關、取色器、秒表屬于入門；主題切換、表單驗證、無限滾動算中等；防抖搜索、拖拽、懶加載彈窗則是高階挑戰。每道題都要求你真正應用所學，而不是復制粘貼。

測驗按難度分級，覆蓋各類場景。更有價值的是自定義Hooks庫——15個社區貢獻的復用Hooks，按功能分類。狀態類有useLocalStorage、usePrevious、useToggle、useCounter；DOM操作包括useMediaQuery、useClickOutside、useWindowSize、useHover、useEventListener、useIntersectionObserver、useOnlineStatus；異步處理提供useFetch；工具類則有useDebounce、useClipboard、useInterval。每個Hook帶描述、源碼和交互沙盒，可直接復制使用，也歡迎提交自己的作品。

最新上線的開發者目錄支持GitHub登錄，聚集了一批React學習者。平臺做了不少體驗優化：鍵盤快捷鍵快速導航、英西雙語支持、移動端適配（42%用戶來自手機）、全站搜索、默認暗黑模式。技術棧選的是Next.js、TypeScript、Drizzle ORM、Neon（PostgreSQL）和Shadcn UI。

項目完全開源，貢獻者來自烏拉圭、阿根廷、美國、哥倫比亞和西班牙。地址是react-dojo.vercel.app，想補概念、練手或者貢獻代碼，都可以去看看。