用途:这是一份面向 React Three Fiber(R3F)及 Poimandres 生态的最佳实践参考,适用于编写、审查或优化 R3F 代码时查阅。内容包含 70+ 条规则,分 12 个类别并按影响优先级排序。
覆盖生态:@react-three/fiber、@react-three/drei、@react-three/postprocessing、@react-three/rapier、zustand、leva。
规则类别与优先级:性能与重渲染(CRITICAL,前缀 perf-)、useFrame 与动画(CRITICAL,frame-)、组件模式(HIGH,component-)、Canvas 与初始化(HIGH,canvas-)、Drei 辅助组件(MEDIUM-HIGH,drei-)、加载与 Suspense(MEDIUM-HIGH,loading-)、状态管理(MEDIUM,state-)、事件与交互(MEDIUM,events-)、后处理(MEDIUM,postpro-)、物理 Rapier(LOW-MEDIUM,physics-)、Leva 调试 GUI(LOW,leva-)。
关键要点:绝不在 useFrame 中调用 setState,应直接修改 ref;使用 Zustand 选择器而非整个 store,连续值可用瞬态订阅;用 useGLTF 加载模型并配合 useGLTF.preload 预加载;异步组件用 Suspense 包裹;用 r3f-perf 监控性能;切换可见性而非重新挂载组件。
使用方式:可阅读各规则文件(如 rules/perf-never-set-state-in-useframe.md、rules/drei-use-gltf.md、rules/state-zustand-selectors.md),完整指南见 ../R3F_BEST_PRACTICES.md。
限制:资料未提供安装命令、收费方式、平台支持或效果数据,暂未提供。