Напишите товарищам, которые переходят с vue на react (3)

Vue.js React.js
Напишите товарищам, которые переходят с vue на react (3)

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

Предпосылки для рассмотрения:

Напишите товарищам, которые переходят с vue на react (1)

Напишите товарищам, которые конвертируют vue в реакцию (2)

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

По сравнению с реагированием его чистых JS, относительно свобода выше, это также означает, что многие вещи, которые вам нужно иметь ручной пакет, поэтому он не такой дружелюбный, поэтому он больше похож на муку, но вы можете сделать больше узорчатой ​​едой.

  • реагировать вычисленные свойства
  • react ref

реагировать на вычисляемые свойства

Мы знаем, что vue предоставляет вычисляемые свойства, чтобы позволить нам реализовать вычисляемые свойства. Пока зависимость меняется, она будет меняться, поэтому она не предоставляется в реакции. Здесь нам нужно реализовать вычисляемые свойства вручную. Вот простой пример:

vue вычисляемое свойство

<template>
    <div>{{ vue_computed }}</div>
</template>

<script>
export default {
    data() {
        msg: 'hello vue'
    },
    computed: {
        vue_computed() {
            return this.msg
        }
    },
    mounted() {
        setTimeout(() => {
            this.msg = 'hello vue change'
        }, 2000)
    }
}
</script>

РЕАКТЫ ОТКЛЮЧЕННЫЕ СВОЙСТВА (КЛАСС НАПИСАНИЕ)

class App extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            msg: 'hello react'
        }
    }
    get react_computed() {
        return this.state.msg
    }
    componentDidMount() {
        setTimeout(() => {
            this.setState({
                msg: 'hello react change'
            })
        }, 2000)
    }
    render() {
        return (
            <div>
                { this.react_computed }
            </div>
        )
    }
    
}

Видно, что в react мы вручную определяем get, чтобы он мог получить значение msg, реализуя таким образом вычисляемое свойство.На самом деле вычисление в vue тоже реализовано на основе get и set.Зависимости собираются в get и обновления рассылаются комплектом.

react ref

Ссылка в vue также очень проста в использовании: вы можете получить ссылку на компонент, пометив ее на соответствующем компоненте, а как насчет реакции? Конечно, его можно использовать и в react, как и в vue, но официалы не рекомендуют использовать ref в виде строки, а в версиях после react16.x его убрали.

Взгляните на описание большого парня:

  • Он просит React отслеживать отображаемый в данный момент компонент (потому что он не может этого угадать). Это делает React немного медленнее.
  • Он не использует шаблон «обратный вызов рендеринга», как ожидало бы большинство людей (например,<DataGrid renderRow={this.renderRow} />), потому что REF будет размещен по причине, по которой упоминается DataGrid.
  • Он не компонуемый, т.е. если библиотека помещает ссылку на переданный дочерний компонент, пользователь не может поместить на него другую ссылку. Ссылки обратного вызова полностью компонуемые.

Пример:

vue ref

<template>
    <div>
        <el-input v-model='value' ref='input'/>
    </div>
</template>

<script>
export default {
    data() {
        value: ''
    },
    mounted() {
        console.log(this.$refs.input)
    }
}
</script>

react ref

class App extends React.Component {
    myRef = React.createRef()
    constructor(props) {
        super(props)
    }
    render() {
        return (
            <div>
                // 正常使用
                <Input ref='input' />
                // 回调使用（可组合）
                <Input ref={input => this['input-' + index]} />
                // 调用api（react16.x）
                <Input ref={myRef}/>
            </div>
        )
    }
    
}

Нам не нужно много говорить о ref в vue.Давайте посмотрим на реакцию.Официал рекомендует третье использование (react16.x).Второе использование будет выполняться дважды в процессе обновления.Его можно использовать определяя стрелочную функцию извне. , но в большинстве случаев это не имеет значения. Первое использование устарело в версиях после react16.x.

Суммировать

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

Я печенька, давайте расти вместе. Наконец, не забудьте поставить лайк, подписаться и собрать тройной клик🌟

Категории