一个开源项目想改变你学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，想补概念、练手或者贡献代码，都可以去看看。