— Заполняем файл tsconfig. json
}, []); // Пустой массив зависимостей означает, что эффект будет выполнен только один раз после загрузки компонента
// Использование useEffect для эмуляции componentDidMount
Пример:
this.deleteTask(task.id)}> Удалить
В этом примере мы используем стрелочную функцию, чтобы передать task.id в метод deleteTask. Однако, при таком подходе, каждый раз создается новая функция при рендеринге компонента, что может повлиять на производительность в случае большого количества элементов.
Однако, при таком подходе, каждый раз создается новая функция при рендеринге компонента, что может повлиять на производительность в случае большого количества элементов.
Стрелочные функции позволяют передавать дополнительные параметры в обработчик события. Вы можете создать анонимную стрелочную функцию, которая вызывает ваш обработчик с нужными параметрами.
— onClick: Вызывается при клике на элементе.
— onSubmit: Вызывается при отправке формы.
— onChange: Вызывается при изменении значения элемента формы (например, при вводе текста в поле ввода).
— onMouseEnter и onMouseLeave: Вызываются при наведении указателя мыши на элемент и его покидании.
— onKeyDown и onKeyUp: Вызываются при нажатии и отпускании клавиши клавиатуры.
— useState: Добавляет локальное состояние в функциональные компоненты.
— useEffect: Позволяет выполнять побочные эффекты в функциональных компонентах, такие как выполнение кода после рендеринга компонента или подписка на внешние данные.
— useContext: Позволяет получить доступ к контексту приложения в функциональных компонентах.
— useReducer: Предоставляет способ управления сложным локальным состоянием компонента через паттерн управления состоянием «Reducer».
— useRef: Позволяет создавать и управлять ссылками на DOM-элементы и другие объекты.
— useMemo: Оптимизирует производительность компонентов, предотвращая ненужные вычисления.
— useCallback: Оптимизирует производительность компонентов, предотвращая ненужные перерисовки компонентов.
— useLayoutEffect: Подобен useEffect, но срабатывает синхронно после изменения DOM перед фактическим рендерингом.
— useEffectOnce: Позволяет выполнить эффект только один раз после первого рендеринга компонента.
— useDebugValue: предоставляет дополнительную отладочную информацию для кастомных хуков.
— useHistory и useLocation: Позволяют взаимодействовать с историей браузера и текущим URL внутри компонентов.
— useParams: извлекает параметры из URL при использовании маршрутизации.
— useForm: Помогает управлять состоянием форм и их валидацией.
— useFetch: Предоставляет удобный способ выполнения HTTP-запросов.
— useWindowSize: Отслеживает изменения размеров окна браузера.
Дочерний компонент не имеет доступа к свойствам родительского компонента напрямую, за исключением тех свойств, которые были явно переданы через props. Это обеспечивает инкапсуляцию
[1]
и изоляцию компонентов и упрощает их переиспользование.
Через props вы можете передавать не только данные (такие как строки, числа, объекты), но и функции, обработчики событий и другие настройки компонента.