Изучаете React? Проверьте, готовы ли к трудоустройству.

Stack Overflow по результатам недавнего опроса отметил, что React по-прежнему остается одной из самых популярных библиотек JavaScript. Рост популярности произошёл простому API, с помощью которого можно создавать высокоэффективные приложения.

Если вы хотите быть востребованным, возможно, стоит поразмыслить насчёт работы с React. Ну а ниже мы написали несколько вопросов, на которые вы должны иметь ответ, если собираетесь трудоустраиваться.

Прежде чем мы погрузимся в вопросы, нужно сказать, что технические собеседования зачастую сопровождаются вопросами, на которые нельзя дать однозначного ответа, и потому многое зависит от HR, который может мыслить по-другому. Так что эта статья скорее про общие, но важные для понимания любому разработчику React.

Этот вопрос предназначен для проверки знаний кандидата об экосистеме JavaScript в целом, а также для уточнения того, понимаете ли вы, почему React уникален.

Что есть React?

React – это JavaScript-библиотека с открытым исходным кодом, разработанная Facebook для создания сложных интерактивных пользовательских интерфейсов в приложениях.

Ключевым моментом является понимание цели React — удобное создание компонентов пользовательского интерфейса.

Чем React отличается от других библиотек?

Ответ на этот вопрос, скорее всего, будет зависеть от вашего личного опыта, потому что особенностей много, но каждый ценит разные вещи.

Несколько вариантов ответа:

  • Например, AngularJS (1.x) используется для создания приложения путем расширения разметки HTML и ввода различных конструкций (например, директив, контроллеров, служб) во время выполнения. Но зачастую возникают проблемы с архитектурой приложения.
  • React фокусируется исключительно на создании компонентов — это не про архитектуру приложения. Зато это позволяет разработчику выбирать архитектуру, которую они считают лучшей
  • Недавно я переносил приложение с AngularJS на React. Несколько различий, которые я обнаружил… (тут вы описываете опыт взаимодействия и важные отличия)

Будьте также готовы задать ответить на следующие вопросы:

  • В каких случаях вы выбираете работу на React по сравнению с Angular или React вместо Vue?
  • Какие подводные камни могут возникнуть при разработке React-приложения?
  • Перенося приложение из AngularJS в React сколько примерно кода вы сможете использовать повторно?

Жизненный цикл компонентов высокого уровня

На самом высоком уровне компоненты React имеют события жизненного цикла, которые подразделяются на три общие категории:

  • Инициализация;
  • Обновление свойств
  • Разрушение

Каждый компонент определяет эти события, как механизм управления его свойствами, состоянием и визуализацией. Понимание этих трех общих категорий должно помочь вам четко визуализировать, когда необходимо применять определенную логику.

Например, компоненту может потребоваться добавить обработчики событий в DOM, когда он будет создаваться впервые. Тем не менее, вероятно, следует удалить эти обработчики событий, когда компонент отключается от DOM, так что нерелевантная обработка не возникает.

Жизненный цикл компонентов низкого уровня

React

Внутри этих трех общих категорий существует ряд методов, которые могут быть использованы любым компонентом React для более точного управления обновлениями. Понимание того, как, что и когда работает, является ключом к созданию стабильных компонентов и управлению процессом рендеринга.

Взгляните на изображение выше. События в разделе «Инициализация» происходят только тогда, когда компонент сначала инициализируется или добавляется в DOM. Точно так же события в разделе «Разрушение» происходят только один раз (когда компонент удаляется из DOM). Однако события в разделе «Обновление» происходят каждый раз при изменении свойств или состояния компонента.

Например, компоненты будут автоматически повторно отображать себя в любое время после изменения их свойств или состояния. Однако в некоторых случаях, компонент может не нуждаться в обновлении, поэтому предотвращение повторного рендеринга компонента может повысить производительность вашего приложения.

В то же время, когда Facebook впервые выпустил React, был представлен новый диалект JavaScript под названием JSX, который внедряет необработанные HTML-шаблоны внутри кода JavaScript. JSX-код сам по себе не может быть прочитан браузером: он должен быть переведен в традиционный JavaScript с использованием таких инструментов, как Babel и webpack.

  • React-разработчикам не нужно использовать JSX (и ES2015) для написания React-приложения;
  • ES2015 представил множество новых функций для JavaScript, что делает запись больших приложений намного проще, чем раньше: классы, блокировка области с помощью let и новый оператор с расширением — это лишь небольшая часть дополнений

Но пока ES2015 всё ещё распространяется, он по-прежнему поддерживается далеко не всеми крупными браузерами – поэтому для преобразования всего в устаревший код ES5 необходимы такие инструменты, как Babel или webpack.

Flux — это архитектурный шаблон, который обеспечивает однонаправленный поток данных. Его основная цель — контролировать производные данные, чтобы несколько компонентов могли взаимодействовать с этими данными без риска загрязнения.

Flux обычно используется разработчиками React, поскольку компоненты React являются декларативными. Представленный пользовательский интерфейс представляет собой просто функцию состояния.

react.js interview questions

Flux относительно прост в концепции, но важно продемонстрировать глубокое понимание его реализации. Давайте рассмотрим важные несколько дискуссионных вопросов.

Flux vs MVC

