This time I will show you how to use React to introduce container components and display components into Vue, and what are the things to note when using React to introduce container components and display components into Vue. The following is a practical case. Let’s take a look. . If you have used Redux to develop React, you must have heard of container components (Smart/Container Components) or presentation components (Dumb/Presentational Components). What are the benefits of this division? Can we learn from this? What are the different ways to write Vue code? This article will demonstrate why we should adopt this pattern and how to write both components in Vue.
Why use container components?If we want to write a component to display comments, before we have heard of container components, our The code is generally written like this:
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;
It seems natural to write it this way. Are there any problems or areas that can be optimized?
There is an obvious problem. Since CommentList.vue is coupled with the Vuex store of the project, it is difficult to reuse it without the current project.
Is there a better way to organize components that can solve this problem? It’s time to understand the concept of container components in the React community.
What is a container componentIn React.js Conf 2015, there is a topic of Making your app fast with high-performance components introduced Container component.
The container component is specifically responsible for communicating with the store and passing data to the ordinary display component through props. If the display component wants to initiate an update of data, it also passes it through the container component through props. The
Callback functionis used to tell the store. Since the display component is no longer directly coupled with the store, but defines the data and methods it needs through the props interface, the reusability of the display component will be higher.
The difference between container components and display components
Container component |
||
---|---|---|
Describe how to run (data acquisition, status update) | Use store directly | |
Yes | Data source | |
Listen to store state | Data modification | |
Dispatching actions to store |
The above is the detailed content of How to use React to introduce container components + display components to Vue. For more information, please follow other related articles on the PHP Chinese website!