React前端状态管理代码审查细则

React前端状态管理代码审查细则一、审查目的与范围（一）明确审查目标。确保React前端状态管理代码符合性能、可维护性及安全性标准。（二）界定审查范围。覆盖Redux、ContextAPI、MobX等主流状态管理方案的代码实现，包括但不限于store配置、action设计、selector编写及组件调用。二、代码结构规范（一）模块化设计。1.store文件应独立封装，避免与业务逻辑混编。2.action类型需统一命名空间，禁止使用随机字符串。3.selector函数必须遵循单一职责原则，输出结果需缓存优化。（二）命名规范。1.action类型命名采用"模块/行为"格式，如"counter/INCREMENT"。2.selector命名需体现数据来源，如"selectUserDetails（userId）"。3.reducer内部action类型需加前缀区分，如"USER_SET_INFO"。（三）文件组织。1.每个组件对应的状态管理代码应放在同名目录下。2.工具型selector和action可抽离至"utils/selectors"和"utils/actions"目录。3.状态切片命名需反映业务边界，如"authSlice.js"、"productSlice.js"。三、性能优化标准（一）渲染优化。1.避免不必要的组件重渲染，使用React.memo或useMemo封装计算密集型selector。2.复杂状态变更应采用"分片更新"策略，仅触发依赖变更的组件。3.ContextAPI使用时需控制子树数量，超过5级嵌套建议改用Redux。（二）内存管理。1.selector计算结果必须使用useCallback缓存，避免重复执行。2.异步action处理需配合cleanup逻辑，防止订阅堆积。3.大型状态树应采用分片策略，如"counterReducer"和"authReducer"合并时需拆分。（三）网络优化。1.异步action必须使用thunk或async/await封装，避免.then链式调用。2.API请求状态需完整管理，包含loading、error、success三种状态。3.图片资源加载应配合状态管理，实现懒加载和缓存控制。四、可维护性要求（一）代码清晰度。1.reducer纯函数需遵循immutability原则，使用Object.assign或...spread操作。2.actioncreator应返回完整对象，避免使用字符串字面量。3.selector链式调用超过3层需重构，如"selectOrderSummary（orderId）"。（二）文档规范。1.复杂selector需添加JSDoc注释说明依赖关系。2.action类型需在注释中说明用途，如"//登录操作"。3.状态切片应附带设计文档，说明数据流和变更触发条件。（三）测试覆盖。1.每个action必须编写单元测试，覆盖正常和异常场景。2.selector测试需验证缓存逻辑，确保重复输入产生相同输出。3.状态切片测试应模拟完整数据流，验证边界条件处理。五、安全防护措施（一）输入验证。1.所有来自组件的输入必须通过reducer验证，禁止直接修改store。2.异步action中的参数需进行类型检查，如"validateLoginPayload（payload）"。3.危险操作（如delete）必须通过action封装，避免直接调用API。（二）权限控制。1.权限检查应放在action中，如"checkAdminPermission（userId）"。2.状态切片需标记敏感数据范围，如"private:true"。3.跨组件调用需验证权限，防止越权操作。（三）异常处理。1.异步action必须捕获所有异常，避免组件直抛错误。2.状态更新失败需回滚到初始状态，并记录错误日志。3.网络错误需区分重试时机，如"retryCount<3"时自动重试。六、审查执行流程（一）静态检查。1.使用ESLint插件"redux/eslint-plugin"执行规范检查。2.配置prettier自动格式化，保持代码风格统一。3.通过SonarQube扫描潜在性能问题。（二）动态测试。1.使用ReduxDevTools监控状态变更，验证action触发顺序。2.模拟组件调用，测试渲染性能和更新延迟。3.模拟异常场景，验证错误处理逻辑。（三）代码评审。1.每次提交必须经过至少2人交叉评审。2.评审重点包括action设计、selector效率及边界条件处理。3.评审意见需在GitLab中留痕，问题未解决前禁止合并。七、附则说明（一）版本适配。1.所有状态管理代码必须适配最新React版本。2.兼容性测试需覆盖IE11和最新Chrome。3.使用Babel插件"@babel/plugin-proposal-class-properties"确保语法兼容。（二）变更管理。1.状态结构变更必须通过PR流程，附带迁移方案。2.action类型变更需更新所有依