在React中使用Redux的时候,有一种将组件分离的写法,就是将一个组件“请求数据的部分”和“事件处理的部分”分离出去,拆分成容器组件和展示组件,今天看看如何来理解下这种拆分。

首先我们来看一个普通的组件,包含请求数据,事件操作:

看看代码结构:

这种结构中,内部有state,请求数据然后更新state,然后有事件绑定,是一种普通的结构。拆分成容器组件和展示组件,是将普通的组件拆分成"数据部分"和"展示部分":

拆分完后,会变成两个组件,一个组件专门负责展示界面,内部没有state,也没有处理事件的方法,所有的数据都从props里面获取;另外一个则相反,专门处理state和事件,然后将数据通过props传给展示组件。

当然这种拆分平常用的比较少,一般是配合Redux才会使用这种结构。

其他文章

0
我要评论

评论

返回
×

我要评论

回复:

昵称:(昵称不超过20个字)

图片:

提交
还可以输入500个字