请解释React中业务组件与技术组件的概念,并阐述两者之间的主要区别。
考察说明
考察对React组件分类及职责划分的理解。
回答思路
- 【回答框架 1】业务组件:直接与业务逻辑耦合,通常包含数据请求、状态管理及用户交互逻辑,如订单列表组件。技术组件:不关心具体业务,专注于可复用的UI展示或通用交互,如按钮、输入框、通用弹窗。
- 【回答框架 2】区别:业务组件依赖具体业务上下文,复用性低,通常针对特定页面或功能;技术组件与业务解耦,追求高复用性,通过props或children定制。
- 【回答框架 3】边界:技术组件可以组合成业务组件,也支持嵌套;业务组件可能包含多个技术组件,但技术组件不应包含业务逻辑。
- 【回答框架 4】实践:推荐将两者分离,技术组件下沉到底层,业务组件组装,便于维护和测试。
- 【关键点 1】业务组件包含业务逻辑,技术组件只负责通用UI。
- 【关键点 2】技术组件具有高复用性,业务组件复用性低。
- 【关键点 3】技术组件通过props接口与外界通信,业务组件直接调用业务API。
- 【易错点 1】在技术组件中混入业务逻辑,导致复用困难。
- 【易错点 2】过度拆分导致组件通信频繁,性能下降。