Разница между декларативными и императивными в React.js?

Недавно я много изучал функциональность и способы использования библиотеки JavaScript React.js Facebook. Говоря о своих различиях с остальной частью мира JavaScript, часто упоминаются два стиля программирования declarative и imperative.

Какая разница между обоими?

Ответ 1

Декларативный стиль, подобный тому, который имеет реакция, позволяет вам контролировать поток и состояние в вашем приложении, говоря: "Это должно выглядеть так". Императивный стиль переворачивает это и позволяет вам контролировать свое приложение, говоря: "Это то, что вы должны делать".

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

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

Go to the kitchen
Open fridge
Remove chicken from fridge
...
Bring food to the table

В декларативном мире вы просто опишите, что вы хотите

I want dinner with chicken.

Если ваш дворецкий не знает, как сделать курицу, то вы не можете работать в декларативном стиле. Например, если Backbone не знает, как изменить себя, чтобы выполнить определенную задачу, вы не можете просто сказать ему, чтобы она выполняла эту задачу. React может быть декларативным, потому что, например, он "умеет готовить курицу". По сравнению с Backbone, который знает только, как взаимодействовать с кухней.

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

Ответ 2

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

Обязательным способом сделать это будет:

if( user.likes() ) {
    if( hasBlue() ) {
        removeBlue();
        addGrey();
    } else {
        removeGrey();
        addBlue();
    }
}

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

В отличие от декларативного подхода:

if( this.state.liked ) {
    return <blueLike />;
} else {
    return <greyLike />;
}

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

Ответ 3

Это отличная аналогия:

* Настоятельный ответ: Выйдите из северного съезда с парковки и сверните налево. Идите на I-15 на юг, пока не дойдете до выезда на шоссе Bangerter. Сверните направо, как будто вы едете в Икею. Идите прямо и поверните направо при первом свете. Продолжить через следующий свет, затем поверните налево. Мой дом № 298.

Декларативный ответ: Мой адрес - Западный Неизменный Переулок 298, Дрейпер, Юта, 84020 *

https://tylermcginnis.com/imperative-vs-declarative-programming/

Ответ 4

Императивный кодекс:

Когда код JavaScript написан обязательно, мы сообщаем JavaScript точно, что делать и как это сделать. Думайте об этом, как будто мы даем JavaScript-команды о том, какие именно шаги он должен предпринять.

Например, я даю вам скромный цикл:

const people = ['Amanda', 'Geoff', 'Michael', 'Richard', 'Ryan', 'Tyler']
const excitedPeople = []

for (let i = 0; i < people.length; i++) {
  excitedPeople[i] = people[i] + '!'
}

Это обязательный код, хотя. Мы даем команду JavaScript, что делать на каждом этапе. Мы должны дать ему команды:

установить начальное значение для итератора - (пусть я = 0)
сообщить циклу for, когда он должен остановиться - (я <people.length)
получить человека в текущей позиции и добавить восклицательный знак - (people [i] + '!')
сохранить данные в i-й позиции в другом массиве - (excitedPeople [i])
увеличить переменную я на единицу - (i++)

Декларативный кодекс:

С помощью декларативного кода мы не кодируем все шаги, чтобы получить конечный результат. Вместо этого мы объявляем, что хотим сделать, и JavaScript позаботится об этом. Это объяснение немного абстрактно, поэтому давайте рассмотрим пример. Давайте возьмем императив для цикла кода, который мы только что рассмотрели, и сделаем его более декларативным.

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

const people = ['Amanda', 'Geoff', 'Michael', 'Richard', 'Ryan', 'Tyler']

Конечная цель, которую мы хотим, - это массив с такими же именами, но каждое имя которого заканчивается восклицательным знаком:

["Amanda!", "Geoff!", "Michael!", "Richard!", "Ryan!", "Tyler!"]

Чтобы получить от начальной точки до конца, мы просто используем функцию JavaScript.map(), чтобы объявить, что мы хотим сделать.

const excitedPeople = people.map(name => name + '!')

Это! Обратите внимание, что с этим кодом у нас нет:

создал объект итератора, сообщив коду, когда он должен прекратить работу, использовал итератор для доступа к конкретному элементу в массиве людей, хранящем каждую новую строку в массиве excitedPeople... все эти шаги выполняются JavaScript.map() Array метод.

Ответ 5

Лучше сравнить React (декларативный) и JQuery (императивный), чтобы показать вам различия.

В React вам нужно только описать конечное состояние вашего пользовательского интерфейса в методе render(), не беспокоясь о том, как перейти из предыдущего состояния пользовательского интерфейса в новое состояние пользовательского интерфейса. НАПРИМЕР,

render() {
  const { price, volume } = this.state;
  const totalPrice = price * volume;

  return (
    <div>
      <Label value={price} className={price > 100 ? 'expensive' : 'cheap'} ... />
      <Label value={volume} className={volume > 1000 ? 'high' : 'low'} ... />
      <Label value={totalPrice} ... />
      ...
    </div>
  )
}

С другой стороны, JQuery требует от вас обязательного перехода к состоянию пользовательского интерфейса, например, выбора элемента label и обновления его текста и CSS:

onPriceUpdated(price) {
  $("#price-label").val(price);
  $("#price-label").toggleClass('expansive', price > 100);
  $("#price-label").toggleClass('cheap', price < 100);
  updateTotalPrice();
}

