【React】笔记——React编程思想

React 编程思想 | React 中文文档 | React 中文网

这一板块的思想还是非常值得研究和琢磨并且掌握，因为其提供的是如何一步一步去做出我们的需求，而不是一下子就想得是否具体，各种细节。在实际开发中其实大部分是做不到的，都是通过一步一步去不断优化出来的。

React实现UI的五个步骤：

1. 将UI分解为组件结构

2. 基于Recat 构建静态版本

3. 找到UI状态中的最小且完整的呈现state

4. 定义state应该被放在哪里

5. 添加一个逆数据流

1. 将UI分解为组件结构

• 编程—使用相同的技术来决定是否需要创建新函数或对象。其中一个方法是 单一责任原则（single responsibility principle），也就是说，一个组件在理理想情况下只负责一件事情。如果变得臃肿了，则应将其分解为更小的子组件。
• CSS—考虑类选择器（class selector）的用途。（但是，组件的粒度要小一些。）。
• 设计—考虑如何阻止设计中所用的图层（layer）。

 这里使用了不同角度的编程思想，非常值得参考，当然还有其他的设计思想，应该根据实际情况使用。

示例中的图：

1. FilterableProductTable （灰色部分）包含了整个应用程序。
2. SearchBar （蓝色部分）接收用户输入。
3. ProductTable （紫色部分）根据用户的输入显示和筛选列表。
4. ProductCategoryRow （绿色部分）显示每个类别的标题。
5. ProductRow （黄色部分）每行显示一个产品。

 

这里不难看出一个需求的页面拆分成若个组件，同时保证组件之间是相互独立的。

上述的拆分思想：

最大的板块就是 FilterableProductTable，然后将其拆分，根据功能拆分成SearchBar 和ProductTable 

ProductTable 再继续拆分成 ProductCategoryRow 和 ProductRow 

 最后的结构：

• FilterableProductTable
  • SearchBar
  • ProductTable
    • ProductCategoryRow
    • ProductRow

所以整个拆分的层级性就非常的明确，且相互独立。

而这个拆分的过程最主要是基于一个功能的思想。

2. 基于Recat 构建静态版本

在这一步自己总结就是很快去实现一个demo。就是可以单机工作直接渲染出来的，不需要考虑太多的其他数据，一起都可以通过自己去mock出来。

先构建静态版本然后再添加交互功能，通常是一条便捷的路径。构建静态版本需要大量的码字，但无需太多思考；而添加交互功能则需要大量的思考，码字反而不多。

因为在平时自己写功能时，很容易想一步到位，其实这个并不科学的，而其思想在这一步就是先实现一个基本的效果，然后再修改接口引入数据而已。

这一步最重要的思想就是先写再说，不能想太多，同时不做任何交互（没有状态位，写死的一个静态页面，打开怎么样就是怎么样，不会变的）

你可以按照“自上而下”（即，从较高层级的组件，例如 FilterableProductTable，开始构建）或“自下而上”（即，从较低层级的组件，例如 ProductRow，开始构建）的顺序构建所有组件。在比较简单的项目中，自上而下的方式通常共容易；而在较大的项目中，自下而上的方式更容易。

3. 找到UI状态中的最小且完整的呈现state

state的目的就是为了让UI具有交互性，设置state的原则标准就是 DRY（Don't Repeat Yourself）

state就是程序中变化最小的数据集看，找出程序需要的状态的最小表示并计算其对应的内容

现在回想一下这个示例程序中的所有数据：

1. The original list of products
2. The search text the user has entered
3. The value of the checkbox
4. The filtered list of products

Which of these are state? Identify the ones that are not:

• Does it remain unchanged over time? If so, it isn’t state.
• Is it passed in from a parent via props? If so, it isn’t state.
• Can you compute it based on existing state or props in your component? If so, it definitely isn’t state!

What’s left is probably state.

Let’s go through them one by one again:

1. The original list of products is passed in as props, so it’s not state.
2. The search text seems to be state since it changes over time and can’t be computed from anything.
3. The value of the checkbox seems to be state since it changes over time and can’t be computed from anything.
4. The filtered list of products isn’t state because it can be computed by taking the original list of products and filtering it according to the search text and value of the checkbox.

This means only the search text and the value of the checkbox are state! Nicely done!

在教程中，感觉整一个的思想逻辑过程的逐步的，首先是找出所有需要的模块属于的数据，需要的数据类型或者说状态类型，受什么影响，导致其变化的是prop还是state。通过一系列分析得出你最终需要设置的state的值是什么（可能在平时的开发中，我们并不会做这么一件事情，但是实际上应该去参考，因为这样会使我们的代码更加简洁和功能不会冗余）

同时应该分区prop和state的区别

4. 定义state应该被放在哪里

在第三步骤中，我们找到了我们需要设置的state的值，接下来就是需求确实state什么时候被改变，被谁改变（或者影响其改变）。

Remember: React uses one-way data flow, passing data down the component hierarchy from parent to child component. It may not be immediately clear which component should own what state. This can be challenging if you’re new to this concept, but you can figure it out by following these steps!

在文档这的这句话一开始并不是很好理解，其实他想阐述的一点就是prop和state都会导致react重新渲染，而我们在这里是去设置state，prop并不是我们考虑的范围，但是它同时也是可以去更改数据，从而使整个页面重新渲染。所以需求去找出什么元素需要什么state值（毕竟有些元素的值是来自prop，如果是这样改变这个的不是他自己，而且来自父组件的prop）

文档中提供了下述方式让我们去定义在应用程序在的state

For each piece of state in your application:

1. Identify every component that renders something based on that state.
2. Find their closest common parent component—a component above them all in the hierarchy.
3. Decide where the state should live:
   1. Often, you can put the state directly into their common parent.
   2. You can also put the state into some component above their common parent.
   3. If you can’t find a component where it makes sense to own the state, create a new component solely for holding the state and add it somewhere in the hierarchy above the common parent component.

文档中提供的分析方法的最主要逻辑就是理清楚父子组件以及元素之间的关系，这样有利于我们去找出该在哪里设置state这个值。

在这个原理的基础上，再对上述的案例进行分解

1. Identify components that use state:
   • ProductTable needs to filter the product list based on that state (search text and checkbox value).
   • SearchBar needs to display that state (search text and checkbox value).
2. Find their common parent: The first parent component both components share is FilterableProductTable.
3. Decide where the state lives: We’ll keep the filter text and checked state values in FilterableProductTable.

So the state values will live in FilterableProductTable.

文档中有实现的代码和方法（链接），这里不记录，主要从理论的角度去研究设置state该怎么思考

5. 添加一个逆数据流

个人翻译的不怎么好，文档标题为 Add inverse data flow。

就是react是一个单向的data flow（one-way data flow），所以state的状态是不能够通过这种方式去更新的，因为这种单向的是由上到下的，而state的更新仅仅是在最底层的元素触发而产生的，言外之意就是上面不知道下面做了什么，但是上面改变下面是一定知道的。所以需要去在底层去添加一个可以更新state的方法（或者说就是告诉上面我变了），就是用了一个“useState()"

具体的写法可以参考文档Add inverse data flow