Вопросы по React на собеседовании
2 года назад·3 мин. на чтение
В этой статье рассмотрим вопросы, которые могут встретиться на собеседовании по ReactJS на позицию React или frontend разработчика в 2023 году.
Что нового появилось в React 18?
1. Автоматический батчинг setState
В React 17 только React события будут обрабатываться пакетно, а нативные JavaScript события, промисы, setTimeout и setInterval обрабатываться не будут. В React 18 все события обрабатываются пакетно, т.е. несколько setState будут объединены в одно выполнение, что повышает производительность. На уровне данных несколько обновлений состояния объединяются в одну обработку (на уровне представления несколько визуализаций объединяются в одну визуализацию).2. Новый root API
В React 18 представлен новый root API, который поддерживает новый конкурентный рендеринг.// React 17 import React from "react" import ReactDOM from "react-dom" import App from "./App" const root = document.getElementById("root") ReactDOM.render(root, <App />) // unmount the component ReactDOM.unmountComponentAtNode(root) // React 18 import React from "react" import ReactDOM from "react-dom/client" import App from "./App" const root = document.getElementById("root") ReactDOM.createRoot(root).render(<App />) // unmount the component root.unmount()
3. Прекращение поддержки IE
Удалена поддержка браузера IE. Все новые функции, представленные React 18, основаны на современных браузерах. Если вам нужна поддержка IE, вам нужно вернуться к версии React 17.4. flushSync
Используется, чтобы заставить React сбросить всю ожидающую работу и синхронно обновить DOM.import React, {useState} from "react" import {flushSync} from "react-dom" const App = () => { const [count, setCount] = useState(0) const [count2, setCount2] = useState(0) return ( <div className="App"> <button onClick={() => { // первое обновление flushSync(() => { setCount(count => count + 1) }) // второе обновление flushSync(() => { setCount2(count2 => count2 + 1) }) }}>click</ button > <span>count: {count}</ span > <span>count2: {count2}</ span > </div> ) } export default App
5. Возвращаемое значение React компонента
В React 17 для возврата пустого компонента можно использовать только null, а явное возвращение undefined вызовет ошибку. В React 18 поддерживается возвратnull
и undefined
.
6. Поддержка useId
Генерирует один и тот же уникальный идентификатор на сервере и клиенте, чтобы избежать несовместимости при гидратации.
7. Concurrent mode (Конкурентный режим)
Конкурентный режим — это не фича, а архитектура. Это помогает приложениям оставаться отзывчивыми, подстраиваясь под производительность устройства пользователя и скорость сети, а также устраняет блокировку механизмов рендеринга, делая рендеринг прерываемым. В React несколько состояний могут быть обновлены одновременно. Разница в том, чтобы синхронные непрерываемые обновления стали асинхронными прерываемыми обновлениями.useDeferredValue
и startTransition
используются для обозначения несрочного обновления.
Почему React компоненты не могут возвращать несколько элементов?
Почему компоненты React могут иметь только один корневой элемент?- Компонент React в конце будет скомпилирован в функцию рендеринга, и возвращаемое значение функции может быть только одно. Если он не обернут в отдельный корневой узел, несколько значений будут возвращаться параллельно, что не допускается в JavaScript.
class App extends React.Component{ render() { return( <div> <h1 className="title">Hello</h1> <span>World</span> </div> ) } // После компиляции class App extends React.Component { render() { return React.createElement('div', null, [ React.createElement('h1', {className:'title'}, 'Hello'), React.createElement('span', null, 'World') ] ) } }
- Виртуальный DOM React представляет собой древовидную структуру, и корневой узел дерева может быть только один. При наличии нескольких корневых узлов невозможно подтвердить, какое дерево нужно обновить.
Как компоненты React могут возвращать несколько компонентов?
- Используя HOC (Higher Order Functions)
- Используя
React.Fragment
, вы можете добавить список элементов в группу, не создавая дополнительных узлов.
renderList() { list.map((item, key) => { return ( <React.Fragment> <tr key={item.id}> <td>{item.name}</td> <td>{item.age}</td> <td>{item.address}</td> </tr> </React.Fragment> ) }) }
- Используя массив
renderList(){ list.map((item, key) => { return [ <tr key={item.id}> <td>{item.name}</td> <td>{item.age}</td> <td>{item.address}</td> </tr> ] }) }
Каковы способы общения между React компонентами?
Существует множество способов взаимодействия компонентов, которые можно разделить на следующие категории:- Взаимодействие родительского компонента с дочерним компонентом
- Дочерний компонент взаимодействует с родительским компонентом
- Общение между соседними элементами
- Родительский компонент взаимодействует с дочерними компонентами
- Связь независимых компонентов
Как пройти junior фронтенд собеседование?
год назад·1 мин. на чтение
Раскрываем секреты прохождения интервью на позицию фронтенд junior.
В этом видео я расскажу как пройти junior фронтенд собеседование. Впереди будет еще много видео, где я открою секреты поиска первой работы, решения кодинг таск, выбора технологий и т.д.
Для многих разработчиков собеседование является сложным процессом, особенно для джуниор разработчиков. Из-за возникающего стресса порой сложно сосредоточиться на решении задач. Но не стоит волноваться. В этом видео я дам советы, как пройти junior фронтенд собеседование.
Я прошел множество интервью и собеседовал десятки кандидатов различного уровня, и у меня есть, что рассказать.
Подписывайтесь на Boosty и пишите ваши вопросы. Я запишу видео-ответы или статьи, где вы сможете получить быстрый ответ на интересующие именно вас вопросы.
Как Пройти Junior Фронтенд Интервью от Веб-разработка - DevMagazine