获课：xingkeit.top/16357/

现在的前端开发，早不是当年那个切个图、写点jQuery特效的时代了。尤其企业后台，那是公司的命脉系统，逻辑复杂、数据多、交互细、还动不动就要变需求。这就要求我们的开发模式，必须既灵活又稳固。React Hooks、Redux和Antd，恰好就构成了这样一个铁三角。

先说React Hooks。这东西的出现，可以说是改变了我们组织组件逻辑的方式。以前Class组件时代，逻辑复用靠高阶组件或render props，代码一复杂就变成“嵌套地狱”。Hooks，特别是useState和useEffect，让我们能把一个功能相关的数据、计算、副作用都放在一起，就像搭积木一样，内聚性非常好。

但Hooks的真正威力，在于自定义Hook。在企业后台，你会发现很多功能是跨组件、跨页面的。比如，一个列表页要请求数据、处理加载状态、做筛选排序；详情页也要请求数据、处理加载状态。你就可以把这一套逻辑抽成一个useFetchList或者useDetailData的自定义Hook。每个页面用这个Hook，自己管自己的状态，干净又卫生。这其实是把状态逻辑从UI里剥离出来，让组件更专注于怎么显示，而不是数据怎么来。

不过，Hooks管理的是组件内部的状态，或者说是“局部状态”。当状态需要跨组件、跨页面共享，或者被很多地方依赖时，光靠Hooks就有点力不从心了。这时候，Redux就该登场了。

很多人觉得Redux重，那是以前。现在的Redux Toolkit已经把样板代码简化了很多。在企业后台，Redux解决的核心问题是“确定性”和“可追踪性”。一个复杂的审核流程，用户点完按钮，数据怎么变的，中间经历了哪些异步操作，最后界面哪里更新了。有了Redux的全局store和devtools，这一切都清清楚楚，对排错和团队协作帮助巨大。

而且，有了Hooks，Redux用起来也更顺手了。useSelector和useDispatch这两个Hooks，让组件和Redux的连接变得特别自然。你可以在组件里像用本地状态一样去用全局状态，用useDispatch触发一个action，而具体的异步请求、数据处理逻辑，都封装在createAsyncThunk和extraReducers里。组件变“瘦”了，逻辑变“厚”了，职责也更清晰了。

最后是Antd，它是我们构建UI的“弹药库”。企业后台，就别自己造轮子了，Antd的Table、Form、Modal、Message这些组件，能解决掉你80%以上的常见需求。但光会用不行，得用得巧妙。

关键在于数据驱动视图。比如，一个表单，表单项的显示、隐藏、必填验证，往往取决于另一个下拉框选了什么。用Antd的Form.Item配合shouldUpdate或dependencies，再加上它提供的useWatch这个Hook，就能很优雅地实现这种联动，而不用去手动操作DOM。再比如表格，Antd的Table组件配合它的pagination、sorter、filter属性，本身就是一种“状态”。这些状态和你的数据请求函数一结合，就能轻松实现一个功能完整的筛选排序列表。

那么，三者如何一体化呢？

一个典型的场景是页面开发模式。当一个页面被加载，我们通常用useEffect去触发一个Redux action，请求数据。数据回来存到Redux里，组件通过useSelector拿到数据，然后塞给Antd的Table组件去展示。页面的筛选条件变化时，我们更新组件内部的useState，状态一变，又触发useEffect去重新请求。这里的筛选条件、列表数据、加载状态，都可以选择放在哪里：是放在组件内部（用useState）还是全局（Redux）？我的经验是：被多个组件共享的、需要持久化的、或者包含复杂异步流程的，放Redux；只影响当前组件UI的，放useState。

这套组合拳打下来，开发效率非常高。我们不再纠结于技术选型，而是把精力都放在业务流程和数据流转上。这种模式下，前端代码变得特别声明式：我们告诉React，在什么状态下，UI应该长什么样；我们告诉Redux，数据该怎么变；我们告诉Antd，这个字段要渲染成什么控件。至于怎么渲染、怎么更新DOM，那是框架和库的事。

当然，没有银弹。这套方案也要注意问题。比如，不要把Redux当垃圾桶，什么数据都往里塞；自定义Hook要设计得通用且克制；Antd的版本升级有时会有breaking change。但这些都不是硬伤，而是随着项目深入，我们需要持续优化和思考的地方。

总而言之，React Hooks给了我们组织逻辑的绝佳工具，Redux提供了稳固的数据基座，Antd则让我们能快速搭出专业的界面。三者结合，让企业后台开发从“敲代码”变成了“搭积木”和“编剧本”，既保证了效率，又保证了代码的可维护性。这大概就是现代前端工程化的魅力所在吧。