八年前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,想补概念、练手或者贡献代码,都可以去看看。