【React】React全家桶（六）React哲学

参考链接：
React 哲学官方文档

刚使用React的同学有一个通病：拿到UI图后，没有任何思考和设计就去写，想到什么写什么，不合理的代码会出现很多bug，没错说的就是我自己~~~，那么我们就需要学习一下React哲学，看看别人是如何思考构建页面的。

React哲学会引导我们思考如何构建一个应用 ， 倡导我们把代码写得更加简洁清晰，更具模块化，这一点在写大型的项目尤为重要，在写代码之前就把大致的结构和涉及的数据结构设计好，会减少 Bug 的产生，减少重构的时间，减少维护的成本。

准备阶段

在我们写代码之前 ，一定需要UI产品设计图和后端接口数据

UI产品设计图

后端接口数据

[
  {
   
   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"}
];

第一步：通过UI产品设计图划分组件层级

理清UI产品设计图的需求：

• 一个展示商品的列表
• 对商品进行关键字搜索，点击复选框展示商品现货
• 商品列表包含商品名和价格，商品支持分类显示，其中告罄的商品名为红色显示

划分组件层级：

• 在设计稿上用方框圈出每一个组件（包括它们的子组件），并且以合适的名称命名（很关键）
• 将组件当作JS函数考虑，一个组件原则上只能负责一个功能，如果组件功能较多，可以考虑将它拆分成更小的组件
• UI应与数据模型一一对应 ， 若将 UI 分离为组件，其中每个组件需与数据模型的某部分匹配。

不同的颜色划分成不同的组件，可以分成五部分：

1. FilterableProductTable (橙色): 是整个示例应用的整体
2. SearchBar (蓝色):接受所有的用户输入
3. ProductTable (绿色): 展示数据内容并根据用户输入筛选结果
4. ProductCategoryRow (天蓝色): 为每一个产品类别展示标题
5. ProductRow (红色): 每一行展示一个产品

组件的层级划分：

• FilterableProductTable
  • SearchBar
  • ProductTable
    • ProductCategoryRow
    • ProductRow

第二步：用React构建静态页面

编写应用：将编写静态页面和添加交互这两过程分开， 这是因为编写静态页面时需要大量代码，而添加交互时则要考虑大量细节， 将这两个过程分开进行更为合适 ，整个思路也比较清晰。

通过复用编写的组件，使用 props 来进行数据的传递，父组件把数据进行层层的传递，在这个过程中先不使用 state ，因为 state 表示的是会随着时间变化而变化的，所以在交互的过程中使用 。

props和state的区别：

• props 是传递给组件的（类似于函数的形参），是父组件向子组件传递数据的方式
• state 是在组件内被组件自己管理的（类似于在一个函数内声明的变量）， 代表了随时间会产生变化的数据，应当仅在实现交互时使用
• 组件可以选择把它的 state 作为 props 向下传递到它的子组件中

构建应用的方法：

• 自上而下的方法：先写层级最高的组件，如FilterableProductTable 组件，这种比较适合简单的应用
• 自下而上的方法：先写层级最低的组件，如 ProductRow组件，这种方法比较适合大型的应用构建

静态页面代码示例

// 后端接口JSON数据
const PRODUCTS = [
  {