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

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

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

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

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

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

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

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

容器组件

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

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

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