这篇文章主要介绍了React为 Vue 引入容器组件展示组件的教程详解,文中很详细的给大家介绍了使用容器组件的原因,需要的朋友可以参考下

如果你使用过 Redux 开发 React,你一定听过 容器组件(Smart/Container Components) 或 展示组件(Dumb/Presentational Components),这样划分有什么样的好处,我们能否能借鉴这种划分方式来编写 Vue 代码呢?这篇文章会演示为什么我们应该采取这种模式,以及如何在 Vue 中编写这两种组件。

为什么要使用容器组件?

假如我们要写一个组件来展示评论,在没听过容器组件之前,我们的代码一般都是这样写的:

components/CommentList.vue

<template> <ul> <li v-for="comment in comments" :key="comment.id" > {{comment.body}}—{{comment.author}} </li> </ul> </template> <script> export default { name: 'CommentList', computed: { comments () { return this.$store.state.comments } }, mounted () { this.$store.dispatch('fetchComments') } } </script>

store/index.js

import Vue from 'vue'; import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({ state: { comments: [], }, mutations: { setComments(state, comments) { state.comments = comments; }, }, actions: { fetchComments({commit}) { setTimeout(() => { commit('setComments', [ { body: '霸气侧漏', author: '雷叔', id: 1123, }, { body: '机智如我', author: '蕾妹', id: 1124, }, ]); }); }, }, });

export default store;

这样写看起来理所当然,有没有什么问题,或者可以优化的地方呢?

有一个很显而易见的问题,由于 CommentList.vue 与 项目的 Vuex store 产生了耦合,导致脱离当前的项目很难复用。

有没有更好的组件的组织方式,可以解决这个问题呢?是时候了解下 React 社区的容器组件的概念了。

什么是容器组件

在 React.js Conf 2015 ,有一个 Making your app fast with high-performance components 的主题介绍了容器组件。

React为 Vue 引入容器组件和展示组件的教程详解

容器组件专门负责和 store 通信,把数据通过 props 传递给普通的展示组件,展示组件如果想发起数据的更新,也是通过容器组件通过 props 传递的回调函数来告诉 store。

由于展示组件不再直接和 store 耦合,而是通过 props 接口来定义自己所需的数据和方法,使得展示组件的可复用性会更高。

容器组件 和 展示组件 的区别



展示组件容器组件

作用描述如何展现(骨架、样式)描述如何运行(数据获取、状态更新)

直接使用 store否是

数据来源props监听 store state

数据修改从 props 调用回调函数向 store 派发 actions

来自 Redux 文档 https://user-gold-cdn.xitu.io/2018/5/2/1631f590aa5512b7

用 容器组件/展示组件 模式改造上面的例子

针对最初的例子,如何快速按照这种模式来划分组件呢?我们主要针对 CommentList.vue 进行拆分,首先是基本的概要设计:

概要设计

展示组件

components/CommentListNew.vue 这是一个新的评论展示组件,用于展示评论
comments: Array prop 接收以 { id, author, body } 形式显示的 comment 项数组。
fetch() 接收更新评论数据的方法
展示组件只定义外观并不关心数据来源和如何改变。传入什么就渲染什么。

comments、fetch 等这些 props 并不关心背后是否是由 Vuex 提供的,你可以使用 Vuex,或者其他状态管理库,甚至是一个 EventBus,都可以复用这些展示组件。

同时,可以利用 props 的类型和验证来约束传入的内容,比如验证传入的 comments 是否是一个含有指定字段的对象,这在之前混合组件的情况是下是没有的,提高了代码的健壮性。

容器组件

containers/CommentListContainer.vue 将 CommentListNew 组件连接到 store
容器组件可以将 store 对应的 state 或者 action 等封装传入展示组件。

编码实现

Talk is cheap, show me the code!
components/CommentListNew.vue

这个文件不再依赖 store,改为从 props 传递。

值得注意到是 comments 和 fetch 分别定义了 type 、default 和 validator,用以定义和验证 props。

<template> <ul> <li v-for="comment in comments" :key="comment.id" > {{comment.body}}—{{comment.author}} </li> </ul> </template> <script> export default { name: 'CommentListNew', props: { comments: { type: Array, default () { return [] }, validator (comments) { return comments.every(comment => 'body' in comment && 'author' in comment && 'id' in comment ) } }, fetch: { type: Function, default: () => {} } }, mounted () { this.fetch() } } </script>

containers/CommentListContainer.vue

容器组件的职责

通过 computed 来获取到状态更新,传递给展示组件

通过 methods 定义回调函数,回调函数内部调用 store 的 dispatch 方法,传递给展示组件

<template> <CommentList :comments="comments" :fetch="fetchComments" ></CommentList> </template> <script> import CommentList from '@/components/CommentListNew' export default { name: 'CommentListContainer', components: { CommentList }, computed: { comments () { return this.$store.state.comments } }, methods: { fetchComments () { return this.$store.dispatch('fetchComments') } } } </script>

使用 @xunlei/vuex-connector 实现容器组件

上面演示的容器组件的代码非常简单,实际上如果直接投入生产环境,会产生一些问题。

手动实现容器组件存在的不足

代码比较繁琐