如何将遵循SOLID原则中的单一职责原则的React代码改写成一个长尾？

本文共计1939个文字，预计阅读时间需要8分钟。

目录 + 单一职责原则 + 从一个简单的例子开始 +

1.移动数据处理逻辑 + 2. 可重用的数据获取钩子 + 3. 分离UI组件 + 让我们回顾一下，我们刚刚做了什么 + 总结 + SOLID原则的主要目的是作为单一职责原则的补充。

目录

• 什么是单一责任原则？
• 让我们从一个糟糕的例子开始
• 1. 移动数据处理逻辑
• 2. 可重用的数据获取钩子
• 3. 分解 UI 组件
• 让我们回顾一下我们刚刚做了什么
• 总结

SOLID 原则的主要是作为关心自己工作的软件专业人员的指导方针，那些以经得起时间考验的设计精美的代码库为荣的人。

今天，我们将从一个糟糕的代码示例开始，应用 SOLID 的第一个原则，看看它如何帮助我们编写小巧、漂亮、干净的并明确责任的 React 组件，。

什么是单一责任原则？

单一责任原则告诉我们的是，每个类或组件应该有一个单一的存在目的。

组件应该只做一件事，并且做得很好。

让我们重构一段糟糕但正常工作的代码，并使用这个原则使其更加清晰和完善。