深入面试系列1:React复用组件逻辑

简介: 深入面试系列1:React复用组件逻辑

背景


纵观整个React开发,值得我们关注以及设计的一大类问题即是组件如何封装和复用,我们可以轻易的使用React组件来封装复用UI,但是对于一些多个组件都会用到的逻辑,我们如何做到优雅的复用呢?

比如考虑这个一个场景,有两个组件,它们都需要一个统计组件被点击次数的逻辑,很显然这个逻辑是可以并且值得被复用的,那么我们有哪些方式去复用呢?

有面向对象设计经验的程序员第一反应肯定是设计一个拥有统计组件点击次数方法的父类,然后任意的组件类再去继承这个父类。

但是在React生态中,我们推荐使用组合的方式来代替继承实现组件之间的逻辑复用。接下来,我将通过高阶组件(high order component)、render props、hooks的方式来总结React如何复用组件逻辑。


hoc


首先我们介绍高阶组件。 什么是高阶组件(high order component)呢?简单的说,它是一个方法,这个方法接收组件并且返回一个新组件,这样子不但可以不用破坏原有组件的逻辑,还能增强原有组件的功能,比如在Redux库中就会经常用到。 回想一下我们刚刚说的那个场景,如果我们把次数状态、点击计算逻辑抽取到一个clickCountHoc组件中,那么所有需要此逻辑的组件都可以用高阶组件的方式与clickCountHoc组件做一个组合,那么就可以拥有统计组件点击的能力。 以下是demo代码示例(源代码地址:react-component-combination):

image.png

image.png

image.png

这样子以后不管是什么组件需要统计点击次数的逻辑,都能以高阶组件的方式来增强能力。 高阶组件在平时的业务开发中有很多用到的地方,比如统一打印日志、统一捕获错误上报、提取公共函数等等。


render props


接下来我们介绍renderProps。

render props是一项通过props来告知组件需要渲染什么内容的技术,它的使用场景是什么呢? 很多时候我们渲染一个组件,但是它的逻辑和数据却依赖于父组件,这种情况下我们可以把那部分可以复用的逻辑抽取在父组件中,并且在父组件暴露一个参数来接收渲染子组件的方法,并且通过这个方法把子组件所依赖的数据传给它,这种方式就是render props。

以下是demo代码示例(源代码地址:react-component-combination):


image.png

image.png

这种方式,子组件完全不用关心父组件的逻辑,只要按照父组件传来的数据做渲染即可,所有高阶组件可以做到的事情,用render props都可以做到。

那么它跟高阶组件的区别是什么呢?render props的使用思路是控制反转,子组件通过render props的方式定义好渲染自身的函数,父组件再把子组件需要的数据传给这个函数,子组件拿到数据后可以随意的渲染自身。


hooks


最后我们介绍hooks。

React hooks是从React 16.7.0-alpha开始有的新特性,我们通过它也可以来实现逻辑复用。 关于hooks的技术原理与设计我在接下来的深入面试系列讲到,现在我们只通过hooks来封装获取当前鼠标在屏幕坐标值的逻辑,以下是demo代码示例(源代码地址:react-component-combination):

image.png

image.png

hooks除过封装状态以外,还有有一些其他的API可供使用,我们后面再讲。就目前这个demo看,hooks的书写逻辑很清晰、复用方便,并且直接使用函数式组件,短小精悍,将会是未来通用的封装逻辑方式。


相关文章
|
5月前
|
缓存 前端开发 数据安全/隐私保护
如何使用组合组件和高阶组件实现复杂的 React 应用程序?
如何使用组合组件和高阶组件实现复杂的 React 应用程序?
224 68
|
5月前
|
缓存 前端开发 Java
在 React 中,组合组件和高阶组件在性能方面有何区别?
在 React 中,组合组件和高阶组件在性能方面有何区别?
206 67
|
5月前
|
前端开发 JavaScript 安全
除了高阶组件和render props,还有哪些在 React 中实现代码复用的方法?
除了高阶组件和render props,还有哪些在 React 中实现代码复用的方法?
215 62
|
7月前
|
前端开发
React 中高阶组件的原理是什么?
React 中高阶组件的原理是什么?
186 57
|
7月前
|
前端开发
在 React 中使用高阶组件时,如何避免命名冲突?
在 React 中使用高阶组件时,如何避免命名冲突?
166 56
|
7月前
|
移动开发 前端开发 JavaScript
React音频播放列表组件:常见问题、易错点与解决方案
本文介绍了在React中实现音频播放列表时常见的挑战及解决方案。通过基础实现、常见问题分析和最佳实践,帮助开发者避免状态管理、生命周期控制和事件处理中的陷阱。关键点包括使用`useRef`操作音频元素、`useState`同步播放状态、全局状态管理防止多音频同时播放、以及通过`useEffect`清理资源。还提供了代码示例和跨浏览器兼容性处理方法,确保高效实现功能并减少调试时间。
220 30
|
7月前
|
移动开发 前端开发 UED
React 音频音量控制组件 Audio Volume Control
在现代Web应用中,音频播放功能不可或缺。React以其声明式编程和组件化开发模式,非常适合构建复杂的音频音量控制组件。本文介绍了如何使用HTML5 `<audio>`元素与React结合,实现直观的音量控制系统,并解决了常见问题如音量范围不合理、初始音量设置及性能优化等,帮助开发者打造优秀的音频播放器。
220 27
|
7月前
|
编解码 前端开发 开发者
React 图片组件样式自定义:常见问题与解决方案
在 React 开发中,图片组件的样式自定义常因细节问题导致布局错乱、性能损耗或交互异常。本文系统梳理常见问题及解决方案,涵盖基础样式应用、响应式设计、加载状态与性能优化等,结合代码案例帮助开发者高效实现图片组件的样式控制。重点解决图片尺寸不匹配、边框阴影不一致、移动端显示模糊、加载失败处理及懒加载等问题,并总结易错点和最佳实践,助力开发者提升开发效率和用户体验。
211 22
|
7月前
|
移动开发 前端开发 开发者
React 音频播放控制组件 Audio Controls
本文介绍了如何使用React构建音频播放控制组件,涵盖HTML5 `<audio>`标签和React组件化思想的基础知识。针对常见问题如播放状态管理、进度条更新不准确及跨浏览器兼容性,提供了详细的解决方案和代码示例。同时,还总结了易错点及避免方法,如确保音频加载完成再操作、处理音频错误等,帮助开发者实现稳定且功能强大的音频播放器。
275 11
|
7月前
|
移动开发 前端开发 UED
React 音频进度条组件 Audio Progress Bar
在现代Web开发中,音频播放功能不可或缺。使用React构建音频进度条组件,不仅能实现播放控制和拖动跳转,还能确保代码的可维护性和复用性。本文介绍了如何利用HTML5 `<audio>`标签的基础功能、解决获取音频时长和当前时间的问题、动态更新进度条样式,并避免常见错误如忘记移除事件监听器和忽略跨浏览器兼容性。通过这些方法,开发者可以打造高质量的音频播放器,提升用户体验。
213 6