程序员react 使用如何避坑
状态管理陷阱
避免在组件中直接修改state，应使用setState或函数式更新。对于复杂状态逻辑，考虑使用useReducer替代多个useState调用。状态提升要合理，避免过度提升导致组件树臃肿。
性能优化要点
使用React.memo包裹纯函数组件减少重复渲染。依赖项数组需精确填写，避免在useEffect中使用不稳定依赖。大列表渲染务必添加key属性，并优先使用Virtualized List技术。
副作用处理规范
清理useEffect中的订阅和定时器，返回清理函数。避免在渲染函数中直接执行副作用操作，异步操作应当放在useEffect或事件处理函数中。多个相关副作用建议合并处理。
Hooks使用准则
自定义Hook命名必须使用use前缀。不要在循环或条件语句中调用Hook，保持调用顺序稳定。将复杂逻辑抽离为自定义Hook，但避免过度抽象导致可读性下降。
不可变数据原则
使用扩展运算符或immer等库处理嵌套对象更新。直接修改prevState会导致性能问题和渲染异常。对于数组操作，优先使用map/filter而非splice/push等突变方法。
组件设计模式
避免创建"上帝组件"，合理拆分关注点。容器组件与展示组件分离，业务逻辑与UI解耦。高阶组件和Render Props需谨慎使用，优先考虑Hook方案。
类型安全实践
TypeScript项目中需正确定义组件props类型。为事件处理函数标注精确的参数类型，避免使用any。为context提供完整的类型定义，创建时声明默认值类型。
测试驱动开发
为自定义Hook编写测试用例，验证各种边界条件。使用@testing-library/react测试组件交互行为。快照测试需配合代码审查，避免盲目更新快照。
常见错误防范
dangerouslySetInnerHTML必须经过XSS过滤。服务端渲染时注意useEffect仅在客户端执行。动态导入组件需提供加载状态处理，防止空白闪烁。
