Vue에 컨테이너 구성 요소 및 디스플레이 구성 요소를 소개하는 React에 대한 자세한 튜토리얼-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

Vue에 컨테이너 구성 요소 및 디스플레이 구성 요소를 소개하는 React에 대한 자세한 튜토리얼

不言

May 05, 2018 am 11:48 AM

react 전시하다 구성 요소

이 글은 주로 Vue에 컨테이너 컴포넌트와 디스플레이 컴포넌트를 소개하는 상세한 튜토리얼을 소개하고 있습니다. 이 글에서는 컨테이너 컴포넌트를 사용하는 이유를 아주 자세하게 소개하고 있습니다. 도움이 필요한 친구들이 참고할 수 있습니다.

Redux를 사용하여 React를 개발한 적이 있다면, 컨테이너 컴포넌트(스마트/컨테이너 컴포넌트) 또는 프레젠테이션 컴포넌트(Dumb/프레젠테이션 컴포넌트)에 대해 들어보셨을 것입니다. 이 부서에서 Vue 코드 작성을 배울 수 있나요? 이 기사에서는 이 패턴을 채택해야 하는 이유와 Vue에서 두 구성 요소를 모두 작성하는 방법을 보여줍니다.

컨테이너 구성 요소를 사용하는 이유

주석을 표시하는 구성 요소를 작성하려는 경우 컨테이너 구성 요소에 대해 들어보기 전에 일반적으로 코드는 다음과 같이 작성됩니다.

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

로그인 후 복사

store/index.js

import Vue from &#39;vue&#39;;
import Vuex from &#39;vuex&#39;;

로그인 후 복사

Vue.use(Vuex);

const store = new Vuex.Store({
 state: {
 comments: [],
 },

 mutations: {
 setComments(state, comments) {
  state.comments = comments;
 },
 },

 actions: {
 fetchComments({commit}) {
  setTimeout(() => {
  commit(&#39;setComments&#39;, [
   {
   body: &#39;霸气侧漏&#39;,
   author: &#39;雷叔&#39;,
   id: 1123,
   },
   {
   body: &#39;机智如我&#39;,
   author: &#39;蕾妹&#39;,
   id: 1124,
   },
  ]);
  });
 },
 },
});

로그인 후 복사

export default store;

이렇게 쓰는 게 자연스러운 것 같은데요. ? 아니면 최적화할 수 있는 영역은 어떻습니까?

CommentList.vue와 프로젝트의 Vuex 스토어 간의 결합으로 인해 현재 프로젝트 없이는 재사용이 어렵다는 명백한 문제가 있습니다.

이 문제를 해결할 수 있는 구성 요소를 구성하는 더 좋은 방법이 있습니까? 이제 React 커뮤니티에서 컨테이너 구성 요소의 개념을 이해해야 할 때입니다.

컨테이너 컴포넌트란 무엇인가요?

React.js Conf 2015에서는 컨테이너 컴포넌트를 도입한 고성능 컴포넌트로 앱을 빠르게 만드는 주제가 있었습니다.

컨테이너 구성 요소는 특히 저장소와 통신하고 props를 통해 일반 디스플레이 구성 요소에 데이터를 전달하는 역할을 담당합니다. 디스플레이 구성 요소가 데이터 업데이트를 시작하려는 경우 전달된 콜백 함수를 통해 저장소에도 알립니다. 소품을 통한 컨테이너 구성 요소.

디스플레이 컴포넌트는 더 이상 매장과 직접 연결되지 않고, props 인터페이스를 통해 필요한 데이터와 메소드를 정의하므로 디스플레이 컴포넌트의 재사용성이 높아집니다.

컨테이너 컴포넌트와 디스플레이 컴포넌트의 차이점

디스플레이 컴포넌트컨테이너 컴포넌트Function디스플레이 방법 설명(골격, 스타일)실행 방법 설명(데이터 획득, 상태 업데이트)스토어 직접 사용No 데이터 소스props스토어 상태 듣기데이터 수정props에서 콜백 함수 호출스토어로 작업 전달

