是否可以举例理解`严格区分 Container Component 和 Presentational Component 的职责`这句话呢?
关于React的组件的设计,有以下经验:
在平时的开发中,应该避免数据交互逻辑与数据渲染的过于耦合,严格区分 Container Component 和 Presentational Component 的职责不仅可以更容易的复用组件,而且也容易定位问题的所在。
请问下,是否可以举例理解这句话呢?
回复
1个回答

test
2024-07-11
其实简单区分就是,Container Components
基本都会有API请求的操作,比如说,获取列表数据。Presentational Component
的话,就是简单的只负责视图渲染和一些UI交互。
比如说思否的专栏板块,会有一个文章列表,切换到招聘板块也会有一个文章列表。这俩个板块请求的数据接口是不一样的,但是其内部渲染的文章列表的样式和交互是一致的。
那么就可以把专栏板块和招聘板块单中的文章列表提取出来,作为一个文章列表的视图组件来使用,这样只需要专栏板块和招聘板块的分页数据 props
给文章列表就可以了,如果有增删改的功能,也是文章列表把操作提交给专栏/招聘板块组件,由他们去请求API。
总的来说就一个是个负责操作数据请求/操作数据,一个负责渲染视图。
回复

适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容