hooks学习笔记—React中的展示与容器组件 Presentational和Container

系统管理员 2023-07-21 08:53 4阅读 0赞

在学习hooks首先看一下这篇文章，明确一下展示组件和容器组件的概念

**React中的展示与容器组件 Presentational和Container**

首先是最重要的一组概念：展示组件与容器组件。同样，在我们提到的，React并不是传统的MVVM框架，它只是在V层，视图层上下功夫。应该对MVVM或MVC都有所了解，那么既然我们的框架现在只有V层的话，在实际开发中应该如何处理数据与视图的关系呢？

为了解决React只有V层的这个问题，更好地区分我们的代码逻辑，展示组件与容器组件这一对概念就被引入了。这同样也是我们在开发React应用时的最佳实践。我们还是先看一个具体的例子来解释这两个概念：

![format_png][]

这是一个回复列表组件，乍看上去很正常也很合理。但实际上在开发React应用时，我们应该避免写出这样的组件，因为这类组件担负的功能太多了。它只是一个单一的组件，但需要同时负责初始化state，通过ajax获取服务器数据，渲染列表内容，在实际应用中，可能还会有更多的功能依赖。这样，在后续维护的时候，不管是我们要修改服务器数据交互还是列表样式内容，都需要去修改同一个组件，逻辑严重耦合，多个功能在同一个组件中维护也不利于团队协作。通过应用展示组件与容器组件的概念，我们可以把上述的单一组件重构为一个展示回复列表组件和回复列表容器：

![format_png 1][]

这样回复列表如何展示与如何获取回复数据的逻辑就被分离到两个组件当中了。我们再来明确一下展示组件和容器组件的概念：展示组件

主要负责组件内容如何展示从props接收父组件传递来的数据大多数情况可以通过函数定义组件声明

容器组件

主要关注组件数据如何交互拥有自身的state，从服务器获取数据，或与redux等其他数据处理模块协作需要通过类定义组件声明，并包含生命周期函数和其他附加方法

那么这样写具体有什么好处呢？

解耦了界面和数据的逻辑更好的可复用性，比如同一个回复列表展示组件可以套用不同数据源的容器组件利于团队协作，一个人负责界面结构，一个人负责数据交互

[format_png]: /images/20230528/e6b6bdaba8114d3fa290d6bd914662db.png
[format_png 1]: /images/20230528/522f321bc36d49c99253287d9000e655.png

发表评论取消回复

表情：

评论列表（有 0 条评论，4人围观）

还没有评论，来说两句吧...

相关阅读

相关 hooks学习笔记—React中的展示与容器组件 Presentational和Container

在学习hooks首先看一下这篇文章，明确一下展示组件和容器组件的概念 React中的展示与容器组件 Presentational和Container 首先是最重要的一组概念

系统管理员/ 2023年07月21日 08:53/ 0 赞/ 5 阅读

相关学习笔记——react公共组件与组件跳转

-------------------- > 在react中，除了页面级组件以外，我们有时还需要一些公共的组件，这些组件会被一个或多个页面级组件使用。例如导航组件和控制数量加

ゝ一纸荒年。/ 2022年11月22日 05:30/ 0 赞/ 249 阅读

相关 React Hooks 学习笔记 | useEffect Hook（二）

![b97b42454a92ef6d0f3ee70b20dcf1d1.png][] 大家好，上一篇文章我们学习了 State Hook 的基础用法，还没看的同学们，小编建议你

待我称王封你为后i/ 2022年10月18日 12:42/ 0 赞/ 280 阅读

相关 React Hooks 学习笔记 | State Hook（一）

![9ee799c66ccae14e33b551f376455696.png][] 大家好，小编最近在梳理 React Hook 的相关内容，由于看视频、看书、自己做项目总觉

绝地灬酷狼/ 2022年10月09日 00:50/ 0 赞/ 211 阅读

相关 React学习笔记二——组件的理解和使用

函数式组件（简单组件）函数名首字母必须大写 ReactDOM.render()的第一个参数必须是首字母大写的闭合标签， <head>

╰半夏微凉°/ 2022年10月09日 00:38/ 0 赞/ 67 阅读

相关 React Hooks的学习与自我理解

存在的意义 Hooks的作用在于完美过渡React中的类写法到函数式表示，因为我们知道React的函数式表示是不能使用生命周期的，Hooks可以代替Rea

待我称王封你为后i/ 2022年09月04日 13:46/ 0 赞/ 137 阅读

相关 React : 展示组件 & 容器组件附案例与视频

写React应用时，我发现了一种简单而有效的模式。如果你也[写过一阵子React][React]，或许你也已经发现它了。对于这种模式，[这篇文章][Link 1]讲得不错，不过

r囧r小猫/ 2022年06月06日 08:45/ 0 赞/ 421 阅读

相关聊聊React的一些玩法（下：九步玩转React容器组件与展示组件）

3、实战容器组件和展示组件的玩法如果学过 redux 的话，会知道， redux 的思想是容器组件和展示组件分离，容器组件存数据，展示组件秀样式。但是光看不练，恐怕

小灰灰/ 2022年05月27日 23:07/ 0 赞/ 364 阅读

相关 React 学习笔记 - 组件基础

组件创建组件的方式 1. createClass 最原始的方法，现在已经在 v16+ 移除 // v16已经移

秒速五厘米/ 2022年01月19日 01:43/ 0 赞/ 259 阅读

相关 react hooks 笔记

1. 建议安装以上版本： "dependencies": { "react": "^16.7.0-alpha.2", "react-d

心已赠人/ 2021年12月21日 00:13/ 0 赞/ 298 阅读