深入面试系列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的书写逻辑很清晰、复用方便,并且直接使用函数式组件,短小精悍,将会是未来通用的封装逻辑方式。


目录
打赏
0
0
0
0
2
分享
相关文章
React 图片灯箱组件 Image Lightbox
图片灯箱组件是一种常见的Web交互模式,用户点击缩略图后弹出全屏窗口展示大图,并提供导航功能。本文介绍了基于React框架的图片灯箱组件开发,涵盖初始化状态管理、图片加载与预加载、键盘和鼠标事件处理等常见问题及解决方案。通过`useState`和`useEffect`钩子管理状态,使用懒加载和预加载优化性能,确保流畅的用户体验。代码案例展示了组件的基本功能实现,包括打开/关闭灯箱、切换图片及键盘操作。
125 80
React 视频播放控制组件 Video Controls
本文介绍了如何使用 React 构建视频播放控制组件(Video Controls),涵盖基本概念、创建步骤和常见问题解决。首先,通过 HTML5 `<video>` 标签和 React 组件化思想,实现播放/暂停按钮和进度条等基础功能。接着,详细讲解了初始化项目、构建 `VideoControls` 组件及与主应用的集成方法。最后,针对视频无法播放、控制器状态不同步、进度条卡顿和音量控制失效等问题提供了具体解决方案,并介绍了全屏播放和自定义样式等进阶功能。希望这些内容能帮助你在实际项目中更好地实现和优化视频播放功能。
81 40
React 视频播放器组件:Video Player
本文介绍了如何使用 React 和 HTML5 `<video>` 标签构建自定义视频播放器组件。首先,通过创建基础的 React 项目和 VideoPlayer 组件,实现了基本的播放、暂停功能。接着,探讨了常见问题如视频加载失败、控制条样式不一致、性能优化不足及状态管理混乱,并提供了相应的解决方案。最后,总结了构建高效视频播放器的关键要点,帮助开发者应对实际开发中的挑战。
107 27
React 图片放大组件 Image Zoom
本文介绍如何使用React创建图片放大组件(Image Zoom),提升用户体验。组件通过鼠标悬停或点击触发放大效果,利用`useState`管理状态,CSS实现视觉效果。常见问题包括图片失真、性能下降和移动端支持,分别可通过高质量图片源、优化事件处理和添加触摸事件解决。易错点涉及状态管理混乱、样式冲突和过多事件绑定,建议使用上下文API、CSS模块及优化事件绑定逻辑。高级功能扩展如多张图片支持和自定义放大区域进一步丰富了组件的实用性。
58 25
React 视频上传组件 Video Upload
随着互联网的发展,视频内容在网站和应用中愈发重要。本文探讨如何使用React构建高效、可靠的视频上传组件,涵盖基础概念、常见问题及解决方案。通过React的虚拟DOM和组件化开发模式,实现文件选择、进度显示、格式验证等功能,并解决跨域请求、并发上传等易错点。提供完整代码案例,确保用户能顺畅上传视频。
128 92
React 图片裁剪组件 Image Cropper
本文介绍了在React中实现图片裁剪功能的方法,涵盖基础知识、常见问题及解决方案。首先,通过第三方库如`react-image-crop`或`cropperjs-react`可轻松实现图片裁剪。接着,针对性能和兼容性问题,提供了优化图片加载、处理裁剪区域响应慢、解决浏览器差异等方案。最后,通过代码案例详细解释了如何创建一个基本的图片裁剪组件,并提出了优化建议,如使用`React.memo`、添加样式支持及处理大图片预览,帮助开发者避免常见错误并提升用户体验。
116 67
React 音频预览组件:Audio Preview
本文介绍如何使用 React 构建音频预览组件,涵盖基础实现、常见问题及解决方案。通过 HTML5 `<audio>` 标签和 React 状态管理,实现播放控制。解决文件路径、浏览器兼容性等问题,并优化性能,避免状态不同步和内存泄漏,提升用户体验。
53 22
React 音频播放器组件 Audio Player
本文介绍如何使用React创建功能丰富的音频播放器组件。基于HTML5 `<audio>` 标签,结合React的状态管理和事件处理,实现播放、暂停、进度和音量控制等功能。通过代码示例展示基本实现,并探讨常见问题如自动播放限制、进度条不更新、文件加载失败及多实例冲突的解决方案。同时,避免易错点如忽略生命周期管理、错误处理和性能优化,确保高效开发与良好用户体验。
61 23
React 视频弹幕组件 Video Danmaku
本文介绍了如何在React中构建视频弹幕组件,提升用户观看体验和互动性。首先通过Create React App初始化项目,并集成`react-player`作为视频播放器。接着实现基本弹幕功能,包括评论的接收与显示,使用CSS动画实现滚动效果。针对常见问题如弹幕重叠、性能下降及同步问题,提供了随机化位置、分批加载和监听播放进度等解决方案。最后探讨了弹幕分类和特效等高级技巧,确保弹幕系统的高性能和良好用户体验。
50 23
React 图片轮播组件 Image Carousel
本文介绍了如何使用React创建图片轮播组件。首先,解释了图片轮播的基本概念和组件结构,包括图片容器、导航按钮、指示器和自动播放功能。接着,通过代码示例详细说明了创建基本组件、添加自动播放、处理边界情况的步骤。还探讨了常见问题如状态更新不及时、内存泄漏和样式问题,并提供了解决方案。最后,介绍了进阶优化,如添加过渡效果、支持触摸事件和动态加载图片,帮助读者构建更完善的轮播组件。
49 16