1. Что такое ДОМ?
DOM — это полная форма объектной модели документа. Это программный интерфейс для документов HTML и XML. Это означает, что он представляет страницу, поэтому многие программы могут изменить структуру документа, стиль, содержание. Вот почему язык программирования соединяется со страницей.
Например:
const headers = document.getElementById('header');
headers.innerHTML = `
‹div›
‹h1›Это страница заголовка‹/h1›
‹p›Это заголовок абзаца‹/p›
‹/div›
`
2. Что такое React DOM?
React DOM — это пакетный модуль, который предоставляет определенный метод. Этот метод помогает нам создать веб-приложение верхнего уровня. React DOM предоставляет разработчику API, содержащий следующий метод…
- оказывать()
- гидрат()
- создатьПортал()
render(): это один из самых важных методов в react-dom. В основном эта функция используется для реагирования на отдельные компоненты или элементы div.
Синтаксис:
render(элемент, контейнер, обратный вызов);
3. Компонент VS Элемент
Основное различие между компонентами и элементами заключается в том, что компонент подобен шаблону или странице, а другая рука. То, что находится внутри, должно получить и как тег в компоненте, называется элементом.
4. Преимущества компонентов
Компоненты используются многими фреймворками и библиотеками. Компоненты упрощают общий процесс написания сценариев.
Например:
‹div className="row"›
‹h1›Привет, мир‹/h1›
‹p›Природа мира прекрасна‹/p›
‹/дел›
Код Abobe мы не можем использовать на другой странице. если мы поместим этот код в компонент, мы сможем использовать его с другой страницы.
5. Какие именно крючки?
Хуки — это специальные типы функций, которые используются для реагирования на функциональные компоненты. Хук нельзя использовать в компоненте класса реакции. Все функции хуков начинаются со слова «использовать».
Пример: useState, useEffect, useForm, useContext и т. д.
6. Работа с несколькими компонентами
Когда мы создаем несколько страниц, пришло время сделать несколько компонентов. иногда нам нужно использовать определенный компонент в другом компоненте, и тогда мы не пишем этот код снова и снова используем эти компоненты.
Например:
‹div›
‹PagePage/›
‹AddDoctor/›
‹Dashboard/›
‹/div›
7. Компоненты верхнего уровня
Основные мысли о компонентах верхнего уровня см. в примере ниже…
const test = () =› {
возвращение (
‹див›
‹Добавить Доктора/›
‹/дел›
);
};
Здесь мы используем имя основного компонента test, а его дочерний компонент — AddDoctor, AdminPanel. Обратите внимание, что их тестовый компонент называется компонентом верхнего уровня.
8. Делаем компоненты повторно используемыми
Когда мы делаем компонент, пришло время, мы должны напомнить, что этот компонент можно использовать повторно. Это означает, что когда нам нужен компонент, используйте другую страницу, например панель навигации, и теперь мы можем импортировать этот компонент на эту страницу.
9. Используйте деструктурирование
Когда нам нужно отправить данные с одной страницы на другую страницу, и в это время мы отправляем данные через пропсы. и мы получаем эти данные из props.data, на этот раз мы можем использовать деструктурирование вместо реквизита.
Например:
const test = (props) =› {
const data = props.content;
возвращение (
‹div›
‹h1›{data.name}‹/h1›
‹Добавить Доктора/›
‹/дел›
);
};
Пример 2:
const test = ({content}) =› {
возвращение (
‹div›
‹h1›{content.name}‹/h1›
‹Добавить Доктора/›
‹/дел›
);
};
10. Реквизит по умолчанию
Реквизит по умолчанию может быть определен с помощью функциональных компонентов. Если мы установим реквизиты по умолчанию в компоненте, они будут установлены для основных компонентов.
Например:
const test = () =› {
возвращение (
‹див›
‹AddDoctor name={undefined} /›
‹/дел›
);
};
Пример 2:
const testTwo = ({имя}) => {
возвращение (
‹див›
‹h1›{имя}‹/h1›
‹/дел›
);
};
