Эта серия статей будет постепенно углубляться от мелкого к более глубокому и поможет вам шаг за шагом оценить сходства и различия между react и vue, чтобы вы могли реагировать левой рукой, а Vue — правой.

Предпосылки для рассмотрения:Нажмите, чтобы просмотреть эту серию столбцов

Компоненты высшего порядка с Vue и React

Мы знаем, что React использует компоненты высшего порядка (далее HOC) для повторного использования логики некоторых компонентов. HOC сам по себе не является частью React API, это шаблон проектирования, основанный на композиционной природе React. особенно,Компонент высшего порядка — это функция, параметр которой является компонентом, а возвращаемое значение — новым компонентом.

Компонент преобразует свойства в пользовательский интерфейс, а компонент более высокого порядка преобразует компонент в другой компонент.

const EnhancedComponent = higherOrderComponent(WrappedComponent);

Вышеизложенное взято из официальной документации React.

На самом деле повторно использовать логику компонентов в Vue относительно просто. Миксины используются для смешивания логики повторного использования компонентов. Когда в миксинах слишком много логики (например, методов и свойств), будет сложнее отслеживать исходный код при его использовании. в проекте, потому что он находится в Mixin явно не говорит вам, какой метод используется повторно.

//mixins.js(Vue 2 举例)
export defalut {
    data() {
        return {
            text: 'hello'
        }
    }
}
// a.vue
import mixins from './mixins.js'
export defalut {
    mixins: [mixins]
    computed: {
        acitveText() {
            return `来自mixins的数据：${this.text}`
        }
    }
}

Видно, что кроме введения и монтирования миксина в начале не видноthis.textОткуда это взялось?Смешивание легко использовать, но когда логика сложна, ее трудно читать.

Итак, как насчет того, чтобы принудительно использовать компоненты более высокого порядка, такие как React, во Vue? Конечно вы можете. Просто Vue официально не очень уважает HOC, а сами миксины могут реализовывать функции, связанные с HOC.

Простой пример:

// 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)
        }
    })
}

Используйте компоненты более высокого порядка:

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

<script>
import HOC from './hoc.js'
// 引入某个组件
import xxx from './xxx'

const userInfo = HOC(xxx, 'hello')

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

Они немного сложнее, чем миксины? Преимущества использования компонентов более высокого порядка в Vue качественно не отличаются от миксинов. Но опять же, поначалу React тоже использовал миксины для полного переиспользования кода, например, чтобы избежать ненужного повторного рендеринга компонентов, можно смешивать их в компонентахPureRenderMixin.

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

Позже React используетshallowCompareзаменитьPureRenderMixin.

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

Это нужно реализовать в компоненте самостоятельноshouldComponentUpdateметод, но конкретная работа этого метода определяетсяshallowCompareЧтобы помочь вам завершить, нам просто нужно позвонить.

Позже, чтобы избежать повторного вызова этого кода, React,React.PureComponentПолучилось, короче, React потихоньку отрывается от Mixins, что не особо подходит для их экосистемы. Конечно, у каждой схемы есть свои достоинства, просто подходит ли она для своего фреймворка.

Затем возвращаемся к HOC, как инкапсулировать HOC в React?

На самом деле, я упоминал в предыдущих статьях:Нажмите, чтобы отправить

Но позвольте мне просто привести пример:

Пакет 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()
        }
    }
}

Используйте HOC:

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

Декоратор более краток:

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

Можно видеть, что Vue, React, HOC или Mixins возникли для решения логического повторного использования компонентов, какое решение использовать, зависит от вашего проекта и других факторов.

Сама по себе технология не хороша и не плоха, но со временем она будет заменена другими, более подходящими решениями, и технологическая итерация неизбежна.Я считаю, что как отличный программист я не буду обсуждать, хороша или плоха технология, а только подходит или нет..

Наконец

Я видел все это здесь, тебе не нравится перед отъездом?

Вы можете оставить свои предложения и комментарии ниже.