React with your left hand and Vue with your right.

Prerequisite: Check out this column series

Vue and React advanced components

We know that React uses higher-order components (HOC) to reuse some of the component logic. HOC itself is not part of the React API; it is a design pattern based on the composite features of React. Specifically, a higher-order component is a function that takes a component and returns a new component.

A component converts props to UI, and a higher-order component converts a component to another component.

const EnhancedComponent = higherOrderComponent(WrappedComponent);
Copy the code

The above is from the React documentation.

It’s actually easier to reuse component logic in Vue, mixing it with Mixins. When there’s too much logic in Mixins (such as methods and properties), it’s more difficult to trace back to the source code when using it in a project, because it doesn’t tell you exactly which method is being reused.

//mixins.js(Vue 2 example)
export defalut {
    data() {
        return {
            text: 'hello'}}}// a.vue
import mixins from './mixins.js'
export defalut {
    mixins: [mixins]
    computed: {
        acitveText() {
            return 'Data from Mixins:The ${this.text}`}}}Copy the code

You can see that you don’t see where this.text comes from, except when blending is introduced and mounted at the beginning. Blending works well, but it can be difficult to read when the logic is complex.

What if you want to force a higher-order component like React into Vue? B: Sure. It’s just that Vue officially doesn’t endorse HOC, and Mixins themselves can implement ad-related features.

Here’s a quick example:

// hoc.js
import Vue from 'Vue'

export default const HOC = (component, text) = > {
    return Vue.component('HOC', {
        render(createElement) {
            return createElement(component, {
                on: { ...this.$listeners },
                props: {
                    text: this.text
                }
            })
        },
        data() {
            return {
                text: text,
                hocText: 'HOC'}},mounted() {
            // do something ...
            console.log(this.text)
            console.log(this.hocText)
        }
    })
}

Copy the code

Using higher-order components:

// user.vue
<template>
  <userInfo/>
</template>

<script>
import HOC from './hoc.js'
// Import a component
import xxx from './xxx'

const userInfo = HOC(xxx, 'hello')

export default {
  name: 'user'.components: {
    userInfo
  }
}
</script>

Copy the code

Is it a little more complicated than Mixins? The benefits of using higher-order components in Vue are not substantially different from Mixins. Then again, React initially used Mixins for code reuse, such as purerendermixins, to avoid unnecessary re-rendering of components.

const PureRenderMixin = require('react-addons-pure-render-mixin')
const component = React.createClass({
    mixins: [PureRenderMixin]
})
Copy the code

Later React used shallowCompare instead of PureRenderMixin.

const shallowCompare = require('react-addons-shallow-compare')
const component = React.createClass({
    shouldComponentUpdate: (nextProps, nextState) = > {
        return shallowCompare(nextProps, nextState)
    }
})
Copy the code

ShouldComponentUpdate () {shouldComponentUpdate (); shallowCompare (); shouldComponentUpdate ();

Then React came up with the React.PureComponent to avoid having to call this code repeatedly. React was slowly separating Mixins from their ecosystem, which wasn’t a great fit. Of course, each scheme has its own advantages, just whether it fits its own framework.

So let’s go back to HOC. How do we encapsulate HOC in React?

In fact, I mentioned this earlier in the article: Click to send

But LET me give you a quick example:

Encapsulation HOC:

// hoc.js
export default const HOC = (WrappedComponent) = > {
    return Class newComponent extends WrappedComponent {
        constructor(props) {
            super(props)
            // do something ...
            this.state = {
                text: 'hello'}}componentDidMount() {
            super.componentDidMount()
            // do something ...
            console.log('this.state.text')}render() {
            // init render
            return super.render()
        }
    }
}

Copy the code

Use the HOC:

// user.js
import HOC from './hoc.js'
class user extends React.Component {
    // do something ...
}
export defalut HOC(user)
Copy the code

Decorators are written more succinctly:

import HOC from './hoc.js'
@HOC
class user extends React.Component {
    // do something ...
}
export defalut user
Copy the code

It can be seen that Vue, React, HOC or Mixins are all born to solve the reuse of logic of components. The specific solution to use depends on the fit of your project and other factors.

Technology itself is not good or bad, but will be replaced by other more suitable schemes over time. Technology iteration is also inevitable. I believe that as an excellent programmer, he will not discuss whether a technology is good or bad, only whether it is suitable or not.

The last

Now that you’ve seen this, you’re not gonna leave without a “like”?

Feel free to leave your suggestions and comments below.