19｜代码复用：如何设计开发自定义Hooks和高阶组件？
宋一玮
你好，我是宋一玮，欢迎回到 React 应用开发的学习。
可能你已经发现了，前面第 15 节课的不可变数据、第 16～17 节的应用状态管理，还有上节课用 TypeScript 为 React 项目引入类型系统，其实都在为我们应对大中型 React 项目中的复杂数据流打基础。
大中型 React 项目复杂的不只是数据流，还有应用逻辑，所以接下来我们就把重点放到应用逻辑上。应用逻辑我们会分为局部和整体两个部分来学习，这节课我们先来看局部，即组件逻辑。
组件逻辑越来越复杂怎么办？我曾观察过不少单组件包含数百行、甚至上千行代码的情况。其中有结构清晰、易于维护的模范代码，但更多的还是可以当作负面典型的后进代码，这些组件代码往往存在以下问题：
承担了过多的职责；
业务逻辑和交互逻辑杂糅在一起；
从其他组件中复制粘贴代码。
具体表现为：
传递的 props 个数过多；
使用 useState 的个数过多；
单个 useEffect 的副作用回调函数行数过多；
……
这些问题大都可以通过抽象的方式改进。那么接下来，我们就来学习如何设计开发自定义 Hooks 和高阶组件，以达到抽象和代码复用。
抽象的目的
我们对抽象（Abstraction）并不陌生，前面第 13 节课提到的面向接口编程，就是抽象的一种。MVC 架构里 M、V、C 分别也都是抽象，后端开发中的分层架构，每一层也是抽象。在软件开发中，抽象可以用来降低程序的复杂度，使得开发者可以专注处理少数重要的部分。
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
本文深入探讨了在React应用中如何通过自定义Hooks和高阶组件实现代码复用和抽象。作者首先强调了抽象的重要性，指出抽象可以降低程序复杂度，使开发者能够专注处理重要部分。随后详细介绍了自定义Hooks的概念和用法，以及如何通过自定义Hooks实现业务逻辑的抽象和代码复用。通过实际示例，生动展示了自定义Hooks的使用方法和优势。此外，还介绍了高阶组件的设计模式和写法，以及如何在组件中实现代码复用和抽象。总的来说，本文对于React应用开发中的组件逻辑复杂度管理具有重要的指导意义。文章内容深入浅出，适合读者快速了解并掌握相关技术特点。
仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《现代 React Web 开发实战》，新⼈⾸单¥59
《现代 React Web 开发实战》，新⼈⾸单¥59
立即购买
© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
登录 后留言
全部留言(1)
- 最新
- 精选
若川思考题： 1. useState 只有两个值的数组，优点：解构命名方便，缺点：要按顺序。 const [name, setName] = useState() 自定义 hooks。返回对象，优点：不需要按顺序可以解构。缺点：解构如果需要重命名相对麻烦，比如const {name: PersonName} = useHooks(); 一般来说超过三个用对象形式比较好。 2. 暂时实现不出~贴下 React.memo 源码链接: https://github.com/facebook/react/blob/main/packages/react/src/ReactMemo.js作者回复: 你好，若川，你的第1题答案已经是标准答案了，赞 ：）
2022-10-16归属地：北京23
收起评论