личное достоинствоизВАЖНАЯ ЧАСТЬ: НЕОБЯЗАТЕЛЬНО!
Где может работать только vue? Реагируй и я!
Лучший способ научиться реагировать — это, конечно, читать построчно.официальная документация😆
Благодаря авторудислексияПоздно, поэтому содержимое официального документа упрощено и разделено по сравнению с vue.
Надеюсь, что смогу, наконец, помочь детям рек и озер, страдающим дислексией, как и автор 💖
1.JSX
Дугу Девять Мечей - Применение
React Не обязательноИспользуйте JSX, но JSX делает ваш код более читабельным.
const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;//这就是JSX; {} 内部可以嵌入js表达式
ReactDOM.render(
element,
document.getElementById('root') //将jsx内的dom绑定到#root div上
);
Нет хитрости, чтобы победить - принципиальная статья
React имеет концепцию всего в js, все реализовано в js-файлах, таких как теги dom.
Vue — это три мушкетера html+js+css, что является одной из причин низкой стоимости обучения Vue.
JSX больше похож на javascript: html+="
hello world
"Babel преобразует JSX в файл с именемReact.createElement()
вызов функции.
const element = (
<h1 className="greeting">
Hello, world!
</h1>
);
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);
Таким образом, суть JSX заключается всинтаксический сахар, который легко читается и снижает затраты на изучение синтаксиса шаблона.
2. Рендеринг элемента (ядро)
Дугу Девять Мечей - Применение
Элементы реакциинеизменяемый объект. После создания вы не можете изменить его дочерние элементы или атрибуты.
Единственный способ обновить пользовательский интерфейс — создать совершенно новый элемент и передать его
ReactDOM.render() // Функция, которая отображает пользовательский интерфейс
function tick() {
const element = ( //----记得加括号---- 不然可能会出现自动加 ; 的现象
<div>
<h1>Hello, world!</h1>
<h2>It is {new Date().toLocaleTimeString()}.</h2>
</div>
);
ReactDOM.render(element, document.getElementById('root')); //每隔1秒,重新创建UI
}
setInterval(tick, 1000);
Нет хитрости, чтобы победить - принципиальная статья
ReactDOM.render() в конечном итоге преобразует код JSX в настоящие элементы DOM.
Но сумасшедший рендеринг DOM приведет к тому, что будет занято много ресурсов браузера, поэтому он выглядит так:
алгоритм сравнения, вычислить измененное содержимое по сравнению с прошлым разом и обновить и заменить только измененный элемент DOM.
Фехтование на шпаге - Сравнение
В VUE принцип отзывчивости реализуетМониторинг объектов данных, инициировать изменение;
В отличие от React, которому нужно каждый раз повторно вызывать рендеринг.
Вью побеждает здесь 👍
3. Компоненты и реквизит
Дугу Девять Мечей - Применение
Самый простой способ определить компонент — написатьФункция JavaScript.
Вызов такой функции, естественно, вызов компонента🤣
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
Рекомендуемый подход заключается вкласс ES6Определить компоненты, полный набор сервисов, со встроенным рендером
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
Также обратите внимание, что в дополнение к нативному тегу h1 div и другим тегамнастроитьметка компонента
function Welcome(props) { // 学过vue的同学,肯定不会对props陌生
return <h1>Hello, {props.name}</h1>;
}
const element = <Welcome name="Sara" />;
ReactDOM.render(
element,
document.getElementById('root')
);
предупреждение! ! ! Имена компонентов должны начинаться с заглавной буквы. Строчные буквы будут рассматриваться как нативные теги.
Секретный навык - Искусство нескольких компонентов!
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
function App() {
return (
<div>
<Welcome name="Sara" /> //组件套组件,何其美哉?
<Welcome name="Cahal" />
<Welcome name="Edite" />
</div>
);
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
Фехтование на шпаге - Сравнение
По сравнению со случайностью компонентов реакции, компоненты vue, несомненно, намного более стабильны, у каждого компонента есть свой полный жизненный цикл, а параметры передачи реквизита и тому подобное также понятнее.
И вышеприведенный компонент реакции, похоже,меньше чувствовать
4. Состояние и жизненный цикл (реальная инкапсуляция компонентов)
Дугу Девять Мечей - Финал
Сделайте реагирующие компоненты более похожими на vue(На самом деле все наоборот, именно vue имитирует и оптимизирует стиль компонента реакции)
Здесь сложно объяснить простыми словами 😔
Но все же хочу сказать несколько слов...
Если вы считаете, что функциональное объявление функции слишком детское, то используйте Class, он кажется выше 😎
class Clock extends React.Component {
render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>It is {this.props.date.toLocaleTimeString()}.</h2>
</div>
);
}
}
Качественные очки:
- объявить класс ES6 инаследовать React.Component
- Напишите в классе функцию render() (эта функция будет вызываться автоматически)
- Используйте этот внутренний рендер.
- Он вынул сигарету, потом на секунду застыл под взглядом барышни впереди, потом виновато улыбнулся и сунул сигарету обратно в портсигар.
Мы по-прежнему используем случай официального сайта для созданиятаймерКомпоненты:
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {date: new Date()};
}
render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>It is {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
}
Сначала поговорим об основах ES6,ClassЭто также синтаксический сахар, предоставляемый ES6,constructor является конструктором класса, когда класс создается с помощью new, он будетвызов конструктора автоматически,super представляет собойотец(Реагировать.Компонент)Конструктор(конструктор).
Это:Когда экземпляр Clock будет создан, он вызовет внутренний конструктор, а затем выполнит конструктор React.Component через super. 🎈
Жизненный цикл: 🌱
componentDidMount(), является функцией жизненного цикла, компонент монтируется при инициализации, близко кvue mounted()
componentWillUnmount(), компонентудалить/уничтожитьпри запуске с помощью vuedestroyed()похожий.
ps: При выходе со страницы, если таймер не уничтожен, таймер всегда будет существовать и занимать память.
componentDidMount() {
this.timerID = setInterval(
() => this.tick(),
1000
);
}
componentWillUnmount() {
clearInterval(this.timerID);
}
tick() {
this.setState({
date: new Date()
});
}
Нет хитрости, чтобы победить - принципиальная статья
stateявляется ключевым словом реакции и должно бытьвнутренний,частичный. Соответственно есть реквизит.
Компоненты класса всегда должны использоватьсяprops
параметры для вызова конструктора родительского класса.
Когда состояние изменено, вызовите setState(), чтобы изменить его.
так какsetStateможет повторно визуализировать компонент,уже очень близко кvue отзывчивыйконцепция.
Тесно, vue также имеет концепцию $set, но они имеют разные значения:
- setState() реакциизапустить обновление страницы,Сохраните шаг рендеринга(илиНеявный вызов)
- Vue $ set ()это поместить то, что вы были раньше, в data()никогдаСвязывание, связанное как реактивный объект.
Следовательно, мы также можем просто понимать это как:
внутри конструктораstateи во вьюdata()Цель та же.
Из соображений производительности React можетsetState()
перечислитьобъединены в один звонок.
так какthis.props
иthis.state
может бытьАсинхронное обновление,так что выне зависеть отих значение для обновления следующего состояния
Состояние может быть передано его дочерним компонентам в качестве реквизита, но этот процесс передается вниз, и родитель не будет обращать внимание на ваши дочерние компоненты, поэтому реакция является односторонним потоком данных - данные недоступны для мобильных устройств.
5. Обработка событий
Дугу Девять Мечей - Применение
<button onClick={activateLasers}>
Activate Lasers
</button>
Знакомые {}, реагирующие нотации иvanillajsТаким же образом остаются нетронутыми такие события, как onclick, а объект события внутри события такой же, как иvanillajsНет никакой разницы.
Но будьте осторожны: onClick — это небольшой горб🐪🐪🐪О, маленький горб🐪🐪🐪
пс:vanillajsПереведенный как vanilla javascript, это самый легкий в мире фреймворк для javascript. 😘
function handleClick(e) {
e.preventDefault();
console.log('The link was clicked.');
}
это здесь,e
является синтетическим событием. Реагировать в соответствии сСпецификация W3Cдля определения этих синтетических событий, поэтому вам не нужно беспокоиться о кросс-браузерной совместимости.
Определите события как классы:
class Toggle extends React.Component {
constructor(props) {
super(props);
this.state = {isToggleOn: true};
// 为了在回调中使用 `this`,这个绑定是必不可少的
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState(state => ({
isToggleOn: !state.isToggleOn
}));
}
render() {
return (
<button onClick={this.handleClick}>
{this.state.isToggleOn ? 'ON' : 'OFF'}
</button>
);
}
}
ReactDOM.render(
<Toggle />,
document.getElementById('root')
);
Обратный вызов события фактически связан в конструкторе.Через встроенную функцию привязки функции это указывает на классToggle сам
Это не специфичное для React поведение;Как работают функции JavaScriptСвязанный.
ps: Реагируйте на события, рекомендуется читатьофициальная документация, прочитайте это дважды.
Фехтование на шпаге - Сравнение
- React делает большеэта привязкадействовать
- ВУЭ ДиректПо умолчанию это указывает на.
Нет хитрости, чтобы победить - принципиальная статья
Я думаю, многие студенты зададутся вопросом: почему React и VUE тратят столько усилий на этот пункт.
Поскольку идея компонентизации состоит в том, чтобы надеяться, что все параметры поступают из компонента, и приватизировать эти параметры для формирования независимого внутреннего цикла, в настоящее время вам нужно, чтобы это доминировало над всем.
И ах:это небольшой горб🐪🐪🐪О, маленький горб🐪🐪🐪
6. Условный рендеринг
Дугу Девять Мечей - Применение
Когда дело доходит до условного рендеринга, легко представить себеv-если v-показать в VUEОжидание заказа.
React, с другой стороны, более прямолинеен:
function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) {
return <UserGreeting />;
}
return <GuestGreeting />;
}
ReactDOM.render(
// Try changing to isLoggedIn={true}:
<Greeting isLoggedIn={false} />,
document.getElementById('root')
);
Ведь это Все на JS.Хочу зайти на VUE's v-if, чтобы смоделировать такую операцию😆
И оператор &&
<div>
<h1>Hello!</h1>
{unreadMessages.length > 0 &&
<h2>
You have {unreadMessages.length} unread messages.
</h2>
}
</div>
На самом деле этот код JSX очень прост.vanillajsОператор:
Когда содержимое до && возвращает true, продолжайте выполнять содержимое после &&.
Да, он может добиться эффекта, который вы себе представляете,Тернарный оператор(логическое значение?a:b)Аналогично😋
Нет хитрости, чтобы победить - принципиальная статья
Итак, так называемый условный рендеринг — это просто суждение js, например if else.
7. Список и ключ
Дугу Девять Мечей - Применение
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
<li key={number.toString()}>
{number}
</li>
);
return (
<ul>{listItems}</ul>
);
}
const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
<NumberList numbers={numbers} />,
document.getElementById('root')
);
- По той же причине обратитесь к v-for из vue
- Реагировать на все в js с помощьюФункция обхода массива map()Реализовал свою v-for.
- уникальное свойствоkeyцельПомогите Реакции идентифицировать,какой дочерний элемент изменился.
- если внутриli является компонентомЕсли это так, не забудьте привязать ключ кссылка на компонентМесто
Нет хитрости, чтобы победить - принципиальная статья
Список React, также заимствованныйvanillajsЦикл реализован вместо того, что делает сам React. В лучшем случае JSX поддерживает циклы.
function NumberList(props) {
const numbers = props.numbers;
return (
<ul>
{numbers.map((number) =>
<ListItem key={number.toString()}
value={number} />
)}
</ul>
);
}
8. Форма (Женщина слушала слезы...)
Дугу Девять Мечей - Применение
class NameForm extends React.Component {
constructor(props) {
super(props);
this.state = {value: ''};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
handleSubmit(event) {
alert('提交的名字: ' + this.state.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
名字:
<input type="text" value={this.state.value} onChange={this.handleChange} />
</label>
<select value={this.state.value} onChange={this.handleChange}>
<option value="grapefruit">葡萄柚</option>
<option value="lime">酸橙</option>
<option value="coconut">椰子</option>
</select>
<input type="submit" value="提交" /> </form>
);
}
}
React хочет, чтобы выstate связанный как форма«Уникальный источник данных».и назови этоУправляемые компоненты
Вам нужно добавить в конструктор (constructor) в форме привязки данных и событий взаимодействия,В классе также необходимособытиеопределять.
Фехтование на шпаге - Сравнение
- React делает этозначение привязано к состояниюподсвойства , черезмодификация setState().
- VUE реализуетСинтаксический сахар для v-модели, используется для завершенияэквивалентная операция,Несомненно намного проще.
- В React также есть метод target.name нативного интерфейса, который обрабатывается партиями по имени.
<input
name="isGoing"
type="checkbox"
checked={this.state.isGoing}
onChange={this.handleInputChange} />
<input
name="numberOfGuests"
type="number"
value={this.state.numberOfGuests}
onChange={this.handleInputChange} />
handleInputChange(event) {
const target = event.target;
const value = target.type === 'checkbox' ? target.checked : target.value;
const name = target.name;
this.setState({
[name]: value
});
}
Если вам неудобно создавать формы React, вы можете попробовать стороннюю поддержку.formik
formik:Build forms in React, without the tears.
Создавайте формы в React, больше никаких слез.
9. Улучшение состояния (перенос параметров от родителя к дочернему)
Дугу Девять Мечей - Применение
Часто требуется несколько компонентовотражать одни и те же данные об изменении, то мы предлагаемПовышение общего состояниядо ближайшегообщий родительский компонентиди в.
По факту,повышение статуса, которую можно сравнить сVUEсередина:Передача параметров родитель-потомок, передача параметров родственного узла
Отец:
class Parent extends React.Component {
constructor(props) {
super(props);
this.handle_A_Change= this.handle_A_Change.bind(this); this.handle_B_Change= this.handle_B_Change.bind(this); this.state = {temperature: '', scale: 'c'};
}
handle_A_Change(temperature) {
this.setState({scale: 'c', temperature});
}
handle_B_Change(temperature) {
this.setState({scale: 'f', temperature});
}
render() {
const scale = this.state.scale;
const temperature = this.state.temperature;
const celsius = scale === 'f' ? tryConvert(temperature, toCelsius) : temperature;
const fahrenheit = scale === 'c' ? tryConvert(temperature, toFahrenheit) : temperature;
return (
<div>
<children
scale="c"
temperature={celsius}
on_my_Change={this.handle_A_Change} />
<children
scale="f"
temperature={fahrenheit}
on_my_Change={this.handle_B_Change} /> <BoilingVerdict
celsius={parseFloat(celsius)} />
</div>
);
}
}
Ребенок:
class children extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
}
handleChange(e) {
this.props.on_my_Change(e.target.value); }
render() {
const temperature = this.props.temperature;
const scale = this.props.scale;
return (
<fieldset>
<legend>Enter temperature in {scaleNames[scale]}:</legend>
<input value={temperature}
onChange={this.handleChange} />
</fieldset>
);
}
}
Нет хитрости, чтобы победить - принципиальная статья
- Привязать дочерний компонентstate, модифицированный для привязки родителяprops
- Запуск родительского компонента в реквизитах из дочернего компонентафункциональное событие
- родитель прошелфункциональное событиеВыполнить setState() в своем собственном состоянии
- Выполнение setState() вызоветrender() перерисовывает дочерний элемент.
Проще говоря:
Дочерний процесс вызывает метод родителя, изменяет состояние родителя, и родитель повторно отображает дочерний элемент.
Фехтование на шпаге - Сравнение
- вьюПередача параметров между компонентами, через$emit('имя_события') вызовродительская функция
- Однако подкомпоненты в vue по-прежнему сохраняют свои собственные атрибуты data() или props().
- React напрямую удаляет свойство у дочернего элемента и передает его через родителя.
- Реакция здесь снова отраженаОдносторонний поток данныхМысль
- С этой точки зрения кажется, что vue будетКомпонентное мышлениеболее совершенное исполнение.
(Писая здесь, автор чувствует, что что-то не так, свойства подкомпонентов могут иметьдругие методысуществуетПодкомпоненты сохраняют копию)
10. Композиция против наследования
React имеет очень мощный шаблон композиции. Мы рекомендуем композицию вместо наследования для повторного использования кода между компонентами.
function FancyBorder(props) {
return (
<div className={'FancyBorder FancyBorder-' + props.color}>
{props.children}
</div>
);
}
function WelcomeDialog() {
return (
<FancyBorder color="blue">
<h1 className="Dialog-title">
Welcome
</h1>
<p className="Dialog-message">
Thank you for visiting our spacecraft!
</p>
</FancyBorder>
);
}
Фехтование на шпаге - Сравнение
- React реализует вложенность parent-child в виде специального prop.children + JSX.
- Вложение компонентов в vue осуществляется через тег
. - Между ними нет большой разницы.
Дугу Девять Мечей - Применение
function Contacts() {
return <div className="bg-blue width100 height200" />;
}
function Chat() {
return <div className="bg-red width100 height200" />;
}
function SplitPane(props) {
return (
<div className="width200 height200">
<div className="inline-block float-left">
{props.left}
</div>
<div className="inline-block float-right"> {props.right}
</div>
</div>
);
}
function App() {
return (
<SplitPane
left={
<Contacts />
}
right={
<Chat />
} />
);
}
Если вы планируете открыть несколько"слот", тогда ты можешьнастроитьНазвание реквизита.детей: левый, правый и т.д.
Но чиновник также сказал, что это дело не может быть ограничено слотом
Такой подход может напомнить вам понятие «слот» в других библиотеках, но в React нет предела понятию «слот», вы можете передать что угодно в качестве реквизита.
function Dialog(props) {
return (
<FancyBorder color="blue">
<h1 className="Dialog-title">
{props.title}
</h1>
<p className="Dialog-message">
{props.message}
</p>
</FancyBorder>
);
}
function WelcomeDialog() {
return (
<Dialog
title="Welcome"
message="Thank you for visiting our spacecraft!" />
);
}
Здесь реализована диалоговая форма.
Фехтование на шпаге - Сравнение
- React может передавать что угодно через свойства, объект, JSX или даже компонент.
- Реквизиты в vue более ограничены и даже устанавливают тип принятия String, boolean, Array и т. д.
- Кажется, что vue находится вУпрощенное кодирование, упрощенное мышление и ограниченные возможностидальше и дальше по дороге
- И React здесь полностью воплощенбольшая гибкость, чем больше играешь, тем выше~
ни одна хитрость не побеждает
существуетфейсбук,мы вСотни компонентовиспользуя Реакт.Мы не обнаружили необходимости использовать наследование для построения иерархии компонентов.
Реквизиты и композиции дают вам гибкие способы четкой и безопасной настройки внешнего вида и поведения компонентов. Уведомление:Компоненты могут принимать произвольные реквизиты, включая примитивные типы данных, элементы React и функции.
Философия React — намерение меча
Одной из лучших частей React являетсязаставить нас задуматься о том, как создать приложение.
иерархия компонентов
- относиться к компоненту как кфункцияилиобъектрассмотреть, согласнопринцип единой функцииопределить компонентыСфера.
- Если ваша модель спроектирована правильно, пользовательский интерфейс (или структура компонентов) будет таким же, как модель данных.корреспонденция один на один.
- Поскольку и пользовательский интерфейс, и модель данных, как правило, следуютта же информационная структура.
статическая версия
- будетвизуализировать пользовательский интерфейсидобавить взаимодействиеДва процесса разделены.
- написать заявлениестатическая версия, часто пишут много кода, не задумываясьдетали взаимодействия.
- Добавить кИнтерактивная функциякогдаУчитывайте множество деталей, не написав слишком много кода.
Статическая версия — визуализация пользовательского интерфейса
- создать некоторыеповторное использованиекомпоненты других компонентов, затем пройтиpropsпередать необходимые данные исостояние не должно использоватьсяПостроитьстатическая версия.
- state представляет данные, которые меняются со временем и должны использоваться только при реализации взаимодействий.
-
низходящийиливверх дномСоздайте приложение. (ориентированный на процессилиобъектно-ориентированный), Когда вашПрименение относительно простоеКогда удобнее использовать подход «сверху вниз», и наоборот, предпочтительнее подход «снизу вверх».основные компоненты.
Завершите взаимодействие через State
stateс триггеромИзменения базовой модели данныхВозможность (setState автоматически вызывает Render)
- Подтвердите, что состояние былосегментацияминимуму (при условии, чтовсе)
- Соответствующие понятия:Не повторяйтесь(не повторяйтесь)
- резервтребуется приложениеизменчивое состояниеминимальный набор,другие данныерассчитываются по ним
Определите, где разместить состояние
которыйкомпонентыбыли в состоянииизменять и владетьэти состояния?родительский компонент or Подсборка?
- РеагироватьОднонаправленный поток данных, передаются сверху вниз по иерархии компонентов
- Найдите тот, который рендерится в соответствии с этим состояниемвсе компоненты
- найдите ихобщий родителькомпонент, поместите здесь состояние
- Если вы не можете найти подходящий, напрямуюСоздайтеродительский компонент
Почему React выбрал однонаправленный поток данных?
Философия React считает, что явное объявление одностороннего потока данных более полезно для людей, чтобы понять, как работает программа.
Код больше предназначен для просмотра, чем для написания. Код этого модульного образца приложения, который мы создали вместе, легко читается.
Для получения более подробной информации, пожалуйста, обратитесь к официальной документацииРеагировать Философия
Dugu Nine Swords (React) против шпаги Swordsmanship (VUE)
Справедливости ради, до того, как я изучил React в этой системе, я всегда хотел знать, почему крупные производители предпочитают использовать React вместо VUE После написания этой статьи у меня появились собственные соображения.
Реагировать:
Людям будет полезнее понять, как работает программа.- отReact Official Website-React Philosophy
вид:
Лучше сосредоточьтесь на самом приложении.- отОфициальный сайт VUE-сравнение с другими фреймворками
Должно быть много причин, по которым крупные производители выбирают React, и я думаю, что одна из них самая важная».Реагировать Философия», в конце концов, низкоуровневые кодеры не представляют никакой ценности для больших фабрик, а установка порога React тоже очень ценна.
И Vue действительно, как сказал автор, заботится о стоимости разработки малых предприятий,Снизить порог для фронтенд-разработки, упрощено и оптимизировано везде.
Наконец
Если вы фронтенд-разработчик, только входящий в отрасль, янастоятельно рекомендуетсяИзучите React самостоятельно и научитесь кодировать его из реальных приложений.кодовая мысль.
В настоящее время различные учебные заведения - это только обучение навыкам.После поступления в компанию они заняты работой, и может не оказаться старших, которые готовы дать указку.Реакт - это книга фехтования и тайная книга.Только постижением значение мечей, можешь ли ты стать по-настоящемумастер боевых искусств