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

前言

作为数据驱动的领导者react/vue等MVVM框架的出现,帮我们减少了工作中大量的冗余代码, 一切皆组件的思想深得人心。组件就是对一些具有相同业务场景和交互模式代码的抽象，这就需要我们对组件进行规范的封装，掌握高质量组件设计的思路和方法可以帮助我们提高日常的开发效率。笔者将会通过实战抖音订单组件详细的介绍组件的设计思路和方法，对新手特别友好，希望对前端新手们和有一定工作经验的朋友有一定帮助~

前期准备

在组件设计之前，希望你对css、js具有一定的基础。在我们的组件设计时需要用到的开源组件库有：（有不了解的小伙伴可以自行查阅资料学习一下，在后面用到的时候我也会说明的）

• axios 它是一个基于 promise 的网络请求库，用于获取后端数据，是前端常用的数据请求工具；
• react-weui、weui weui 是微信官方制作的一个基础样式UI库，我们可以通过阅读官方文档直接使用里面的样式，而 react-weui 就是将这些样式封装成我们可以直接使用的组件；
• styled-components 称之为css in js，现在正在成为在 React 中设计组件样式的新方法。

另外，我们还用到在线接口工具 faskmock 模拟ajax请求。它更加真实的模拟了前端开发中后端提供数据的方式。

正文

在这我们先来看看组件实现后的组件效果：

1. 组件设计思路

在这个组件中我们需要实现的业务有：(目前我们就暂时实现以下效果，该页面的其他功能笔者将会在后期慢慢完善~)

• **tab切换：**点击tab，该tab添加上红色下划线样式，并将该tab状态下的订单展示在下方。
• **设置loading状态：**在数据还在请求中时，显示loading图标
• **搜索订单：**在当前tab下搜索商品标题含有输入内容的订单。
• **删除订单：**删除指定订单，由于数据是在fastmock中请求得到，因此删除只相对于前端。
• 实现Empty（空状态）组件当当前状态下订单数量为 0 时，显示该组件，否则显示列表组件。

根据我们的需求，可以划分出5个组件模块组成整个页面：

1.页面级别组件<Myorder/>,它是其他组件的父组件；2.显示数据列表组件<OrderList/>，单个数据组件<OrderNote/>；3.空状态组件<EmptyItem/>；4.推荐商品列表组件<RecommendList/>。在<Myoeder/>组件中请求数据，将对应的数组数据通过props传给<OrderList/>组件和<RecommendList/>组件;<OrderList/>组件再将单个数据传给<OrderNote/>组件。这样就规范的完成了父组件请求数据，子组件搭建样式的分工合作了。分析完组件组成接下来完成组件目录的搭建：

2. 实现 Myorder 组件

首先我们先根据需求将组件框架写好,这样后面写业务逻辑会更清晰:

这个页面级别组件包括固定在顶部的搜索框+导航栏，以及OrderList和RecommendList组件，因此可以写出如下组件框架：

import React from 'react'
import OrderList from '../OrderList'
import RecommendList from '../RecommendList'
import { OrderWrapper } from './style'
import fanhui from '../../assets/images/fanhui.svg'
import gengduo from '../../assets/images/gengduo.svg'
import sousuo from '../../assets/images/sousuo.svg'

export default function Myorder() {return (<OrderWrapper>// 搜索 + 导航栏 部分<div className="head"><div className="searchOrder"><img src={fanhui} alt="返回"/><div className='searchgroup'><input placeholder="搜索订单" /><img className="searc