Традиционные шаблоны MVC хорошо зарекомендовали себя для разделения проблем данных (Model), UI (View) и логики (Controller), но многие веб-разработчики обнаружили ограничения, поскольку приложения растут по размеру. В частности, архитектуры MVC часто сталкиваются с двумя основными проблемами:

  • Каскадные обновления часто приводят к запутанной сети событий, которые трудно отлаживать;
  • Отсутствие целостности данных: данные модели могут быть изменены с любого места, что дает непредсказуемые результаты в пользовательском интерфейсе.

При использовании Flux, любой компонент сможет восстановить свое состояние на основе данных, предоставленных Store. Шаблон Flux также обеспечивает целостность данных, ограничивая прямой доступ к общим данным.

Разница, по сравнению с AngularJS (1.x)

Компоненты пользовательского интерфейса в AngularJS обычно полагаются на некоторую внутреннюю область $scope для хранения своих данных. Эти данные могут быть напрямую изменены с помощью компонента пользовательского интерфейса или любого доступного доступа $scope.

Напротив, Flux приветствует использование неизменяемых данных. Поскольку хранилище является центральным органом по всем данным, любые изменения этих данных должны происходить в хранилище.

Тестирование

Одним из наиболее важных аспектов создания Flux-приложений, является то, что их компоненты удобно тестировать. Разработчики могут воссоздать и протестировать состояние любого компонента React, просто обновив хранилище. Прямые взаимодействия с пользовательским интерфейсом (с помощью таких инструментов, как Selenium) в большинстве случаев больше не нужны.

Компоненты без состояния представляют собой не что иное, как чистые функции, которые делают DOM основанным исключительно на предоставляемых им свойствах.

Этот компонент не нуждается в каком-либо внутреннем состоянии, не говоря уже о конструкторах или обработчиках жизненного цикла. Выходной компонент является функцией предоставляемых ему свойств.

Посмотрев на код, можете найти 2 проблемы?1) Конструктор не передает свои реквизиты суперклассу. Он должен включать следующее строку:

2) Слушатель событий (при назначении через addEventListener ()) не имеет соответствующей области видимости, поскольку ES2015 не обеспечивает автообнаружение. Поэтому разработчик может повторно назначить clickHandler в конструкторе, чтобы включить в него правильное связывание:

Можете ли вы объяснить, что на самом деле получается на выходе?

Этот класс создает элемент и присоединяет к нему счётчик кликов. Содержимое этого компонента включает элемент, который обновляется каждый раз, когда пользователь нажимает на родительский, а также элемент, содержащий предоставленный заголовок и дочерние элементы, которые ему были переданы.

Чтобы всё работало как надо, нужно сделать вот так:

Собеседование на позицию разработчика React предполагает гораздо больше, чем просто тестирование знаний React. В этой статье были рассмотрены некоторые основные вопросы, затрагиваемые на собеседованиях. Надеемся, это будет полезным для вас!

Вы пропустили

AEGIS Algorithms Android Angular Apache Airflow Apache Druid Apache Flink Apache Spark API API Canvas AppSec Architecture Artificial Intelligence Astro Authentication Authorization AutoGPT AWS AWS Aurora AWS Boto3 AWS EC2 AWS Lambda Azure Babylon.js Backend bash Beautiful Soup Bento UI Big Data Binary Tree Browser API Bun Career Cassandra Charts ChatGPT Chrome Extension Clean Code CLI ClickHouse Coding Codux Combine Compose Computer Context Fusion Copilot Cosmo Route CProgramming cron Cryptography CSS CTF Cypress DALL-E Data Analysis Data science Database dbt dbt Cloud deno Design Design Patterns Detekt Development Distributed Systems Django Docker Docker Hub Drizzle DRY DuckDB Express FastAPI Flask Flutter For Beginners Front End Development Game Development GCN GCP Geospatial Git GitHub Actions GitHub Pages Gitlab GMS GoFr Golang Google Google Sheets Google Wire GPT-3 GPT3 Gradio Gradle Grafana Graphic Design GraphQL gRPC Guidance HMS Hotwire HTML Huawei HuggingFace IndexedDB InfoSec Interview iOS Jackknife Java JavaScript Jetpack Compose JSON Kafka Kotlin Kubernetes LangChain Laravel Linux LlaMA LLM localStorage Logging Machine Learning Magento Math Mermaid Micro Frontends Mobile Mobile App Development mondayDB MongoDB Mongoose MySQL Naming NestJS NET NetMock Networks NextJS NLP Node.js Nodejs NoSQL NPM OOP OpenAI OTP Pandas PDF PHP Playwright Plotly Polars PostgreSQL Prefect Productivity Programming Prometheus Puppeteer Pushover Python Pytorch Quarkus Rabbitmq RAG Ramda Raspberry Pi React React Native Reactor Redis REST API Revolut Riverpod RProgramming Ruby Ruby on Rails Rust Scalene SCDB ScyllaDB Selenium Servers Sklearn SLO SnowFlake Snowkase Software Architecture Software Development Solara Solid Spring Boot SQL SQLite Streamlit SudoLang Supabase Swift SwiftUI Tailwind CSS Taipy Terraform Testing Transformers TURN TypeScript Ubuntu UI Design Unix UX UX Design Vim Vite VSCode Vue Web Architecture Web Components Web Development Web Frameworks Web Scraping Web-разработка Webassembly Websocket Whisper Widgets WordPress YAML YouTube Zed Наука о данных Разное Тренды

Как исследовать и визуализировать данные МО для обнаружения объектов на изображениях