3.9 React组件切分与提取
前面介绍了React组件和React Props的内容，相信读者已经开始慢慢习惯使用React组件设计了。通过React组件可以快速搭建出逻辑复杂的应用，但往往在初始设计过程中会形成功能模块不清晰、嵌套过多、很难复用的代码，这就需要设计人员后期对React组件进行切分，并提取出逻辑清晰、可高度复用的小组件，这样也有利于代码的修改便于维护。
下面，通过设计一个用户基本信息界面的代码实例，介绍React组件切分与提取的基本操作流程。
设计人员在刚开始构思一个用户基本信息界面时，往往会先把需求文档中的全部信息罗列进去，然后在页面中尽量完整体现业务逻辑所要求的功能。因此，初始代码设计大致会是下面的形式，具体如下：
【代码3-10】（详见源代码目录ch03-react-comp-extract-a.html文件）
关于【代码3-10】的说明：
●第22~44行代码定义了一个React函数组件（UserDetail），用于构成一个用户信息界面，具体说明如下：
► 第25~31行代码通过<span>标签元素定义了第一个小面板，用于显示用户头像和用户昵称。
► 第32~38行代码通过<span>标签元素定义了第二个小面板，用于显示用户的详细信息（具体包括id、name、gender、age和email等）。
► 第39~41行代码通过<span>标签元素定义了第三个小面板，用于显示系统当前时间。
●第46~56行代码通过const关键字定义了一个常量（UserDetail），赋值为React函数组件（<UserDetail>）。同时，定义了一组属性并初始化了属性值，通过React Props参数传递给React函数组件（UserDetail）。
我们注意到【代码3-10】中整个用户信息界面的数据构成很杂乱，包括了图片地址、用户信息、日期时间等内容，且存在复杂的嵌套关系。这样的定义会造成设计人员阅读代码困难，后期代码修改和维护的难度也有所增加。
于是，React组件的切分与提取就显得尤为重要了。其实，所谓的组件切分与提取就是将业务逻辑分类、归纳和精简。对于【代码3-10】而言，我们可以将整个用户信息界面切分为3个部分，分别是用户头像区域、用户信息区域和系统时间区域，修改后的代码如下：
【代码3-11】（详见源代码目录ch03-react-comp-extract-b.html文件）
关于【代码3-11】的说明：
●关键部分是第46~50行代码、第51~57行代码和第58~60行代码的定义，分别定义了“avatar”“userinfo”和“date”3个常量。这3个常量分别定义了用户头像、用户信息和系统时间的内容，然后使用在第61~65行代码定义的React函数组件（<userDetail>）中，并通过React Props参数进行传递。
●第22~44行代码定义的React函数组件（UserDetail）与【代码3-10】相比变化不大，主要区别是通过Props参数引用属性的方式不同。
我们注意到【代码3-11】将全部用户信息划分成3个部分，分别是用户头像区域、用户信息区域和系统时间区域，但似乎代码逻辑还是很混乱。下面，我们尝试通过组件的方式将用户信息按照用户头像区域、用户信息区域和系统时间区域提取出来，分别构成3个小组件，然后再组合成一个大的组件，具体代码如下：
【代码3-12】（详见源代码目录ch03-react-comp-extract-c.html文件）
关于【代码3-12】的说明：
●第38~48行代码定义的React函数组件（Avatar）和第50~60行代码定义的React函数组件（UserInfo）最为重要，注意到这两个函数组件的内容就是从【代码3-11】定义的React函数组件（UserDetail）中所提取出来的。
●在第62~72行代码定义的React函数组件（UserDetail）中，第65行和第66行代码分别引用了React函数组件（Avatar和UserInfo），具体来说就是通过小组件组合成了大组件。
●另外，这段代码关于系统时间区域并没有按照组件切分的方式来实现，感兴趣的读者可以参照React函数组件（Avatar和UserInfo）的方式进行改写。
下面分别测试【代码3-10】、【代码3-11】和【代码3-12】所定义的HTML网页，其实3个网页的效果是完全一致的（读者可自行验证），具体如图3.8所示。
图3.8 React组件切分与提取
组件切分与提取看起来似乎是一项单调乏味的工作，但是在大型项目应用中，构建出逻辑清晰且可高度复用的组件是非常有价值的工作。当项目UI中有一部分模块重复使用了若干次，或者这部分模块自身就十分复杂，组件切分与提取就是一项十分有意义的工作。