React 第十二章 React思想

本章将介绍一下在接到需求时，怎么使用React去实现它，通过实现过程我们来理解React的一些设计思想。

比如我们现在要实现这样一个微信的收藏界面

1，首先第一步需要根据界面功能进行划分组件。

根据界面结构我们将其整体对外红色区域封装为一个组件 WeiChatWindow,其内部分为左侧的工具栏Toolbar，右侧黄色部分为内容面板ContentPanel,内容面板又分为收藏类别FavoriteType以及右边收藏内容列表ContentList.如此我们的class结构基本已经可以确定了

WeiChatWindow
  |--Toolbar
  |--ContentPanel
       |--FavoriteType
       |--ContentList

2，根据划分的组件进行组件界面开发。

开发组件可以根据复杂程度自己决定，如果页面太复杂的话，可以从内往外开发。把小的组件一点点组装成大的。

3，确定哪些数据使用state，哪些使用props。原则使用最少的state来控制组件。

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

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

从上面界面我们可以看到收藏的筛选类型以及关键词可能跟随用户在不同时间可能做不同的选择修改，所以 关键词和收藏类型应为state。而收藏列表内容是通过接口获取。收藏内容列表我们可以通过在父组件中调用后台将结果通过props传递给内容列表ContentList。当然我们也可以将内容列表数据放在内容列表组件中使用state存储。

4，确定state的存在组件的位置

另我们需要确定他在那个组件中使用，从图中我们可以看出最右侧的内容列表ContentList中的数据由类型和关键词通过后台接口查询获得。所以state不仅仅是在ContentList 以及FavoriteType都存在使用，所以我们将其存在他们共有的最近父组件中即ContentPanel组件中则比较合适。

5，添加交互

使FavoriteType中输入的关键词以及收藏类型的值通过自身改变事件 调用父组件通过props传入的回调函数去向上逆向传递。在ContentPanel中获取收藏列表数据传递收藏列表，或者将关键词和类型传递给内容列表组件，内容列表组件内部查询展示列表数据。

 

如上：主要介绍了 如何去根据页面去一步步实现页面功能。其中概括分为 确定组件边界、确定组件的state、props、如何添加交进行联动。