是否可以举例理解`严格区分 Container Component 和 Presentational Component 的职责`这句话呢?

作者站长头像
站长
· 阅读数 8

关于React的组件的设计,有以下经验:

在平时的开发中,应该避免数据交互逻辑与数据渲染的过于耦合,严格区分 Container Component 和 Presentational Component 的职责不仅可以更容易的复用组件,而且也容易定位问题的所在。

请问下,是否可以举例理解这句话呢?

回复
1个回答
avatar
test
2024-07-11

其实简单区分就是,Container Components 基本都会有API请求的操作,比如说,获取列表数据。Presentational Component 的话,就是简单的只负责视图渲染和一些UI交互。

比如说思否的专栏板块,会有一个文章列表,切换到招聘板块也会有一个文章列表。这俩个板块请求的数据接口是不一样的,但是其内部渲染的文章列表的样式和交互是一致的。

那么就可以把专栏板块和招聘板块单中的文章列表提取出来,作为一个文章列表的视图组件来使用,这样只需要专栏板块和招聘板块的分页数据 props 给文章列表就可以了,如果有增删改的功能,也是文章列表把操作提交给专栏/招聘板块组件,由他们去请求API。

总的来说就一个是个负责操作数据请求/操作数据,一个负责渲染视图。

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