Старый клуб, Vue, писал его два с половиной года со стажировкой, за это время я лишь бегло изучил React, но много не писал. Новый владелец использует React + Typescript, на написание которого ушло полтора месяца.Демонстрационный онлайн-превью.
Вот краткое изложение различий между Vue и Vue.Если вы также находитесь на этапе перехода от Vue к React, добро пожаловать на добавление V для общенияОтсканируйте код и добавьте V
Если у вас другое мнение, поделитесь им в комментариях 🤓
1. Горизонтальное сравнение
1. Официальное сравнение Vue
Официальное сравнение Vue React
2. Личное понимание
Как правило, H5 или некоторые системы, которые мало что делают, предпочитают Vue. Поскольку Vue прост, эффективность разработки относительно высока. В то же время размер пакета Vue также меньше, в случае больших различий в мобильной сети размер ресурса очень важен.
Как и некоторые серверные системы, которые будут становиться все больше и больше, используйте React. Есть больше решений, и их легче повторять и поддерживать позже. (Мне посчастливилось разработать большой проект Vue, горячее обновление веб-пакета 3 минуты+)
2. Основная идея
Раннее позиционирование Vue, насколько это возможно降低前端开发的门槛(Это также связано с тем, что автор Vue является независимым разработчиком). Так Вью推崇Гибкий и простой в использовании (прогрессивный опыт разработки), изменяемые данные, двусторонняя привязка данных (сбор зависимостей).
Ранний слоган React былRethinking Best Practices(переосмыслить лучшие практики). React, который поддерживается крупной компанией Facebook, с самого начала не испытывал недостатка во внимании и пользователях, и React хочет использовать лучший способ ниспровергнуть метод фронтенд-разработки (фактически, он доминировал во фронтенде). конец с jquery в первые дни, что действительно подрывно). Так что реагируй推崇Функциональное программирование (чистые компоненты), неизменность данных и однонаправленный поток данных. Самым большим преимуществом функционального программирования является его стабильность (отсутствие побочных эффектов) и тестируемость (один и тот же ввод, вывод должен быть таким же), поэтому обычно люди говорят, что React подходит для крупномасштабных приложений, а фундаментальной причиной является его функциональность. программирование.
Из-за разницы в основных идеях Vue и React имеют много разных внешних характеристик (с точки зрения разработки).
Цитирование этого старшего брата, чтобы понять разницу между Vue и React
3. Жизненный цикл
Vue
Официальная схема жизненного цикла Vue
React
Жизненный цикл реакции великого богаНажмите на жизненный цикл, чтобы перейти на официальный сайт для интерпретации
Всестороннее сравнение
Жизненный цикл в основном вращается вокруг挂载、更新、卸载три аспекта
- Vue предоставляет больше, но обычно используется:
created/mounted/destroyed - В новой версии React отказались от некоторых, часто используемых:
componentDidMount/componentDidUpdate/componentWillUnmount, крючки не
4. Поток данных
Vue
Двусторонняя привязка, односторонний поток данных: vue2.x черезv-modelДля достижения двусторонней привязки можно не заботиться о контролируемых компонентах, v-model эквивалентна синтаксическому сахару onChange
<input v-model="value" />
React
Однонаправленный поток данных:万物皆 Props, в основном черезonChange/setState()Данные должны обновляться в виде , поэтому нужно обращать внимание на написание контролируемых компонентов в react
// 会报错，props的值不可修改
<input value={this.props.value}/>
// 在onChange调用setState修改数据,需要调用setState修改绑定数据
<input value={this.state.value} onChange={this.onChange}/>
Управляемые компоненты
5. Компоненты
1. Упаковка компонентов
Vue
// 父组件
<template>
<div class="father">
父组件
<Child :text="text"></Child>
</div>
</template>
<script>
import Child from './Child'
export default {
name: 'Father',
components: {
Child
},
data() {
return {
text: '接收到了父组件数据'
}
}
}
</script>
// 子组件
<template>
<div class="child">
<p>{{ text }}</p>
<p>{{ children }}</p>
</div>
</template>
<script>
export default {
name: 'child',
props: ['text'],
data() {
return {
children: '子组件自己的数据'
}
}
}
</script>
React
import React, { useState, useEffect } from "react";
function Child({ onClick }) {
const [list, setList] = useState<number[]>([]);
useEffect(() => {
setList([1, 2, 3]);
}, [onClick]);
return (
<div>
{list.map((item, index) => {
return <div key={index}>{item}</div>;
})}
</div>
);
}
function Father() {
const show = () => {
return [4, 5, 6];
};
return (
<div>
<Child onClick={show}></Child>
</div>
);
}
export default Father;
2. Компонентная коммуникация
Vue
- props/emit
- provide/inject
- vuex (двусторонняя привязка данных, реактивная)
- event bus
React
- реквизит (от ребенка к отцу через
props.function) - context
- redux (односторонний поток данных)
3. Вложение компонентов
Vue:слот слот
// index.vue
<template>
<Test>
<div>插槽文本</div>
</Test>
</template>;
import Test from "./test";
// test.vue
<template>
<div>
<slot></slot>
</div>
</template>;
React: props.children
// 父组件
import Test from "./test";
<Test>
<div> 组件嵌套 </div>
</Test>;
// 子组件
import * as React from "react";
const Test: React.FC<any> = (props) => {
return (
<>
<div>测试props.children</div>
<div>{props.children}</div>
</>
);
};
export default Test;
6. Общее ощущение
1. Некоторые отличия
- vue
更简单，更方便, после знакомства с апи быстрее реализовать некоторые простые функции. React больше склонен писать原生 JS, писать Class не очень удобно, мне так больше нравитсяhooks. - знакомый
hooksВ будущем очень свободно писать, плевать на исправленное в vueoptions api - React имеет большие преимущества в мидл- и бэк-офисе с благословения крупных производителей, лучшую экологию, больше функций библиотеки компонентов и больше решений.
- vue2.x не очень дружелюбен к машинописи,
react + typescriptЭто более удобно, и стиль письма у них совершенно другой. - React JSX все еще недостаточно опытен, чтобы писать,
onClick、style、classNameподожди, нетv-if，v-for，All in JS. Vue продвигаетhtml、js、css 分离конечно, vue также может писать JSX - vue prop должен быть в
子组件 props 字段里声明. React's prop не обязательно объявлять, используйте его напрямую, если вы используете TS, вам все равно нужно его объявить
2. Обучение
- Многие говорят, что конвертировать vue в react очень просто, и освоить его можно за неделю. Я скорее овощ, и мне с ним комфортно.
有成本的, но это не сложно, главное больше делать, и копать вглубь почему не понимаешь - прочитатьофициальный сайт, больше стучите по примеру, хорошо разбирайтесь в нем и делайте заметки.
-
Ведро семейства технологий React на станции BОбучающее видео, его можно пропустить,
快速过一遍, в конце концов, это не новичок. Тогда сделайте свой собственный проект,去实现一些自己感兴趣的东西 - После того, как базовые знания закончились,
查缺补漏, найти различные сообщения в блогах для чтения, не понимаю再次учиться -
总结Мои собственные результаты обучения, реакция была изучена в течение определенного периода времени, я разберусь с ней позже и отправлю - Для повышения квалификации используйте библиотеку компонентов компании (zent) Я написал это сам, для тех, кто заинтересован, пожалуйста, обратитесь к: Онлайн-превью:Система обучения ДжунджиИсходный код на гитхабе:На основе реакции + машинописный текстДобро пожаловать
start
3. Рекомендации по ресурсам
- Реагировать на китайскую документацию
- Диаграмма жизненного цикла React
- React + TypeScript Практика Byte Frontend
- «React Advanced» Интерпретация всех API React + базовая практика Daquan (краткое изложение основы из 20 000 слов)
- Резюме React Hooks 4D Техническая команда Harrow
- Изучите серию React Hooks — useRef
- React+TS+Redux+Antd разрабатывает систему фонового управления корпоративного уровня с нулявидео
- Ведро семейства технологий React на станции Bвидео
7. Справочные статьи
- «Vue» и «React» — разница в использовании
- Некоторый опыт перехода с Vue на React
- Руководство по Vue to React, достаточно прочитать эту статью
- Поймите разницу между Vue и React