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
收起评论