onVolumeUpdated(volume) {
  $("#volume-label").val(volume);
  $("#volume-label").toggleClass('high', volume > 1000);
  $("#volume-label").toggleClass('low', volume < 1000);
  updateTotalPrice();
}

updateTotalPrice() {
  const totalPrice = price * volume;
  $("#total-price-label").val(totalPrice);
  ...
}

В сценарии реального мира будет гораздо больше элементов пользовательского интерфейса, которые будут обновляться, а также их атрибуты (например, стили CSS и прослушиватели событий) и т.д. Если вы сделаете это обязательно с помощью JQuery, это станет сложным и утомительным; легко забыть обновить некоторые части пользовательского интерфейса или забыть удалить старые даже прослушиватели (утечка памяти) и т.д. В этом случае возникают ошибки, то есть состояние пользовательского интерфейса и состояние модели не синхронизированы.

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

Под крючком React обновит все измененные элементы DOM, используя императивный код.

Вы также можете прочитать мой ответ для В чем разница между декларативным и императивным программированием?.

PS: из приведенного выше примера jQuery вы можете подумать, что если мы поместим все манипуляции с DOM в метод updateAll() и будем вызывать его каждый раз, когда изменяется любое из состояний нашей модели, и пользовательский интерфейс никогда не будет синхронизирован. Вы правы, и это фактически то, что делает React, единственное отличие состоит в том, что jQuery updateAll() вызовет много ненужных манипуляций с DOM, но React будет обновлять только измененные элементы DOM, используя свой алгоритм виртуального DOM Diffing.

Ответ 6

Реальная параллель в императивном мире состояла бы в том, чтобы войти в бар для пива и дать бармену следующие инструкции: --Take стакан с полки --Put стекло перед тягой --Pull вниз ручку, пока стакан не заполнится --Pass мне стакан.

Вместо этого в декларативном мире вы просто скажете: "Пиво, пожалуйста".

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

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

Тот факт, что React предлагает декларативный подход, делает его легким в использовании, и, следовательно, полученный код прост, что часто приводит к меньшему количеству ошибок и большей ремонтопригодности.

Поскольку React следует декларативной парадигме, и нет необходимости указывать ей, как взаимодействовать с DOM; Вы просто ОБЪЯВЛЯЕТЕ, что хотите видеть на экране, и React делает всю работу за вас.

Ответ 7

Декларативный позволяет вам контролировать все представления. (вроде как госуправление)
Императив позволяет вам контролировать вид. (вроде как $ (это))

Ответ 8

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

React декларативен, потому что мы пишем нужный код, а React отвечает за принятие объявленного кода и выполнение всех шагов JavaScript/DOM, чтобы получить желаемый результат.

Ответ 9

Начну с аналогии: у меня есть две машины, в моих двух машинах я хочу, чтобы температура внутри моей машины была нормальной комнатной температурой ~ 72 ° F. В первом (старом) автомобиле есть две ручки для контроля температуры (1 ручка для контроля температуры и 1 ручка для контроля воздушного потока). Когда становится слишком жарко, я должен отрегулировать первую ручку, чтобы понизить температуру и, возможно, изменить поток воздуха) и наоборот, если он слишком холодный. Это обязательная работа! Я должен управлять кнопками сам. В моей второй (более новой) машине я могу установить/объявить температуру. Это означает, что мне не нужно возиться с ручками, чтобы отрегулировать температуру, которую мой автомобиль знает, я заявляю/устанавливаю ее на 72 ° F, и моя машина выполнит обязательную работу, чтобы добраться до этого состояния.

React - это то же самое, вы объявляете разметку/шаблон и статистику, а затем React выполняет обязательную работу, чтобы синхронизировать DOM с вашим приложением.

<button onClick={activateTeleporter}>Activate Teleporter</button>

Вместо того, чтобы использовать .addEventListener() для настройки обработки событий, мы объявляем то, что хотим. Когда кнопка нажата, она запустит функцию activateTeleporter.

Ответ 10

Эти два типа программирования можно грубо суммировать как:

Императив: как чего-то достичь

Декларативный: что должно быть достигнуто

Типичным примером декларативного программирования является CSS. Разработчик определяет свойства CSS, которые описывают, как что-то должно выглядеть, а не как этого добиться. "Как" абстрагируется браузером.

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

Императив:

const numbers = [1, 2, 3, 4, 5]
const numbersDoubled = []
for (let i = 0; i < numbers.length; i++) {
  numbersDoubled[i] = numbers[i] * 2
}

Мы вручную перебираем числа в массиве и присваиваем новый индекс как удвоенное число.

декларативный:

const numbers = [1, 2, 3, 4, 5]
const numbersDoubled = numbers.map(n => n * 2)

Мы объявляем, что новый массив отображается на новый, где каждое значение удваивается.

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

Декларативное программирование является более кратким и более простым в обработке.

Ответ 11

Декларативное программирование - это парадигма программирования, которая выражает логику вычислений без описания потока управления.

Императивное программирование - это парадигма программирования, в которой используются операторы, изменяющие состояние программы.

ссылка на ссылку: -https://codeburst.io/declarative-vs-imperative-programming-a8a7c93d9ad2