超详细的 React 组件设计过程 - 仿抖音订单组件

作为数据驱动的领导者react/vue等MVVM框架的出现,帮我们减少了工作中大量的冗余代码, 一切皆组件的思想深得人心。,组件就是对一些具有相同业务场景和交互模式代码的抽象，这就需要我们对组件进行规范的封装，掌握高质量组件设计的思路和方法可以帮助我们提高日常的开发效率。我们将会通过实战抖音订单组件详细的介绍组件的设计思路和方法，对新手特别友好，希望对前端新手们和有一定工作经验的朋友有一定帮助~,在组件设计之前，希望你对css、js具有一定的基础。在我们的组件设计时需要用到的开源组件库有：
（有不了解的小伙伴可以自行查阅资料学习一下，在后面用到的时候也会说明的）,另外，我们还用到在线接口工具 ​​faskmock​​ 模拟ajax请求。它更加真实的模拟了前端开发中后端提供数据的方式。,在这我们先来看看组件实现后的组件效果：,,在这个组件中我们需要实现的业务有：
(目前我们就暂时实现以下效果，该页面的其他功能笔者将会在后期慢慢完善~),根据我们的需求，可以划分出5个组件模块组成整个页面：,分析完组件组成接下来完成组件目录的搭建：,,首先我们先根据需求将组件框架写好,这样后面写业务逻辑会更清晰:,这个页面级别组件包括固定在顶部的搜索框+导航栏，以及​​OrderList​​和​​RecommendList​​组件，因此可以写出如下组件框架：,有了这个框架，我们来一步步往里面实现内容吧。,首先来完成第一个需求：当点击某个​​tab​​时，如'待支付'，这个​​tab​​要有红色下划线效果。实现原理其实很简单，就是当我们触发该​​tab​​的点击事件时，就将我们事先写好的​​active​​样式加到该​​tab​​上。,这里有两种方案：,这种方法有一个明显的缺点，就是只能为其添加一个样式名，当有多个样式类名时，就会出问题了,因此可以采用第二种方法。,当有多个类名时，这样添加：,实现效果如图：,,这里准备了两个接口，用于获取订单数据和推荐商品数据。,为了便于管理，我们将数据请求封装在api文件中：,接口准备好了，接下来我们将数据分配给子组件，接下来数据如何在页面上显示的任务就交给子组件​​<OrderList/>​​和​​<Recommend/>​​完成,搜索功能应该在对应的​​tab​​下进行，因此我们可以将输入的内容设置为一个​​状态​​，每次改变就根据​​tab​​内容和输入内容重新获取数据：,api接口对订单数据的请求的封装中增加一个​​query​​限制：,而在组件的实现上，由于页面没有添加点击搜索的按钮，如果将​​input​​中的​​value​​直接和​​query​​状态绑定的话，每次用户输入一个字就会进行一次查询，触发太频繁，性能不够好，用户体验也不好。所以这里我的想法是每次输入完按下​​enter​​才进行搜索,但是React中无法直接对​​input​​的​​enter​​事件进行处理。于是我在网上查阅到两种处理方式，第一种是通过 ​​e.nativeEvent​​ 来获取​​keyCode​​判断是否为 13 ，第二中方法是通过​​addEventListener​​注册事件来处理，要慎用。这里采用第一种方法来实现：,在数据请求过程之，页面会空白，为了提升视觉上的效果，在这个时间段我们就设置一个​​loading​​样式，这个样式组件我们直接使用​​reacct-weui​​的​​Toast​​组件。,我们增加一个​​loading​​状态来来控制​​Toast​​的显示。,实现效果如图：,,空状态 组件，顾名思义就是当请求到的数据为空或者是数据长度为 0 时，就显示该组件。这个组件实现起来比较简单，因此这里我们直接写在​​myorder​​组件中，用​​styled-components​​实现效果。,完成上面这些业务，​​myorder​​组件就完成的差不多啦~,这个组件只需要将父组件​​myorder​​传进来的数组数据通过 ​​map​​ 分配给 ​​OederNote​​，另外删除功能在它的子组件​​OrderNote​​上触发，需要通过它解构出​​deleteOrder​​函数传给​​OrderNote​​,该组件主要负责实现订单的展示效果，这里只展示部分代码,在这个组件可以触发删除订单的业务，具体如何删除我们只需要在父组件​​myOrder​​实现，然后将函数传递到​​OrderNote​​触发,在​​myOrder​​组件添加​​deleteOrder​​函数：,该组件也是对从父组件​​Myorder​​获取来的数据进行展示，主要是做样式上的功夫。使用多列布局，将页面分为两列，并且不固定每个数据盒子的高度。,多列布局注意上面三点就差不多了,以上就是目前完成整个组件设计、封装的过程啦，后面会去继续学习下拉刷新、上拉加载等功能，慢慢完善这个组件。希望本篇文章对你也有帮助，你的就是对我们的最大支持^_^,源码地址：cool-g/react-reportPage: 仿抖音我的订单组件 (github.com),https://github.com/cool-g/react-reportPage,gitpage地址(直接查看页面效果)：Vite App (cool-g.github.io),https://cool-g.github.io/react-reportPage/