Переход на React с Javascript
В этой статье делается попытка провести различие между декларативным и императивным, особенно для людей, переходящих с обычного Javascript на React. Кроме того, я пишу это во время аналогичного перехода, поэтому прошу прощения за любую дезинформацию. Но я человек, который не может просто сидеть сложа руки, говоря: «React - это декларативный стиль письма». Поэтому я попытаюсь выделить то, что делает React декларативным, и сравнить его с императивным аналогом.
Во-первых, декларативное программирование на очень высоком уровне сосредотачивается на ЧТО, а не КАК. Что это значит? Декларативное программирование в большей степени зависит от результата и описания этого конечного результата, чем от пошагового процесса получения результата (часто игнорируя процесс его достижения). Это противоположно императивному программированию, которое является гораздо более учебным и заботится о пошаговом процессе. Согласно каждой статье «Декларативное против императивного», вот метафора направления, как добраться до Пенсильванского вокзала от администрации порта:
Парадигма императивного программирования: «Выйдя из администрации порта, направляйтесь на юго-запад по 8-й авеню в сторону 41-й улицы W, поверните налево на 33-ю западную улицу, и вы должны прибыть на Пенсильванский вокзал».
Парадигма декларативного программирования: «Penn Station находится на 7-й и 8-й авеню, между 31-й и 33-й улицами Нью-Йорк, Нью-Йорк 10001».
Как видите, в первом примере направления перечислены шаг за шагом, что указывает на императивный подход. Второй пример просто описывает конечное местоположение / результат с адресом, не обращая внимания на то, как путешественник / пользователь может туда добраться. Чтобы наглядно проиллюстрировать это различие, давайте перейдем к простому примеру кодирования через Ruby, прежде чем мы перейдем к React и Javascript. Вот два подхода к реализации простого алгоритма линейного поиска в Ruby:
//Imperative
def imperative_search(array, item)
for i in array do
if i == item
return item
end
end
return false
end
//Declarative
def declarative_search(array, item)
array.find(item)
end
Первый является ярким примером императивного поиска, поскольку он описывает каждый шаг того, как работает функция поиска и как она достигла результата. Это действительно иллюстрирует КАК и дает дискретные «инструкции» для достижения желаемого результата. Напротив, декларативный пример фокусируется исключительно на результате и описании того, как этот результат будет выглядеть. Если вы работали с такими методами перечислителя Ruby, как each, collect, select и т. Д., Угадайте, что? Вы все это время писали декларативный код!
Декларативная реакция
Наконец, мы перейдем к сути этого блога: почему React декларативен. Если вы похожи на меня, то написанный вами Javascript до сих пор был императивного стиля. Например, возьмем этот пример очень императивного кода, который манипулирует DOM, добавляя к телу div и h1 с моим любимым художником «Mitski»:
function addArtistNameToBody() {
const bodyTag = document.querySelector('body')
const divTag = document.createElement('div')
let h1Tag = document.createElement('h1')
h1Tag.innerText = "Mitski"
divTag.append(h1Tag)
bodyTag.append(divTag)
}
Это очень важно, поскольку с помощью пошаговых инструкций он находит необходимые теги и добавляет необходимые элементы. Напротив, достижение того же результата с помощью реакции будет выглядеть примерно так:
class Artist extends Component {
render() {
return(
<div>
<h1>{this.props.name}</h1>
</div>)
}
}
Как видите, способ React фокусируется на результате и далее описывает его в блоке кода рендеринга. Проще говоря, «то, что я хочу отобразить на странице, будет выглядеть так, и меня не волнует, как вы к этому попадете». Ссылаясь на метафору: «Это мой адрес. Так выглядит мой дом. Меня не волнует, как вы сюда попали, но как попасть сюда! " Следовательно, реализация React декларативна, потому что вы указываете в коде результат, то, что в конечном итоге хотите отображать на странице, а не инструкции или шаги, которые необходимо выполнить.
До исследования и написания этого блога мое понимание парадигмы декларативного программирования в основном исходило из отсутствия различия между декларативным и функциональным программированием. Функциональное программирование - яркий пример декларативного подхода, но это не одно и то же. Я понял, что мне нужно провести грань между декларативным и императивным, функциональным и объектно-ориентированным. Конечно, React демонстрирует множество характеристик функционального программирования (вещи, связанные с виртуальной DOM и передающими функциями), которые затем начинают становиться действительно сложными (хороший последующий блог). На данный момент я надеюсь, что это прояснило, почему React демонстрирует декларативный подход, как это было для меня.