来自 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: &#39;CommentListNew&#39;,

 props: {
 comments: {
  type: Array,
  default () {
  return []
  },
  validator (comments) {
  return comments.every(comment =>
   &#39;body&#39; in comment &&
   &#39;author&#39; in comment &&
   &#39;id&#39; 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 &#39;@/components/CommentListNew&#39;

export default {
 name: &#39;CommentListContainer&#39;,

 components: {
 CommentList
 },

 computed: {
 comments () {
  return this.$store.state.comments
 }
 },

 methods: {
 fetchComments () {
  return this.$store.dispatch(&#39;fetchComments&#39;)
 }
 }
}
</script>

로그인 후 복사

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

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

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

代码比较繁琐

在上面的例子中，每次传递一个 state 都要定义一个 computed，每传递一个 mutation 或者 action 都需要定一个方法，而且还要注意这个方法的参数要透传过去，同时还要处理返回值，比如异步的 action 需要返回 promise 的时候，定义的这个 method 也得把 action 的返回值返回出去。

无法透传其他 props 给展示组件

比如展示组件新增了一个 prop 叫做 type，可以传递一个评论的类型，用来区分是热门还是最新，如果用上面的容器实现方式，首先需要在容器组件这层新增一个 prop 叫做 type 接受外部传来的参数，然后在展示组件内部同样定义一个叫做 type 的 prop，然后才能传递下去。

需要透传的 prop 必须定义两遍，增加了维护的成本。

<CommentListContainer type="热门"></CommentListContainer>
<CommentList
 :fetch="fetchComments"
 :comments="comments"
 :type="type"
 ></CommentList>

로그인 후 복사

容器组件无法统一进行优化

每一个手动实现的容器组件实质上代码逻辑非常近似，但是没有经过同一层封装，如果目前实现的容器组件存在一些性能优化的地方，需要每个容器组件都进行统一的修改。

无法控制展示组件不去获取 store

因为容器组件是通过 this.$store 获取 store 的，展示组件内部实质上也可以直接跟 store 通信，如果没有约束，很难统一要求展示组件不得直接和 store 通信。

使用 @xunlei/vuex-connector

@xunlei/vuex-connector 借鉴了 react redux 的 connect 方法，在 vuex 基础上进行的开发。

有以下几个特点：

代码非常简洁

下面是上面例子中手动实现的容器组件的改造版本：

comonents/ConnectCommentListContainer.vue

<script>
import CommentListNew from &#39;@/components/CommentListNew&#39;
import { connector } from &#39;@/store&#39;

export default connector.connect({
 mapStateToProps: {
  comments: (state) => state.comments
 },
 mapActionToProps: {
  fetch: &#39;fetchComments&#39;
 }
})(CommentListNew)
</script>

로그인 후 복사

通过 connector 的 connnect 方法，传入要映射的配置，支持 mapStateToProps, mapGettersToProps, mapDispatchToProps, mapCommitToProps 这四种，每一种都是只要配置一个简单的 map 函数，或者字符串即可。

然后在返回的函数中传入要连接的展示组件，是不是非常的简洁，同时借鉴了 redux 优雅的函数式风格。

问题来了，connector 是什么？

connector 实际上是一个能获取到 store 实例的连接器，可以在初始化 vuex store 的时候进行初始化。

import Vue from &#39;vue&#39;;
import Vuex from &#39;vuex&#39;;
import VuexConnector from '@xunlei/vuex-connector';
Vue.use(Vuex);
const store = new Vuex.Store({
 // your store
});
export const connector = new VuexConnector(store);
export default store;

로그인 후 복사

一个 Vue 程序实际上只需要初始化一次即可。

支持透传其他 props 给展示组件

VuexConnector 实现的时候采用了函数式组件( functional: true )

函数式组件是无状态 (没有响应式数据)，无实例 (没有 this 上下文)。

在作为包装组件时函数式组件非常有用，比如，当你需要做这些时：

程序化地在多个组件中选择一个

在将 children, props, data 传递给子组件之前操作它们。

另外，函数式组件只是一个函数，所以渲染开销也低很多。然而，对持久化实例的缺乏也意味着函数式组件不会出现在 Vue devtools 的组件树里。

因此需要透传的 props 可以直接透传，需要通过 map 方式从 store 里进行获取的 props 直接会根据配置生成。

统一封装方便后续统一优化

VuexConnector.connect 方法将本来需要重复做的事情进行了抽象，也带来了后期进行统一优化和升级的便利。

可以控制展示组件无法直接与 store 通信

VuexConnector 不依赖 this.$store，而是依赖初始化传入的 store 实例，容器组件可以用 connect 将展示组件与 store 进行连接。

由于不依赖 this.$store，我们在程序入口 new Vue 的时候，就不需要传入 store 实例了。

比如，之前我们是通过下面的方式进行初始化：

import Vue from &#39;vue&#39;;
import App from &#39;./App&#39;;
import store from &#39;./store&#39;;
new Vue({
 el: &#39;#app&#39;,
 components: {App},
 template: &#39;<App/>&#39;,
 store,
});

로그인 후 복사

使用了 VuexConnector 之后，在最初 new Vue 的时候就不需要也最好不要传递 store 了，这样就避免了 this.$store 泛滥导致代码耦合的问题。

引入容器组件/展示组件模式带来的好处

可复用性

容器组件/展示组件的划分，采用了单一职责原则的设计模式，容器组件专门负责和 store 通信，展示组件只负责展示，解除了组件的耦合，可以带来更好的可复用性。

健壮性

由于展示组件和容器组件是通过 prop 这种接口来连接，可以利用 props 的校验来增强代码的可靠性，混合的组件就没有这种好处。

另外对 props 的校验可以采取一下几种方式：

Vue 组件 props 验证

可以验证 props 的类型，默认可以校验是否是以下类型：

String
Number
Boolean
Function
Object
Array
Symbol

如果你的 props 是类的一个实例，type 也可以是一个自定义构造器函数，使用 instanceof 检测。

如果还是不满足需求，可以自定义验证函数：

// 自定义验证函数
propF: {
 validator: function (value) {
  return value > 10
 }
}

로그인 후 복사

TypeScript 类型系统

Vue 组件 props 验证对于对象或者其他复杂的类型校验还是不太友好，所以很多人也推荐大家的 props 尽量采取简单类型，不过如果你有在用 TypeScript 开发 Vue 应用，可以利用 TypeScript 静态类型检查来声明你的 props 。

@Component
export default class Hello extends Vue {
 @Prop
 info: IHelloInfo; // 这里可以用你自定义的 interface
}

로그인 후 복사

可测试性

由于组件做的事情更少了，使得测试也会变得容易。

容器组件不用关心 UI 的展示，只关心数据和更新。

展示组件只是呈现传入的 props ，写单元测试的时候也非常容易 mock 数据层。

引入容器组件/展示组件模式带来的限制

学习和开发成本

因为容器组件/展示组件的拆分，初期会增加一些学习成本，不过当你看完这篇文章，基本上也就入门了。

在开发的时候，由于需要封装一个容器，包装一些数据和接口给展示组件，会增加一些工作量， @xunlei/vuex-connector 通过配置的方式可以减轻不少你的工作量。

另外，在展示组件内对 props 的声明也会带来少量的工作。

总体来说，引入容器组件/展示组件模式投入产出比还是比较值得的。

핫 AI 도구

뜨거운 도구

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7569

Cakephp 튜토리얼

1386

Steam의 계정 이름 형식은 무엇입니까?

Win11 활성화 키 영구

NYT 연결 힌트와 답변

107

Related knowledge

React 프론트엔드와 백엔드 분리 가이드: 프론트엔드와 백엔드의 분리 및 독립적 배포를 달성하는 방법 Sep 28, 2023 am 10:48 AM

React 프론트엔드와 백엔드 분리 가이드: 프론트엔드와 백엔드 분리 및 독립적 배포를 달성하는 방법, 구체적인 코드 예제가 필요합니다. 오늘날의 웹 개발 환경에서는 프론트엔드와 백엔드 분리가 추세가 되었습니다. . 프런트엔드 코드와 백엔드 코드를 분리함으로써 개발 작업을 보다 유연하고 효율적으로 수행하고 팀 협업을 촉진할 수 있습니다. 이 기사에서는 React를 사용하여 프런트엔드와 백엔드 분리를 달성하고 이를 통해 디커플링 및 독립적 배포 목표를 달성하는 방법을 소개합니다. 먼저 프론트엔드와 백엔드 분리가 무엇인지 이해해야 합니다. 전통적인 웹 개발 모델에서는 프런트엔드와 백엔드가 결합되어 있습니다.

Windows 10 이전 버전 구성 요소 DirectPlay를 설치하는 방법 Dec 28, 2023 pm 03:43 PM

많은 사용자가 win10에서 일부 게임을 플레이할 때 화면이 멈추거나 화면이 흐려지는 등의 문제에 항상 직면합니다. 이때 다이렉트 플레이 기능을 켜면 문제를 해결할 수 있으며 기능 작동 방법도 매우 간단합니다. 이전 버전의 win10 컴포넌트 다이렉트플레이 설치 방법 1. 검색 상자에 "제어판"을 입력하고 엽니다. 2. 보기 방법으로 큰 아이콘을 선택합니다. 3. "프로그램 및 기능"을 찾습니다. 4. 활성화 또는 활성화하려면 왼쪽을 클릭합니다. Win 기능 끄기 5. 여기에서 이전 버전을 선택하세요. 확인란을 선택하세요.

React와 RabbitMQ를 사용하여 안정적인 메시징 앱을 구축하는 방법 Sep 28, 2023 pm 08:24 PM

React 및 RabbitMQ를 사용하여 안정적인 메시징 애플리케이션을 구축하는 방법 소개: 최신 애플리케이션은 실시간 업데이트 및 데이터 동기화와 같은 기능을 달성하기 위해 안정적인 메시징을 지원해야 합니다. React는 사용자 인터페이스 구축을 위한 인기 있는 JavaScript 라이브러리인 반면 RabbitMQ는 안정적인 메시징 미들웨어입니다. 이 기사에서는 React와 RabbitMQ를 결합하여 안정적인 메시징 애플리케이션을 구축하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. RabbitMQ 개요:

React Router 사용자 가이드: 프런트엔드 라우팅 제어 구현 방법 Sep 29, 2023 pm 05:45 PM

ReactRouter 사용자 가이드: 프런트엔드 라우팅 제어 구현 방법 단일 페이지 애플리케이션의 인기로 인해 프런트엔드 라우팅은 무시할 수 없는 중요한 부분이 되었습니다. React 생태계에서 가장 널리 사용되는 라우팅 라이브러리인 ReactRouter는 풍부한 기능과 사용하기 쉬운 API를 제공하여 프런트 엔드 라우팅 구현을 매우 간단하고 유연하게 만듭니다. 이 기사에서는 ReactRouter를 사용하는 방법을 소개하고 몇 가지 구체적인 코드 예제를 제공합니다. ReactRouter를 먼저 설치하려면 다음이 필요합니다.

React와 Apache Kafka를 사용하여 실시간 데이터 처리 애플리케이션을 구축하는 방법 Sep 27, 2023 pm 02:25 PM

React 및 Apache Kafka를 사용하여 실시간 데이터 처리 애플리케이션을 구축하는 방법 소개: 빅 데이터 및 실시간 데이터 처리가 증가함에 따라 실시간 데이터 처리 애플리케이션 구축은 많은 개발자의 추구 사항이 되었습니다. 널리 사용되는 프런트엔드 프레임워크인 React와 고성능 분산 메시징 시스템인 Apache Kafka의 조합은 실시간 데이터 처리 애플리케이션을 구축하는 데 도움이 될 수 있습니다. 이 기사에서는 React와 Apache Kafka를 사용하여 실시간 데이터 처리 애플리케이션을 구축하는 방법을 소개합니다.

PHP, Vue 및 React: 가장 적합한 프런트엔드 프레임워크를 선택하는 방법은 무엇입니까? Mar 15, 2024 pm 05:48 PM

PHP, Vue 및 React: 가장 적합한 프런트엔드 프레임워크를 선택하는 방법은 무엇입니까? 인터넷 기술이 지속적으로 발전함에 따라 프런트엔드 프레임워크는 웹 개발에서 중요한 역할을 합니다. PHP, Vue, React는 세 가지 대표적인 프론트엔드 프레임워크로 각각 고유한 특성과 장점을 가지고 있습니다. 사용할 프런트 엔드 프레임워크를 선택할 때 개발자는 프로젝트 요구 사항, 팀 기술 및 개인 선호도를 기반으로 정보를 바탕으로 결정을 내려야 합니다. 이 글에서는 세 가지 프론트엔드 프레임워크인 PHP, Vue, React의 특징과 용도를 비교해보겠습니다.

Angular 구성 요소 및 해당 표시 속성: 비블록 기본값 이해 Mar 15, 2024 pm 04:51 PM

Angular 프레임워크의 구성 요소에 대한 기본 표시 동작은 블록 수준 요소에 대한 것이 아닙니다. 이 디자인 선택은 구성 요소 스타일의 캡슐화를 촉진하고 개발자가 각 구성 요소가 표시되는 방법을 의식적으로 정의하도록 장려합니다. CSS 속성 표시를 명시적으로 설정하면 Angular 구성 요소의 표시를 완전히 제어하여 원하는 레이아웃과 응답성을 얻을 수 있습니다.

이전 버전의 win10 구성 요소 설정을 여는 방법 Dec 22, 2023 am 08:45 AM

Win10 이전 버전 구성요소는 일반적으로 기본적으로 닫혀 있으므로 사용자가 직접 설정해야 합니다. 먼저 작업은 아래 단계를 따르기만 하면 됩니다. 1. 시작을 클릭한 다음 "Win 시스템"을 클릭합니다. 2. 클릭하여 제어판으로 들어갑니다. 3. 그런 다음 아래 프로그램을 클릭합니다. 4. "Win 기능 활성화 또는 끄기"를 클릭합니다. 5. 여기에서 원하는 것을 선택할 수 있습니다. 열기 위해

See all articles

Vue에 컨테이너 구성 요소 및 디스플레이 구성 요소를 소개하는 React에 대한 자세한 튜토리얼

핫 AI 도구

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제