С поясненными примерами кода
В простом закрытии — это функция, которая имеет доступ к переменным в своей родительской области, даже после того, как родительская функция завершила выполнение. Это простое прямое определение.
Мы можем использовать способность замыканий внутри реагировать, чтобы упростить задачу. Как обычно, давайте на простых примерах.
Если вы когда-либо использовали хук useState в реакции, это означает, что вы использовали замыкания в реакции, не замечая этого.
Здесь вы можете видеть, что handleClick функция имеет доступ к переменной count. Он объявлен в родительской функции Counter. Поэтому переменная count находится в родительской области.
Даже после завершения выполнения функции Counter, которая является родительской функцией, функция handleClick может получить доступ к переменной count и увеличить ее.
Другой вариант использования замыканий в реакции — это использование компонентов более высокого порядка. Компонент высшего порядка (HOC) в React — это функция, которая принимает компонент в качестве аргумента и возвращает новый компонент, дополненный дополнительными функциями.
Компоненты React — это просто функции javascript. Поэтому в реакции мы можем передать компонент в качестве аргумента другому компоненту реакции.
Ниже приведен пример использования замыканий для создания компонента более высокого порядка.
В приведенном выше коде withNewProp — это функциональный компонент, который принимает другой компонент MyComponent в качестве функции и возвращает новый функциональный компонент. Этот новый компонент имеет доступ к состоянию и функции, которая обновляет состояние, которое он передает в myComponent в качестве реквизита. Это способ добавления состояния и поведения к компоненту, у которого их раньше не было, и он называется компонентом более высокого порядка.
Важно отметить, что функция, возвращаемая замыканием, имеет доступ к переменным в родительской области и может продолжать обновлять или ссылаться на эти переменные даже после завершения выполнения родительской функции withNewProp .
Использование замыканий с каррированием
В приведенном выше примере MyComponent — это функциональный компонент, который использует хук useState для отслеживания двух состояний, firstName и lastName.
Компонент отображает два поля ввода, одно для имени и одно для фамилии. Каждое поле ввода имеет обработчик события onChange`, этот обработчик события вызывает функцию handleChange.
Вы можете видеть, что функция handleChange является каррированной, она возвращает новую функцию, которая принимает объект события, эта возвращенная функция является замыканием, поскольку она имеет доступ к функциям setFirstName и setLastName, которые определены в родительской области (области действия MyComponent функция). Закрытие принимает объект события и обновляет соответствующее состояние, вызывая функцию setFirstName или setLastName со значением ввода.
В приведенном выше примере кода показано, как можно использовать замыкания для сохранения состояния компонента и его обновления при необходимости, а также как можно использовать каррирование для упрощения кода и повышения его возможности повторного использования.
Недавно я начал свое путешествие на YouTube, делясь своим опытом в разработке полного стека. Не стесняйтесь подписаться и присоединиться ко мне.
Повышение уровня кодирования
Спасибо, что являетесь частью нашего сообщества! Перед тем, как ты уйдешь:
- 👏 Хлопайте за историю и подписывайтесь на автора 👉
- 📰 Смотрите больше контента в публикации Level Up Coding
- 🔔 Подписывайтесь на нас: Twitter | ЛинкедИн | "Новостная рассылка"
🚀👉 Присоединяйтесь к коллективу талантов Level Up и найдите прекрасную работу
