目录
1. 出发：问题是什么？
- 如何正确使用 useState？
- 什么时候使用 useReducer？
- 书写时如何注意react性能问题？
- 什么时候使用 useContext？
- 什么时候使用 redux？
2. 如何设计组件（使用react的正确姿势与步骤）？
我们将根据 官方文档 中 react 哲学 所描述的步骤进行逐步分析，完整文档请移步 React 哲学 – React
第一步：分析页面结构，划分组件层级
当我们拿到一个页面的需求时，我们首先要分析这个页面，将这个页面通过图解拆分成不同的组件，而拆分组件的原则react哲学中也提到过：
你可以将组件当作一种函数或者是对象来考虑，根据单一功能原则来判定组件的范围。也就是说，一个组件原则上只能负责一个功能。如果它需要负责更多的功能，这时候就应该考虑将它拆分成更小的组件
对于拆分组件的细节，react哲学中有完整的过程和示例，这里不多做赘述，请移步官方文档。
为了引出接下来的问题，这里简单模拟一个组件拆分，以做后续分析使用，具体请根据项目业务分析
页面组件层级分别是：
- 一级：MyPage 是当前页面最外层的根组件
- 二级：Form input 是一部分可以输入和选择的部分
- 二级：Main Content 是页面下方主要显示的内容
- 三级：Tab1 Content 是 main 中的其中一个tab
- 三级：Tab2 Content （暂时忽略）
- 四级：Tab1-content_left
- 四级：Tab1-content_right
- 五级：Tab1-content_right_top
- 五级：Tab1-content_rigjt_bottom
第二步：用 React 创建一个静态版本
React哲学中注明的第二个步骤是指当我们确认页面组件结构之后，可以开始书写组件，渲染静态页面，但这里只是静态页面，不涉及交互，更不需要引入 State，对此React文档中也有解释
在构建应用的静态版本时，我们需要创建一些会重用其他组件的组件，然后通过 props 传入所需的数据。props 是父组件向子组件传递数据的方式。即使你已经熟悉了 state 的概念，也完全不应该使用 state 构建静态版本。state 代表了随时间会产生变化的数据，应当仅在实现交互时使用。所以构建应用的静态版本时，你不会用到它。
第三步：确定 UI state 的最小（且完整）表示
当我们书写完静态版本之后，需要分析每个组件需要用到的状态以及需要进行的交互，这里涉及到如何定义State，也就是第一个问题：如何正确使用 useState？对此，react哲学中给出了解决方案：
为了正确地构建应用，你首先需要找出应用所需的 state 的最小表示，并根据需要计算出其他所有数据。其中的关键正是 DRY: Don’t Repeat Yourself。只保留应用所需的可变 state 的最小集合，其他数据均由它们计算产生。比如，你要编写一个任务清单应用，你只需要保存一个包含所有事项的数组，而无需额外保存一个单独的 state 变量（用于存储任务个数）。当你需要展示任务个数时，只需要利用该数组的 length 属性即可。
通过问自己以下三个问题，你可以逐个检查相应数据是否属于 state：
最低0.47元/天 解锁文章
251
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
