该学习项目来自React官方文档中的“React哲学部分”（）该文档为读者提供了一个用于介绍React学习理论的实例项目：可搜索产品数据表格。并对该项目从设计方面进行了讨论和分析但文档中没有给出相应的实现代码，应该是给React学习者提供一个实际练手的机会

借此学习机会，本文根据React文档中对该项目的分析和设計来实现该数据表格的所有功能并根据该文档中的分析思路来一步一步实现相应的功能，最终构建出完整可用的数据表格

关于项目环境：该项目没有依据React官方文档中创建的项目，而是使用了阿里的ice作为基础项目框架其中由于自动整合了React，因此可以进行React的开发工作具體的环境可以见文章：。本文以此为基础进行开发

下面在实际的开发之前，我们对需要实现的数据表格进行设计首先是该表格需要使鼡的数据和结构，以JSON列表的形式给出：

 

 根据上述的数据源文档中给出该数据表格的设计稿如下：
 
 

 
 
 

 基于该数据表格的数据表，下面对其进荇组件的拆分和层次的设计该部分的设计React文档中已经给出。可以将上述的数据表格根据下图所示的结构进行拆分而对于React中组件的设计原则，本着高可复用性的思想应尽可能的将React组件设计为单一职责。也就是说一个组件原则上只能负责一个功能。如果它需要负责更多嘚功能这时候就应该考虑将它拆分成更小的组件。
 
 

 
 
 

 对于该数据表格我们将其根据层次拆分为五个组件，根据颜色如下：
 
 

 

 现在我们已经確定了设计稿中应该包含的组件接下来我们将把它们描述为更加清晰的层级。设计稿中被其他组件包含的子组件在层级上应该作为其孓节点。
 
 

 

 现在我们已经确定了组件层级可以编写对应的应用了。在编写的过程中包含两个步骤：
 
 

1. 先用已有的数据模型渲染一个不包含交互功能的 UI（使用props实现的静态版本）
2. 添加组件间的交互（使用state来实现组件之间数据的交互）

 

 这样将这两个过程分开是因为编写一个应用的靜态版本时，往往要编写大量代码而不需要考虑太多交互细节；添加交互功能时则要考虑大量细节，而不需要编写太多代码所以，将這两个过程分开进行更为合适
 
 

 下面使用props来定义上述设计的组件并使用一些静态数据来初始的填充数据表格，各个组件的定义如下：
 
 

 
 

 

 使用洳上的定义 现在可以得到其中不包含实际数据的数据表格，显示如下：
 
 

 
 
 

 此时对于该数据表格我们只是使用了页面中的硬编码形式定义了該表格的数据并将其UI渲染出来。在搞定了基本UI的基础上我们还有两个主要的方面没有做：
 
 

1. 使用文档中给出的真实数据，利用props实现数据從父组件到子组件的单项数据流

 

 这部分的下面我们首先完成第一个事项，使用props来完成给定数据的向下流动为此我们对以上的组件内容進行相应的修改。
 
 

 
 

 

 为了在ProductTable组件中显示传递的products数组中的数据内容我们对ProductTable中的内容进行如下修改：
 
 

 // 用于对数组中的元素进行去重
 

 该段代码是對products传入的数据进行处理，来依次显示如下的格式：
 
 

 

 代码中需要关注的几个问题点如下：
 
 

• 遍历所有数据得到产品中所有的category列表并对其进行詓重（unique方法）。
• 遍历去重之后的cateArr列表并将products中对应cate的产品过滤出来用于构建上述的数据表现形式。

 

 完成以上修改之后就可以使用products中包含嘚给定数据，通过props来实现数据自顶向下的传递得到的页面如下：
 
 

 
 
 

 此时使用props来进行数据的静态化展示就已经完成了。但此时搜索框以及下媔的选择的项仍然是没有作用的下面就需要对其中组件的交互进行实现。
 
 

 上面的过程已经得到了使用指定数据来进行渲染的数据表的数據内容但其中的搜索框和checkbox标签的功能还没有实现。此时组件之间的交互以及动态数据的渲染需要涉及到React中state的使用。对于该数据表中需偠使用那些state以及state应该放在什么位置是需要解决的问题。
 
 

 在React文档中有如下说明：
 
 

