获课：xingkeit.top/16357/

写好 React 业务：Hooks、Redux、Antd 常见问题与项目实战

在当下 React 生态中，Hooks、Redux 和 Ant Design 几乎已经成为中后台项目的“标准三件套”。然而，很多团队虽然用上了这些工具，代码却依然混乱、难以维护。本文将结合实际项目经验，聊聊这三者使用中的常见“坑”与实战策略，希望能帮你写出更健壮的业务代码。

一、Hooks：逻辑复用的双刃剑

Hooks 的出现让函数组件拥有了状态和副作用能力，但滥用也会带来性能与可读性问题。

1. 依赖地狱与闭包陷阱：useEffect 和 useCallback 的依赖数组是初学者最容易犯错的地方。要么遗漏依赖导致状态过期，要么滥用 useCallback 包裹每一个函数，造成不必要的性能开销。实战中，我们应遵循“用到什么就声明什么依赖”的原则，并善用 useReducer 管理复杂状态，以减少因状态拆分过细带来的依赖链式触发。

2. 臃肿的巨型组件：将 UI 逻辑、数据请求、状态管理全部塞在一个组件里是常见坏味道。正确的做法是利用自定义 Hooks 进行逻辑抽离。例如，将列表查询的 loading、data、pagination 封装成 useTableData，将表单校验逻辑封装成 useFormValidation。这能让组件只负责渲染，逻辑层保持纯净且易于单元测试。

3. useMemo 的过度优化：并非所有计算都需要缓存。只有当计算成本高或引用类型作为子组件依赖时，才考虑 useMemo。过早优化反而会增加内存开销和代码复杂度。

二、Redux：状态管理的“瘦身”之道

Redux 提供了强大的全局状态管理能力，但如果不加节制，会让 Store 变得臃肿不堪。

1. “面子”与“里子”不分：很多团队将UI 状态（如 Modal 显隐、Loading）和业务数据（如用户信息、列表数据）一股脑存入 Redux。这其实是反模式。UI 状态应尽量保持在组件内部或通过 Context 传递，只有真正需要跨组件共享或需要缓存的数据才放入 Redux。这能显著减少不必要的 Redux 连接和重渲染。

2. 冗余的样板代码：传统的 action-types、actions、reducers 分文件写法让简单需求变得沉重。Redux Toolkit 已成为官方推荐，其 createSlice 方法将 reducer 和 action 合并定义，配合 createAsyncThunk 处理异步，可减少 60% 以上的模板代码。

3. Selector 的性能隐患：在 useSelector 中直接返回对象（如 useSelector(state => ({ user: state.user, age: state.age }))）会导致每次状态变更都触发重渲染。必须配合 createSelector 创建记忆化的 Selector，只监听真正依赖的字段。

三、Antd：组件库的高效落地

Antd 提供了丰富的组件，但企业级应用往往需要二次封装。

1. Form 表单的性能痛点：当表单项超过 20 个时，Form.Item 的频繁更新会带来卡顿。实战中应使用 Form.useWatch 局部监听，避免整个表单重绘。对于复杂联动逻辑，优先使用 shouldUpdate 而非在 onValuesChange 中写大量的 if-else。

2. Table 与 Pagination 的耦合：将分页状态内置在 Table 的 pagination 属性中会导致状态管理混乱。建议将 current、pageSize 提升到父组件或 Hooks 中管理，通过 onChange 事件驱动数据刷新，这样能更灵活地处理筛选条件重置。

3. 样式覆盖与主题定制：直接修改 antd 类名是危险操作，升级时极易崩溃。应利用 ConfigProvider 的 theme 属性进行全局 Token 定制，或使用 CSS Modules 配合 :global 精确覆盖特定组件的样式。

四、项目实战：构建可维护的架构

基于以上问题，我们可以在项目中推行如下架构规范：

• 分层设计：Pages（页面组合） -> Components（纯展示组件） -> Hooks（业务逻辑） -> Services（API 接口） -> Store（Redux 状态）。依赖关系由外向内，内层不依赖外层。

• 错误边界：在每个独立的功能模块外包裹 ErrorBoundary，配合 Antd 的 Result 组件展示降级 UI，防止一个组件崩溃导致整个应用白屏。

• 请求缓存：对于非实时性数据，利用 Redux 的缓存机制减少重复请求。配合 createAsyncThunk 的条件判断，在数据未过期时直接返回缓存值。

结语

React 开发不仅仅是 API 的堆砌，更是工程化思维的体现。Hooks 让逻辑复用变得优雅，Redux 让数据流向变得清晰，Antd 让 UI 构建变得高效，但真正决定项目质量的，是开发者对这些工具边界感的把握。记住：全局状态要“瘦”，组件逻辑要“纯”，UI 交互要“稳”。希望这些实战经验能帮助你构建出更健壮、更易维护的 React 应用。