1. Что такое React Virtual DOM?
Виртуальный DOM – это концепция, при которой виртуальное представление реального DOM хранится в памяти и >синхронизируется с реальной моделью DOM с помощью такой библиотеки, как ReactDOM.
Виртуальный DOM — это объект, представляющий настоящий DOM в памяти. Поскольку обновления DOM являются неотъемлемой частью любого веб-приложения, но являются самой дорогостоящей операцией в мире внешнего интерфейса, виртуальный DOM используется для проверки частей приложения, которые необходимо обновить, и обновления только этих частей, что значительно повышает производительность.
2. Почему нам нужно transpile реагировать на код?
Код React написан на JSX, но ни один браузер не может выполнять JSX напрямую, поскольку они созданы для обычного JavaScript только для чтения. сильный>.
Таким образом, нам необходимо использовать такие инструменты, как Babel, для преобразования JSX в JavaScript, чтобы браузер мог его выполнить.
3. Каково значение keys в React?
Keys в React используется для идентификации уникальных элементов VDOM с соответствующими данными, управляющими UI; их наличие помогает React оптимизировать отрисовку за счет повторного использования существующих элементов DOM.
Key помогает React определить, какие элементы были изменены, добавлены или удалены, что позволяет повторно использовать уже существующие DOM, что обеспечивает повышение производительности.
Например:
const Todos = ({ todos }) => {
return (
<div>
{todos.map((todo) => (
<li>{todo.text}</li>
))}
</div>
);
};
Это приведет к созданию новых элементов DOM при каждом изменении todos, но добавление реквизита key (<li key={todo.id}>{todo.text}</li>) приведет к "перетаскиванию" элементов DOM внутри тега ul и обновление только необходимых li с.
4. Каково значение refs в React?
Refs — это переменные, которые позволяют сохранять данные между рендерингами, как и state переменные, но в отличие от state переменных, обновление refs НЕ приводит к повторному рендерингу компонента.
Refs обычно используются для хранения ссылок на элементы DOM, но не ограничиваются ими.
5. Каковы наиболее распространенные подходы к стилизации приложения React?
Классы CSS
React позволяет указывать имена классов для компонента так же, как имена классов задаются для элемента DOM в HTML.
Когда разработчики впервые начинают использовать React после разработки традиционных веб-приложений, они часто выбирают классы CSS, поскольку они уже знакомы с этим подходом.
Встроенный CSS
Стилизация элементов React с помощью встроенного CSS позволяет полностью применить стили к элементу. Однако некоторые функции стилей недоступны во встроенных стилях. Например, стиль псевдоклассов, таких как :hover.
Препроцессоры (Sass, Stylus и другие)
Препроцессоры часто используются в проектах React. Это связано с тем, что, как и CSS, они хорошо понимаются разработчиками и часто уже используются, если React интегрируется в устаревшее приложение.
Модули CSS-in-JS (стилизованные компоненты, эмоции и Styled-jsx)
Модули CSS-in-JS — это популярный вариант оформления приложений React, поскольку они тесно интегрируются с компонентами React. Например, они позволяют изменять стили на основе реквизитов React во время выполнения. Кроме того, по умолчанию в большинстве этих систем все стили применяются к соответствующему компоненту.
6. Какие существуют стратегии оптимизации производительности для React?
Использование useMemo
useMemo — это хук React, который используется для кэширования ресурсоемких функций. Многократный вызов функции, требующей больших ресурсов ЦП из-за повторного рендеринга компонента, может привести к медленному рендерингу.
Хук useMemo можно использовать для кеширования таких функций. При использовании useMemo функция CPU-Expensive вызывается только тогда, когда это необходимо.
useCallback можно использовать для получения аналогичного результата.
Отложенная загрузка
Отложенная загрузка – это метод, используемый для сокращения времени загрузки приложения React. Это помогает свести риск производительности веб-приложения к минимуму, загружая компоненты по мере того, как пользователь перемещается по приложению.
7. Что такое опорное бурение и как его избежать?
Иногда при разработке приложений React возникает необходимость передавать данные из компонента, который находится выше в иерархии, в компонент, который глубоко вложен. . Для передачи данных между такими компонентами мы передаем реквизиты из исходного компонента и продолжаем передавать реквизит следующему компоненту в иерархии, пока не достигнем глубоко вложенного компонента.
Недостатком использования prop drilling является то, что компоненты, которые в противном случае не должны знать о данных, имеют доступ к данным, кроме того, код становится сложнее поддерживать.
Prop drilling можно избежать с помощью Context API или некоторой формы библиотеки State Management.
8. Что такое компонент StrictMode и зачем его использовать?
<StrictMode /> — это компонент, входящий в состав React, чтобы обеспечить дополнительную видимость потенциальных проблем в компонентах. Предположим, что приложение работает в режиме разработки. В этом случае любые проблемы регистрируются в консоли разработки, но эти предупреждения не отображаются, если приложение работает в рабочем режиме.
Разработчики используют <StrictMode /> для поиска таких проблем, как устаревшие методы жизненного цикла и устаревшие шаблоны, чтобы убедиться, что все компоненты React соответствуют современным рекомендациям.
<StrictMode /> можно применять на любом уровне иерархии компонентов приложения, что позволяет внедрять его постепенно в кодовую базу.
9. Что такое synthetic events в React?
Synthetic events объединить ответы на исходные события разных браузеров в один API, гарантируя согласованность событий в разных браузерах. Приложение единообразно независимо от того, в каком браузере оно запущено.
const Component = () => {
const handleClick = (e) => {
e.preventDefault(); // synthetic event
console.log("link clicked");
};
return <a onClick={(e) => handleClick}>Click me</a>;
};
10. Почему не рекомендуется обновлять state напрямую, а использовать вызов setState?
Обычный способ обновления state заключается в использовании вызова setState. Без его использования пользователь по-прежнему сможет изменять состояние, но DOM не будет обновляться, чтобы отразить новое состояние.
const Component = () => {
const [count, setCount] = useState(0);
// let [count, setCount] = React.useState(0);
const handleClickUpdate = () => {
setCount((c) => c + 1);
// count = count + 1; // will not update the DOM
};
return (
<>
{count}
<button onClick={handleClickUpdate}>Click me</button>
</>
);
};
11. Что такое portals в React?
Портал – это рекомендуемый способ отображения дочерних элементов в узле DOM, который существует вне иерархии DOM родительского компонента.
const Portal = ({ children }) => {
// NOTE: it is advisable to create a new DOM node for the portal
const portalRoot = document.getElementById("portal-root");
return ReactDOM.createPortal(children, portalRoot);
};
