React 进阶面试题, 什么是 React 的业务组件和技术组件?有什么区别?
React 进阶面试题, 什么是 React 的业务组件和技术组件?有什么区别?
QA
Step 1
Q:: 什么是 React 的业务组件和技术组件？有什么区别？
A:: React 中的业务组件（Business Components）通常是与特定业务逻辑或功能密切相关的组件。这些组件往往是高度定制的，用于解决某个业务需求，比如一个购物车、用户列表或订单管理界面。相反，技术组件（Technical Components）是为了实现某些通用的、与业务无关的功能而设计的组件，比如一个按钮、表单、模态框或列表。这些组件更通用，能够在不同的业务场景中复用。简而言之，业务组件关注的是'做什么'，而技术组件关注的是'怎么做'。
Step 2
Q:: 为什么要在 React 项目中区分业务组件和技术组件？
A:: 区分业务组件和技术组件可以帮助开发者更好地组织和管理代码，提高组件的复用性和可维护性。业务组件专注于特定的业务逻辑，能够更容易地处理复杂的业务需求，而技术组件则可以在多个业务组件中重复使用，减少重复代码，并提供一致的用户体验。这种划分在大型项目中尤为重要，因为它可以帮助开发团队明确责任分工，减少耦合，增强代码的可测试性和可扩展性。
Step 3
Q:: 如何设计和开发高内聚、低耦合的 React 组件？
A:: 设计高内聚、低耦合的组件需要遵循以下原则：首先，组件应该只关注单一职责（单一职责原则），即每个组件只负责一件事。其次，组件之间的依赖关系应尽量减少，可以通过传递 props 来共享数据，避免直接修改其他组件的状态。第三，使用上下文（Context API）或全局状态管理工具（如 Redux）来处理跨组件的状态共享。最后，尽量将逻辑从组件中抽离出来，放到自定义 Hook 中，使组件代码更简洁、易于测试。
Step 4
Q:: 在设计技术组件时，如何确保它们的通用性？
A:: 为了确保技术组件的通用性，首先要避免组件与特定业务逻辑的耦合。其次，组件应该支持可配置的 props，以适应不同的使用场景。第三，尽量使用子组件（children）和 render props 等模式，以提高组件的灵活性。此外，还应该为组件定义明确的接口和文档，使其他开发者能够方便地使用这些组件。最后，注意组件的样式和 UI 一致性，确保技术组件在不同的业务场景中能保持统一的外观和行为。