Эта статья - не очередная попытка сравнить Vue и React. Если это то, что вы хотите, вы можете найти здесь, здесь, здесь и здесь. Да, и здесь тоже.

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

Даже если они очень похожи, React и Vue могут сильно отличаться в некоторых моментах. Как разработчик Vue на работе и разработчик React дома я часто сталкиваюсь с трудностями при переводе концепций. Итак, я перечислил тот, который использую чаще всего, и их перевод.

Вот мой список.

Смотри на меня 👁

Собственность Watch Vue - это круто. Вкратце, это свойство позволяет вам реагировать на некоторые изменения свойств или состояний так, как вы хотите. Просто скажите Vue, за какой частью состояния или реквизита он должен следить и как реагировать на изменения.

В React мы используем жизненный цикл componentWillUpdate. Этот жизненный цикл запускается каждый раз, когда изменяется состояние или свойства. Таким образом, вы можете легко отслеживать обновления и реагировать на них.

Децентрализованная логика 🤔

Если вы перешли с Vue, велика вероятность, что вы используете миксины. Я знаю 😌. Миксины довольно эффективны, если многие из ваших компонентов используют одну и ту же логику или функции. Просто экспортируйте его в миксин, затем импортируйте в компонент, и готово!

С React совсем другое дело. React любит функциональное программирование и предпочитает композицию компонентов использованию миксинов. На эту тему есть фантастическая статья великого Дэна Абрамова, ее можно найти здесь.

Но что означает компонентный состав AKA компонентов высшего порядка?

Композиция компонентов означает извлечение общей логики в один компонент, который будет отвечать только за это. Затем вам просто нужно объединить его с другими компонентами, чтобы добавить им свои функции.

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

Асинхронные действия 🌐

Иногда вам нужно выполнять асинхронные задачи в своих действиях, например, вызывать API. В Vuex (диспетчер состояний Vue) асинхронные задачи изначально поддерживаются действиями.

С другой стороны, Redux, менеджер состояния React, не позволяет нам этого делать. Мы должны добавить промежуточное ПО redux (redux-thunk) для выполнения асинхронных задач в наших действиях.

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

Надеюсь, вам понравилось! Это очень личный список, который не является исчерпывающим, но он может вам помочь (по крайней мере, я надеюсь 😀). Не стесняйтесь сказать мне, что я ошибаюсь в комментариях или оскорбить меня в твиттере. Спасибо, что прочитали это! ✌🏻