{ "articleTitle": "React学习记录6：如何用React构建应用程序", "date": "2021-5-26 12:0:0", "tags": [ "js", "react" ], "categories": "React.js", "timestamp": 1622030400000, "readingTime": 2, "outline": " 如何用React构建应用程序 1、将UI拆解为组件- 拿到设计图，拆分组件。遵从单一职责原则，即一" }

readingTime: 2min

如何用React构建应用程序

1、将UI拆解为组件

• 拿到设计图，拆分组件。遵从单一职责原则，即一个组件理想情况下只处理一件事。

• 拆分完组件后，对他们进行层级结构排列。即分为父组件、自组件等

2、用 React 构建一个静态版本

只使用props在父子组件间进行传值，没有交互，不要使用state。

3、确定 UI state(状态) 的最小（但完整）表示

要正确的构建应用程序，你首先需要考虑你的应用程序需要的可变 state(状态) 的最小集合。这里的关键是：DRY: 不要重复你自己。找出你的应用程序所需 state(状态) 的绝对最小表示，并且可以以此计算出你所需的所有其他数据内容。例如，如果你正在构建一个 TODO 列表，只保留一个 TODO 元素数组即可;不需要为元素数量保留一个单独的 state(状态) 变量。相反，当你要渲染 TODO 计数时，只需要获取 TODO 数组的长度即可。

如何判断哪些数据是state：

• 是否通过 props(属性) 从父级传入？ 如果是这样，它可能不是 state(状态) 。

• 是否永远不会发生变化？ 如果是这样，它可能不是 state(状态)。

• 是否可以由组件中其他的 state(状态) 或 props(属性) 计算得出？如果是这样，则它不是 state(状态)。

4、确定state的位置

对于应用中的每一个 state(状态) ：

• 确定每个基于这个 state(状态) 渲染的组件。
• 找出公共父级组件（一个单独的组件，在组件层级中位于所有需要这个 state(状态) 的组件的上面。愚人码头注：父级组件）。
• 公共父级组件 或者 另一个更高级组件拥有这个 state(状态) 。
• 如果找不出一个拥有该 state(状态) 的合适组件，可以创建一个简单的新组件来保留这个 state(状态) ，并将其添加到公共父级组件的上层即可。

5、添加反向数据流

即添加setState()，用来在组件状态更新时调用setState方法，完成state更新进而影响页面。

有可能这种写法会比你通常的写法多几行代码，但切记阅读代码的重要性远远高于写代码，模块化、结构清晰的代码最利于阅读。当创建一个大组件库的时候，你将感激模块化、结构清晰和可以重用的代码，同时你的代码行数会慢慢减少。:)