Проп key для пересоздания компонента в ReactJS
2 года назад·2 мин. на чтение
Знали ли вы, что проп key может быть полезен не только при рендеринге списка компонентов. Проп key можно использовать и для того чтобы сбросить состояние одного компонента.
Что такое проп key
в ReactJS?
Это специальный проп, который может быть добавлен к любому компоненту. Он помогает механизму reconciliation (согласование), упрощая сравнение компонентов. Типичный сценарий использования key
- добавление его в компоненты списка. Он нужен для того чтобы React понимал, какой компонент списка был добавлен, удален или изменен.
const notes = [ { id: 1, title: 'React hooks', }, { id: 2, title: 'JSX', }, { id: 3, title: 'Redux', }, ]; const NotesList = ({ notes, onClick }) => { return ( <div className="notes-list"> {notes.map((note) => ( <p className="notes-list__item" key={note.id} onClick={() => onClick(note)} > {note.title} </p> ))} </div> ); };
Проп key
работает и вне списков
Проп key
может быть добавлен к абсолютно любому компоненту для того, чтобы сбросить нежелательное состояние этого компонента.
Например, в списке заметок есть поле для ввода текста. Если просто добавить это поле и ввести в него текст, то при выборе новой заметки слева - текст будет сохраняться. И, предположим, при выборе заметки мы хотим очистить это поле.
![список заметок в приложении ReactJS](https://it-dev-journal.ru/api/proxy/uploads/spisok_zametok_a4b0aaea94.jpg)
function App() { const [activeNote, setActiveNote] = useState(); const handleClick = (note) => { setActiveNote(note); }; return ( <div className="notes-container"> <NotesList notes={notes} onClick={handleClick} /> <Note title={activeNote?.title} /> </div> ); }
Это можно сделать, например, добавив пропconst Note = ({ title }) => { const [text, setText] = useState(); const handleChange = (event) => { setText(event.target.value); }; return ( <div className="note"> <p>{title}</p> <textarea className="note-textarea" value={text} onChange={handleChange} /> </div> ); };
text
в компонент Note
. И далее очищать его при изменении состояния activeNote
. Но изменение компонентов может быть невозможным, если мы используем компоненты из third-party библиотеки.
Сброс состояние экземпляра компонента
Пропkey
помогает React идентифицировать компонент. Его также можно использовать, чтобы сообщить React, что идентификатор компонента изменился и это вызовет полное повторное создание этого компонента. Добавим key={activeNote?.id}
к компоненту <Note />
.
Теперь, при изменении// ... return ( <div className="notes-container"> <NotesList notes={notes} onClick={handleClick} /> <Note title={activeNote?.title} key={activeNote?.id} /> </div> ); }
key
React пересоздаст компонент <Note />
.
Влияние на производительность
Хотя это хороший прием, который уменьшает количество кода, важно иметь ввиду, что этот подход заставляет React пересоздавать весь экземпляр компонента. В примере выше большая часть компонента<Note />
будет перерисована в любом случае при изменении activeNote
. Поэтому в этом случае это достаточно хорошее решение.
В реальных приложениях нужно ограничивать добавление key
к одиночным компонентам вне списков, а также избегать добавления key
на компоненты верхнего уровня. Это может стать причиной проблем с производительностью, которые трудно обнаружить.Чистые функции. Функциональное программирование
2 года назад·3 мин. на чтение
В этой статье на простых и доступных примерах рассмотрим одну из концепций функционального программирования - Чистые функции.
Это серия статей о функциональном программировании:
- Парадигмы программирования
- Композиция
- Функторы
- Каррирование
- Чистые функции (рассматривается в этой статье)
- Функции первого класса
Что такое чистая функция?
Чистая функция — это функция, которая является детерминированной и не производит побочных эффектов.Характеристики чистой функции
️1. Чистые функции должны быть детерминированными
Детерминированная функция — это функция, которая при одном и том же входеx
всегда должна иметь один и тот же результат y
.
Примеры недетерминированных функций
Math.random
const getRandom = () => Math.random()
- Функции
Date
const getDate = () => Date.now()
getUsers
Функцияconst getUsers = await fetch('/users')
getUsers
недетерминирована, потому что пользователи могли обновиться, нет подключения к интернету, сервер может быть недоступен или что-то еще.
Комментарии к примерам
Эти примеры считаются недетерминированными, потому что для одних и тех же входных данных выходные данные будут отличаться. Детерминизм означает, что функция никогда не изменит результат при одних и тех же входных данных.️2. Чистые функции не должна иметь побочных эффектов
Побочным эффектом может быть:- Внешняя зависимость (доступ к внешним переменным, потокам ввода/вывода, чтение/запись файлов или выполнение HTTP-вызовов).
- Мутация (мутации локальных/внешних переменных или переданных аргументов по ссылке).
Примеры побочных эффектов
- Функция
isLessThanMin
Чистая функцияconst min = 60 const isLessThanMin = value => value < min
Побочный эффект заключается во внешней зависимости. Для исправления используется внедрение зависимости (dependency injection).const isLessThanMin = (min, value) => value > min
- Функция для вычисления квадратов чисел
Чистая функцияconst squares = (nums) => { for(let i = 0; i < nums.length; i++) { nums[i] **= 2; } }
Побочный эффект заключается в наличии императивного кода, который выполняет мутации в исходном массиве по ссылке. Для исправления используется функциональныйconst squares = (nums) => nums.map(num => num * num)
.map
, который создает новый массив.
- Функция
updateUserAge
Чистая функцияconst updateUserAge = (user, age) => { user.age = age }
Побочный эффект заключается в мутации объектаconst updateUserAge = (user, age) => ({ ...user, age })
user
по ссылке. Нужно избегать изменения объектов по ссылке, вместо этого следует вернуть новый объект с новыми/обновленными свойствами.
- Функция
getFirst2Elements
Чистая функцияconst getFirst2Elements = (arr) => arr.splice(0, 2)
Побочный эффект заключается в мутированииconst getFirst2Elements = (arr) => arr.slice(0, 2)
arr
, переданного по ссылке методом .splice
. Для исправления используется функциональный метод .slice
, который не изменяет сам массив.
Почему функции с побочными эффектами - плохо?
У функций с побочными эффектами есть несколько очевидных недостатков:- Это делает функции тесно связанными с окружающей средой
- Увеличивает когнитивную нагрузку на разработчика
- Вызывает неочевидные изменения состояния
- Увеличивает кривую обучения кодовой базы разработчика
- Невозможность параллелизации
- Высокая непредсказуемость
- + потеря преимуществ чистых функций
Почему чистые функции - хорошо?
Можно вывести две основные категории улучшений. Улучшение опыта разработки (developer experience) и улучшение производительности приложений.Улучшение опыта разработки
Принимая во внимание тот факт, что наши функции теперь детерминированы, независимы и самодостаточны. Улучшения будут очевидны.- Предсказуемость: устранение внешних факторов и изменений среды сделает функции более предсказуемыми.
- Поддерживаемость: улучшается понимание кода.
- Композиция: независимость функций и связь только через ввод и вывод, что позволит нам легко составлять композицию функций.
- Тестируемость: самодостаточность и независимость функций выведут тестируемость на новый уровень.
Улучшение производительности
- Способность к кэшированию (мемоизация): детерминизм функций даст нам возможность предсказывать, каким будет вывод для определенного ввода, затем мы можем кэшировать функции на основе вводов.
- Возможность распараллеливания: поскольку функции теперь свободны от побочных эффектов и независимы, их можно легко распараллелить.