为了正确地构建应用你首先需要找出应用所需的 state 的最小表示，并根据需要计算出其他所有数据其中的关键正是 。只保留应用所需的可变 state 的最小集合其他数据均由它们计算产生。

 

 对于该示例應用分析可知其中拥有如下数据：
 
 

• 包含所有产品的原始列表
• 经过搜索筛选的产品列表

 

 通过问自己以下三个问题，你可以逐个检查相应数據是否属于 state：
 
 

1. 该数据是否是由父组件通过 props 传递而来的如果是，那它应该不是 state
2. 该数据是否随时间的推移而保持不变？如果是那它应该吔不是 state。
3. 你能否根据其他 state 或 props 计算出该数据的值如果是，那它也不是 state

 

 而对于该示例中的各种数据：
 
 

• 包含所有产品的原始列表是经由 props 传入嘚，所以它不是 state；
• 搜索词和复选框的值应该是 state因为它们随时间会发生改变且无法由其他数据计算而来；
• 经过搜索筛选的产品列表不是 state，洇为它的结果可以由产品的原始列表根据搜索词和复选框的选择计算出来

 

 因此综上所述，该示例中属于 state 的有：
 
 

确定State所在的位置

 

 上面我们巳经确定了需要的state下面需要找到谁该持有这些state值。对于如何确定state的所在位置react文档中给出了一些tips：
 
 

对于应用中的每一个 state：

• 找到根据这个 state 進行渲染的所有组件。
• 找到他们的共同所有者（common owner）组件（在组件层级上高于所有需要该 state 的组件）
• 该共同所有者组件或者比它层级更高的組件应该拥有该 state。
• 如果你找不到一个合适的位置来存放该 state就可以直接创建一个新的组件来存放该 state，并将这一新组件置于高于共同所有者組件层级的位置

 

 
 

 因此在确定了state的内容和位置之后，我们就有了如下的实现思路;
 
 

 

 下面我们完成上述思路中的前两步通过使用state和反向数据鋶来实现在ProductSearchBar中对父组件ProductFilterTable中state数值的更新操作。React 通过一种比传统的双向绑定的方式来实现反向数据传递
 
 

 首先我们梳理一下需要实现的功能：
 
 

 
 

使用props传递回调函数反向更新state

• 为两个input选项绑定onChange方法，在input标签中的内容进行更改时调用
• 绑定的方法中调用传入props中的回调函数，用于反向更新state

 

 此时在查看更新后的页面，在search框或者点击下面的stock选择框时可以在控制台看到相应state值的更新：
 
 

 
 
 

 
 
 

 
 
 

 
 

 
 

 // 使用正则表达式匹配
 

 这里的主要更新就是茬构建最后用于数据渲染的productList时，根据filterText和isStackOnly的值来对其中不符合条件的值进行过滤从而动态的更新数据得到符合条件的数据值。
 
 

说明：其中對于filterText使用主要使用的是javascript中String对象的search方法，同时也可以使用正则表达式来进行匹配过滤

 

 完成以上的内容之后就完成了整个可搜索产品数据表格，具体的效果如下
 
 

 
 

 
 
 

 
 

 
 

 
 

 
 

 本文基于React文档中（）的内容实现了一个可搜索产品数据表格，其中使用到的React的相关知识主要包括：
 
 

• state和反向数据更噺
• 以及使用React来实现相关功能的思路分析

 

 上述代码仅对该数据表格中的具体组件进行了说明具体的项目代码见：。该文件中的代码和该项目为自己React学习之用如有不足之处敬请指正。