React(5)-构建React应用的一般步骤

2020-03-23

React

字数统计: 1.3k字 | 阅读时长≈ 5分钟

前置条件

获得一张组件设计图和后台返回的JSON数据。

[
  {category: "Sporting Goods", price: "$49.99", stocked: true, name: "Football"},
  {category: "Sporting Goods", price: "$9.99", stocked: true, name: "Baseball"},
  {category: "Sporting Goods", price: "$29.99", stocked: false, name: "Basketball"},
  {category: "Electronics", price: "$99.99", stocked: true, name: "iPod Touch"},
  {category: "Electronics", price: "$399.99", stocked: false, name: "iPhone 5"},
  {category: "Electronics", price: "$199.99", stocked: true, name: "Nexus 7"}
];

划分组件层级

按照给定的组件设计图，划分组件层级。

将组件看作函数或对象来考虑，根据单一功能原则判定组件范围，即一个组件只负责一个功能。若负责多个功能则考虑将其拆分。

按给定的JSON数据模型设计UI（组件结构），使两者一一对应。

划分组件

如上图，可将整个设计图层级分为5部分：

红色区域（FilterProductTable）：整个组件应用整体
绿色区域（SearchBar）：获取用户输入部分
蓝色部分（ProductTable）：整个数据展示部分
粉色部分（ProductCategoryRow）：数据展示部分的产品分类标题部分
橘色部分（ProductRow）：数据展示部分的分类下每个产品的部分。

层级关系可表示为：

FilterProductTable
- SearchBar
- ProductTable
  - ProductCategoryRow
  - ProductRow

根据层级关系编写应用的静态版本

应用静态版本即使用已有的数据模型渲染一个不包含交互的UI。

静态版本不需要考虑交互细节，而添加交互功能需要考虑大量的细节。故在实际应用中分开进行更合适。构建静态版本只需要通过props传入所需的数据，props是父组件向子组件传递数据的方式。此时不需要考虑state，因为state代表会随时间变化的数据，应只在交互时使用。

编写静态版本有两种方式：自上而下和自下而上。

自上而下：先构建层级较高的组件，再自上而下分步细化组件。适用于构建简单的应用。
自下而上：先构建最基本的组件，再一层一层向上构建。适用于构建大型的项目。

静态版本的组件提供render()方法用于渲染数据模型。故当数据模型改变，则调用ReactDOM.render()重新渲染，UI相应更新，即React的单向数据流思想。

相应代码见React官方文档

确定state变量

全称:Don’t Repeat Yourself (摘自wikipedia),是指编程过程中不写重复代码,将能够公共的部分抽象出来,封装成工具类或者用“abstraction”类来抽象公有的东西,降低代码的耦合性,

按照DRY原则，只保留应用所需的state的最小集合，其他数据由此state计算得出。

确定state需考虑以下问题：

该数据是否由父组件通过props传递而来，若是，则不是state
该数据是否变化？若保持不变，则不是state
该数据是否能根据其他数据计算而来，若是，则不是state。

由上文可得，产品的所有信息都可由父组件FilterProductTable传递而来，故不是state。SearchBar中的搜索字段和checkbox选中值需要由用户交互而变化，且无法由其他数据计算而来，故应该为state

确定state位置

由于React的数据是单向流动，且按组件层级自上而下传递，故state所属的组件很难确定。

判断时，依照如下步骤考虑：

查看根据此state渲染的所有组件
找到这些组件的共同所有者组件，即层级高于这些组件的组件
该共同所有者组件或比他层级更高的组件应该拥有此state
若无法找到合适的位置存放state，则可以创建一个新的组件来存放state。

根据上述步骤，可发现：

SearchBar和ProductTable都需要此state。SearchBar需要state展示搜索框和checkbox的状态。ProductTable需要根据state筛选产品列表。
SearchBar和ProductTable的共同所有者是FilterProductTable
因此state应存放在FilterProductTable中。

首先，将实例属性this.state = {filterText: '', inStockOnly: false}添加到FilterableProductTable的 constructor中，设置应用的初始 state；接着，将filterText和inStockOnly作为props传入 ProductTable和SearchBar；最后，用这些props筛选ProductTable中的产品信息，并设置SearchBar的表单值。