Парадигмы программирования - императивная и декларативная
2 года назад·5 мин. на чтение
В этой статье поговорим о парадигмах программирования. Затронем императивную и декларативную парадигмы. Для сравнения разберем несколько небольших примеров. В конце мы взглянем на парадигмы с точки зрения эволюции.
Это серия статей о функциональном программировании:
Как видим, если мы хотим сравнить обе парадигмы (императивную и декларативную), то декларативная парадигма (в нашем случае Функциональная парадигма) больше похожа на шестеренки. Вы разрабатываете свои шестеренки как отдельные единицы, затем добавляете их туда, где они вам нужны. Но в императивной парадигме это больше похоже на тесто. Почти все смешано и слито в один и тот же кусок код.
В целом декларативная парадигма — это:
- Парадигмы программирования (рассматривается в этой статье)
- Композиция
- Функторы
- Каррирование
- Чистые функции
- Функции первого класса
Парадигмы программирования
Парадигма программирования — это стиль или "способ" программирования. Поэтому некоторые языки заставляют нас писать в определенной парадигме. Другие языки оставляют варианты открытыми для программиста, где каждая парадигма следует набору понятий. За всю историю компьютерного программирования инженеры разработали разные языки. Каждый язык основывался на одной или нескольких парадигмах. Эти парадигмы принадлежат к одной из следующих двух основных категорий:1. Императивная парадигма
В императивных языках программирования поток управления является явным, где программист инструктирует программу, как изменить ее состояние. В императивную парадигму также включается:- Структурная парадигма
- Объектно-ориентированная парадигма
2. Декларативная парадигма
В декларативной парадигме поток управления является неявным, когда программист указывает программе, что следует делать, не указывая, как это должно быть сделано. В декларативную парадигму также включается:- Функциональная парадигма
- Логическая парадигма
- Математическая парадигма
- Реактивная парадигма
Императивная парадигма
Императивная парадигма немного изменилась из-за структурной парадигмы, но у нее все еще есть проблемы:- Указание программе, как что-то делать (поток управления является явным)
- Общее состояние
Проблема 1: Указание программе, как что-то делать (поток управления является явным)
Кейс: представьте себе 1000 сотрудников с руководителем, который ведет их по проекту. Руководитель начинает рассказывать 1000 сотрудников, как делать вещи одну за другой. Как вы думаете, насколько это будет плохо? Я почти уверен, что вы видите, что этот стиль управления на микроуровне имеет большие риски, ловушки и даже не сработает. Решение: Сгруппировать людей по зонам ответственности и делегировать в каждую группу руководителя группы. Руководитель каждой группы должен знать, как делать что-то для достижении цели. Это значительно уменьшит сложность, узкие места и станет намного проще в управлении. В этой аналогии- Руководитель = Программист
- Руководители групп = Функции более высокого уровня
- Сотрудники в каждой группе = Строки кода
Проблема 2: Общее состояние
Кейс: Представьте отца, у которого двое детей. У них есть общий банковский счет. Каждый месяц отец кладет на этот счет 1000 долларов. Оба ребенка не знают, что учетная запись используется совместно. Таким образом, они оба думают, что у каждого есть 1000 долларов, которые он может потратить на себя. В конце месяца оказывается, что на этом счету осталось -1000 долларов. Решение: У каждого ребенка должна быть отдельная учетная запись и указанная ежемесячная сумма. В этой аналогии:- Дети = Функции
- Общий банковский счет = общее состояние
Пример императивной парадигмы
Давайте посмотрим, как функция для суммирования может быть реализована в императивной парадигме.Почему этот код считается императивным?const sum = (list) => { let result = 0 for (let i = 0; i < list.length; i++) { result += list[i] } return result }
-
Указание программе, как что-то делать (поток управления является явным): мы явно сообщаем циклу
for
, как работать. Также мы обращаемся к каждому элементу в массиве явно. - Совместное состояние: результирующая переменная является общим состоянием, изменяющимся на каждой итерации (с общим состоянием в более крупных решениях будет гораздо сложнее справиться).
Декларативная парадигма
Декларативная парадигма — это когда программист указывает программе, что должно быть сделано, не указывая, как. В декларативной парадигме мы пишем функции, которые:- Описывают, что должна выполнять программа, а не как (неявный поток управления).
- Не производят побочных эффектов (о которых мы поговорим позже).
Пример декларативной парадигмы
Мы увидели, как функцияsum
может быть реализована в императивной парадигме. Давайте посмотрим, как ее можно реализовать декларативно.
Похоже на магию? Но почему это считается декларативным?const add = (a, b) => a + b const sum = (list) => list.reduce(add)
- Описано, что программа должна выполнять, а не как (неявный поток управления): нет явного итератора, нет явного указания циклу, как работать или как получить доступ к элементам. Это было достигнуто с помощью метода
reduce
. - Не производит побочных эффектов: общее состояние — это форма побочных эффектов, которая была полностью устранена с помощью метода
reduce
и функцииadd
.
Еще одно сравнение
Что, если мы хотим суммировать только четные числа? Разберем эту задачу на примерах в разных парадигмах.Императивная реализация
const evenSum = (list) => { let result = 0 for (let i = 0; i < list.length; i++){ if(list[i] % 2 === 0) { result += list[i] } } return result }
Декларативная реализация
const evenSum = (list) => { const isEven = (n) => n % 2 const add = (a, b) => a + b return list.filter(isEven).reduce(add) }
- Предсказуемость
- Тестируемость
- Многоразовость
- Настраиваемость
- Кэшируемость
- Поддерживаемость
- Компонуемость
sum
, но будут иметь смысл в следующих статьях о функциональном программировании.
Эволюция парадигм
Итак, у нас есть 2 основные парадигмы: императивная и декларативная, каждая из которых имеет подпарадигмы. Теперь поговорим подробнее о структурной, объектно-ориентированной и функциональной парадигмах. с эволюционной точки зрения. Каждая парадигма ограничивала способ программирования, вводя что-то новое.-
Структурная парадигма: ограниченное использование
goto
и «потока передачи управления» за счет введения в наш код такой структуры, какif
/else
/then
/loop
и других. Другими словами, он ограничивает поток передачи управления. - Объектно-ориентированная парадигма: ограничение полиморфизма с использованием указателей на функции за счет введения полиморфизма с использованием наследования.
- Функциональная парадигма: ограничения общего состояния и побочные эффекты за счет введения иммутабельности.
Итоги
В реальной жизни у нас разные парадигмы с разными стилями, которые требуют разного уровня мастерства. Практика большего количества парадигм даст вам больше возможностей. У объектно-ориентированной парадигмы есть свои особенности, у функционального программирования - свои. Чем сильнее вы становитесь в этих парадигмах, тем мощнее будут ваши решения.Как понять React быстро?
2 года назад·6 мин. на чтение
Если вы хотите быстро понять React, то эта статья для вас. Эта статья познакомит вас с большинством концепций React, которые вы будете использовать ежедневно. Это сделает ваш старт в React разработке быстрым.
Как создать компонент?
React приложения состоят из компонентов. Компонент — это часть пользовательского интерфейса. Компонент содержит собственную логику и внешний вид. Компонент может быть маленьким, как кнопка, или большим, как целая страница. React компоненты — это JavaScript функции, которые возвращают разметку:Теперь, когда мы объявили компонентfunction MyButton() { return <button>Это кнопка</button>; }
MyButton
, мы можем вложить его в другой компонент:
Обратите внимание, чтоexport default function MyApp() { return ( <div> <h1>Welcome to my app</h1> <MyButton /> </div> ); }
<MyButton />
начинается с заглавной буквы. Это соглашение, которое дает понять, что это React компонент. Имена React компонентов всегда должны начинаться с заглавной буквы, а теги HTML должны быть строчными.
Ключевые слова export default
определяют основной экспортируемый из файла компонент.
Как добавить разметку с JSX?
Особая разметки, которую вы видели выше, называется JSX. Не обязательно использовать JSX разметку, но большинство проектов React используют JSX для удобства. JSX строже, чем HTML. Вы должны закрыть теги типа<br />
. Ваш компонент также не может возвращать несколько тегов JSX. Вы должны обернуть их в общий родитель, например <div>...</div>
или пустую оболочку - фрагмент - <>...</>
:
function AboutPage() { return ( <> <h1>About</h1> <p> Hello there. <br /> How do you do? </p> </> ); }
Как добавить стили?
Для того чтобы указать CSS класс в React нужно использоватьclassName
. Он работает так же, как атрибут class
в HTML:
Затем вы пишете правила CSS для него в отдельном файле CSS:<img className="avatar" />
.avatar { border-radius: 50%; }
Как отобразить данные в компоненте?
JSX позволяет размещать разметку внутри JavaScript функции. Фигурные скобки позволяют вам писать JavaScript внутри разметки, чтобы вы могли внедрить показать значение переменной из своего кода. Например, это фрагмент кода покажет имя пользователя, т.к. в полеuser.name
содержится строка с именем пользователя:
Вы также можете использовать JavaScript из JSX атрибутов. В этом случае нужно использовать фигурные скобки вместо кавычек. Например,return <h1>{user.name}</h1>;
className="avatar"
передает строку "avatar"
как CSS класс, но src={user.imageUrl}
считывает значение JavaScript переменной user.imageUrl
, а затем передает это значение как атрибут src
:
В фигурные скобки в JSX можно поместить более сложные выражения, например, конкатенацию строк:return <img className="avatar" src={user.imageUrl} />;
В приведенном выше примереconst user = { name: 'John', imageUrl: 'https://example.com/userpic.jpg', imageSize: 90, }; export default function Profile() { return ( <> <h1>{user.name}</h1> <img className="avatar" src={user.imageUrl} alt={'Photo of ' + user.name} style={{ width: user.imageSize, height: user.imageSize, }} /> </> ); }
style={{}}
не является специальным синтаксисом, а является обычным объектом {}
внутри фигурных скобок style={ }
JSX. Вы можете использовать атрибут style
, когда ваши стили зависят от переменных JavaScript.
Как отобразить элементы по условию?
В React нет специального синтаксиса для написания условий. Вместо этого можно использовать те же приемы, что и при написании обычного JavaScript кода. Например, вы можете использовать операторif
для условного включения JSX:
Если вы предпочитаете более компактный код, вы можете использовать условныйlet content; if (isLoggedIn) { content = <AdminPanel />; } else { content = <LoginForm />; } return <div>{content}</div>;
?
оператор. В отличие от if
, он работает внутри JSX:
Если вам не нужна ветвь<div>{isLoggedIn ? <AdminPanel /> : <LoginForm />}</div>
else
, вы также можете использовать более короткий синтаксис логического &&
:
Все эти подходы также работают для указанных по условию атрибутов. Если вы не знакомы с некоторыми элементами этого синтаксиса JavaScript, вы можете начать с постоянного использования<div>{isLoggedIn && <AdminPanel />}</div>
if...else
.
Как отобразить список?
Вы будете полагаться на возможности JavaScript, такие как циклfor
и метод массива map()
для отображения списков компонентов.
Предположим, есть набор продуктов:
Внутри компонента для преобразования массива продуктов в массив элементовconst products = [ { title: "Капуста", id: 1 }, { title: "Чеснок", id: 2 }, { title: "Яблоко", id: 3 }, ];
<li>
используйте метод map()
:
Обратите внимание, чтоconst listItems = products.map((product) => ( <li key={product.id}>{product.title}</li> )); return <ul>{listItems}</ul>;
<li>
имеет атрибут key
. Для каждого элемента в списке вы должны передать строку или число, которое однозначно идентифицирует этот элемент среди его соседних элементов.
Этот ключ (key
) должен определяться из ваших данных, таких как идентификатор из базы данных. React будет полагаться на ваши ключи, чтобы понять, что произошло, если вы позже вставите, удалите или измените порядок элементов.
const products = [ { title: "Капуста", isFruit: false, id: 1 }, { title: "Чеснок", isFruit: false, id: 2 }, { title: "Яблоко", isFruit: true, id: 3 }, ]; export default function ShoppingList() { const listItems = products.map((product) => ( <li key={product.id} style={{ color: product.isFruit ? 'magenta' : 'darkgreen', }} > {product.title} </li> )); return <ul>{listItems}</ul>; }
Как работать с событиями компонента?
Для того чтобы реагировать на события нужно внутри компонента объявить функцию-обработчик события.Обратите внимание, чтоfunction MyButton() { function handleClick() { alert('You clicked me!'); } return <button onClick={handleClick}>Click me</button>; }
onClick={handleClick}
не имеет круглых скобок в конце. Это говорит о том, что это не вызов функции, а передача функции. React вызовет ваш обработчик событий, когда пользователь нажмет кнопку.
Как обновить данные компонентов?
Часто необходимо, чтобы компонент «запоминал» некоторую информацию и отображал ее. Например, мы хотим подсчитать, сколько раз была нажата кнопка. Для этого нужно добавить состояние к компоненту. Во-первых, импортируемuseState
из React:
Теперь мы можем объявить переменную состояния внутри компонента:
function MyButton() { const [count, setCount] = useState(0);
useState
возвращает две вещи: текущее состояние (count
) и функцию, которая позволяет обновить это состояние (setCount
). Можно дать им любые имена, но принято называть их по такому шаблону - [something, setSomething]
.
При первом отображении кнопки count
будет равен 0
, потому что мы передали 0
в useState()
. Для того чтобы изменить состояние, нужно вызвать setCount()
и передайте ему новое значение. Нажатие на эту кнопку увеличит счетчик:
React снова вызовет функцию-компонент. На этот раз счет будетfunction MyButton() { const [count, setCount] = useState(0); function handleClick() { setCount(count + 1); } return <button onClick={handleClick}>Clicked {count} times</button>; }
1
. Затем будет 2
. И так далее.
Если добавить один и тот же компонент несколько раз, каждый из них получит свое собственное состояние.
Обратите внимание, как каждая кнопка «запоминает» свое собственное состояние счетчика и не влияет на другие кнопки.import { useState } from 'react'; export default function MyApp() { return ( <div> <h1>Счетчики, которые обновляются независимо</h1> <MyButton /> <MyButton /> </div> ); } function MyButton() { const [count, setCount] = useState(0); function handleClick() { setCount(count + 1); } return <button onClick={handleClick}>Clicked {count} times</button>; }
Как использовать хуки?
Функции, начинающиеся сuse
, называются хуками. useState
— это встроенный хук, предоставляемый React. Вы также можете написать свои собственные хуки, комбинируя существующие.
Хуки накладывают больше ограничений, чем обычные функции. Хуки можно вызывать только на верхнем уровне компонентов (или других хуков). Если вы хотите использовать useState
в условии или цикле, создайте новый компонент и поместите его туда.
Как передавать данные между компонентами?
В предыдущем примере у каждойMyButton
был собственный независимый счетчик, и при нажатии каждой кнопки менялся только счетчик нажатой кнопки.
Что если требуется обновлять эти счетчики вместе?
Чтобы оба компонента MyButton
отображали одно и то же число и обновлялись вместе, вам нужно переместить состояние от отдельных кнопок «вверх» к ближайшему родительскому компоненту, содержащему их все.
Теперь, когда при нажатии любой кнопки-счетчика, счетчик в MyApp
изменится, что изменит оба счетчика в MyButton
. Вот как это можно выразить в коде.
MyButton
в MyApp
:
Затем передадим состояние изexport default function MyApp() { const [count, setCount] = useState(0); function handleClick() { setCount(count + 1); } return ( <div> <MyButton /> <MyButton /> </div> ); } function MyButton() { // }
MyApp
в каждый MyButton
вместе с общим обработчиком кликов через пропсы. Передавать информацию в MyButton
можно с помощью фигурных скобок JSX, точно так же, как мы делали это раньше со встроенными тегами, такими как <img>
:
Информация, которую передается таким образом, называется пропсами. Теперь компонентexport default function MyApp() { const [count, setCount] = useState(0); function handleClick() { setCount(count + 1); } return ( <div> <h1>Счетчики, изменяющиеся вместе</h1> <MyButton count={count} onClick={handleClick} /> <MyButton count={count} onClick={handleClick} /> </div> ); }
MyApp
содержит состояние счетчика и обработчик события handleClick
и передает их оба в качестве пропсов каждой из кнопок.
Наконец, изменим MyButton
, чтобы он считывал пропсы, которые мы ему передали из родительского компонента:
function MyButton({ count, onClick }) { return <button onClick={onClick}>Clicked {count} times</button>; }
onClick
. В проп onClick
каждой кнопки передается функция handleClick
внутри MyApp
. Этот код вызывает setCount(count + 1)
, увеличивая переменную состояния count
. Новое значение счетчика передается в качестве пропса каждой кнопке, поэтому все они показывают новое значение.
Это называется «подъем состояния вверх». Переместив состояние вверх, мы сделали его общим для этих компонентов.
Подробнее о всех случаях передачи данных между компонентами можно прочитать здесь.import { useState } from 'react'; export default function MyApp() { const [count, setCount] = useState(0); function handleClick() { setCount(count + 1); } return ( <div> <h1>Счетчики, изменяющиеся вместе</h1> <MyButton count={count} onClick={handleClick} /> <MyButton count={count} onClick={handleClick} /> </div> ); } function MyButton({ count, onClick }) { return <button onClick={onClick}>Clicked {count} times</button>; }