Nr.1

Question 1

В проекте React мы добавляем ссылку на 2 файла. Один из них - react.js, другой - react-dom.js. Почему нам нужно включить два файла, а не один?

Answer 1

Файл React.js - это небольшой файл, который выполняет работу по созданию компонентов. Поэтому он используется как в веб-проектах, так и в проектах React-Native. В Интернете компоненты затем отображаются в браузере с помощью response-dom.js. Таким образом, 2 файла разделены для возможности повторного использования.

Question 2

Что такое чистая функция?

Answer 2

Чистая функция не изменяет свой ввод. Он всегда возвращает одно и то же значение для одного и того же ввода. В React компонент должен быть чистой функцией по отношению к своим свойствам. Это означает, что для конкретного пропса визуализированный компонент всегда будет одинаковым.

Question 3

setState() - синхронный или асинхронный метод?

Answer 3

Метод setState() - асинхронный.

Question 4

Как мы можем условно отрендерить JSX в React?

Answer 4

1. Мы не можем использовать if…else внутри JSX. Но мы можем динамически возвращать элементы React в зависимости от условия.

if(isLoggedIn) {
  return 
} else {
  return 
}

2. Другой способ - использовать логические операторы для реализации встроенного if.

<div>
{count > 10 && }
</div>

3. Мы можем реализовать встроенный if…else с помощью тернарного оператора JavaScript.

{ isLoggedIn ? : }

Question 5

Если компоненту ничего не нужно отрисовывать, что мы можем сделать?

Answer 5

Метод render() или функциональный компонент может возвращать значение null.

Question 6

Почему мы предоставляем ключевой атрибут для списка объектов?

Answer 6

Ключи помогают React понять, какие элементы были изменены, добавлены или удалены.

Question 7

Что такое контролируемый компонент в React?

Answer 7

В контролируемом компоненте значение элемента формы ввода контролируется React.

Question 8

Что такое React?

Answer 8

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

Question 9

Что такое Виртуальная DOM?

Answer 9

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

Всякий раз, когда что-либо изменяется, весь пользовательский интерфейс сначала ре-рендерится в виртуальном представлении DOM. Вычисляется разница между предыдущим виртуальным представлением DOM и текущим. “Настоящий” DOM обновляется с учетом того, что действительно изменилось. Обновление виртуального DOM происходит очень быстро по сравнению с ре-рендерингом в реальном браузере. Следовательно, производительность улучшается.

Question 10

Какие существуют фазы жизненного цикла компонентов React?

Answer 10

Существует четыре различных этапа жизненного цикла компонента React:

Инициализация: На этом этапе компонент React готовит установку начального состояния и параметров по умолчанию.

Монтирование: Компонент React готов для монтирования в DOM браузера. Этот этап охватывает методы жизненного цикла componentWillMount и componentDidMount.

Обновление: На этом этапе компонент обновляется двумя способами, отправляя новые свойства и обновляя состояние. Этот этап охватывает методы жизненного цикла shouldComponentUpdate, componentWillUpdate и componentDidUpdate.

Размонтирование: На этом последнем этапе компонент не нужен и отключается из DOM браузера. Этот этап включает метод жизненного цикла componentWillUnmount.

Question 11

Как работает React?

Answer 11

React создает виртуальную DOM. Когда состояние изменяется в компоненте, он сначала запускает алгоритм «различий», который определяет, что изменилось в виртуальной DOM. Вторым шагом является согласование, при котором обновляется DOM с результатами сравнения отличий.

Question 12

Какая разница между Элементом и Компонентом в React?

Answer 12

Проще говоря, элемент в React описывает то, что вы хотите видеть на экране. Если точнее, то элемент в React является объектным представлением некого пользовательского интерфейса.
Компонент в React является функцией или классом, который при необходимости принимает данные и возвращает элемент (обычно в виде JSX, который преобразуется в вызов createElement)

Question 13

Когда вам использовать Class Component вместо Functional Component?

Answer 13

Если ваш компонент имеет состояние или содержит используемые методы значимые для компонента, то используйте Class component. В других случаях используйте Functional component.

Question 14

В чем разница между createElement и cloneElement?

Answer 14

createElement мы получаем из JSX и его React использует для создания элементов (объектное представление некоторого интерфейса). cloneElement используется для клонирования элемента и отправки ему новых параметров.

Question 15

У нас есть фрагмент кода JSX:

const content = (
  <div>
    <h1>Backbencher</h1>
  </div>
);

Напишите чистый код JavaScript после преобразования JSX в JavaScript.

Answer 15

const content = React.createElement(
  "div",
  {},
  React.createElement("h1", {}, "Backbencher")
);

Question 16

Опишите аргументы метода React.createElement().

Answer 16

React.createElement() принимает три аргумента: createElement(tag, attributes, children)

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

React.createElement(“div”, {id: “hello”}, “Backbencher”) становится -

<div>Backbencher</div>

Question 17

Что такое JSX? В чем преимущество его использования?

Answer 17

JSX позволяет создавать HTML-элементы прямо в JavaScript и помещать их в DOM без использования таких методов, как createElement() или appendChild(). JSX преобразует HTML-теги в элементы React. React использует JSX для шаблонизации вместо обычного JavaScript. Использовать JSX не обязательно, однако он предоставляет несколько преимуществ:

Он быстрее благодаря оптимизации во время компиляции кода в JavaScript.
Он также является “типобезопасным”, большинство ошибок перехватываются во время компиляции.
Он позволяет легче и быстрее создавать шаблоны.

JSX - это выражения JavaScript

JSX-выражения являются валидными JavaScript-выражениями. После компиляции, они становятся обычными объектами. Например, приведенный ниже код:

const hello = <h1> Привет, народ </h1> Компилируется в -

const hello = React.createElement {
    type: "h1",
    props: {
      className: "greet",
      children: "Привет, народ"
    }
}

Поскольку JSX компилируется в объекты, он может использоваться наравне с обычными выражениями JavaScript.

Question 18

Напишите пример функционального компонента React.

Answer 18

В React функциональный компонент - это функция JavaScript, которая возвращает элемент React.

function Banner() {
  return (
    <h1>Backbencher</h1>
  )
}

Question 19

Что такое propsв компоненте?

Answer 19

Когда React видит элемент, представляющий собой определяемый пользователем компонент, он передает атрибуты и дочерние элементы JSX этому компоненту как единый объект. Мы обращаемся к этому объекту как к props

Question 20

Здесь у нас есть функциональный компонент.

function Banner(props) {
  return (
    <h1>{props.name}</h1>
  )
}

Преобразуйте приведенный выше код в компонент класса.

Answer 20

class Banner extends React.Component {
  render() {
    return (
      <h1>{this.props.name}</h1>
    )
  }
}

Question 21

У нас есть компонент класса.

class Banner extends React.Component {

state = {
text: “”
}

incrementCount = () => {
this.state.text = “Backbencher”;
}

  render() {
    return (
      <div>
        Click
        <h1>{this.state.text}</h1>
      </div>
    )
  }
}

Когда кнопка нажата, она должна отображать текст «Backbencher». Но этого не происходит. В чем причина?

Answer 21

В данном случае state неправильно обновляется.
Значение state должно обновляться через this.setState().
Лишь тогда UI ре-рендерится.

incrementCount должен обновляться так:

incrementCount = () => {
  this.setState({
    text: "Backbencher"
  })
}

Question 22

Следующий код дает неожиданный результат.

this.setState({
counter: this.state.counter + this.props.increment,
});

Что может быть причиной? Как это исправить?

Answer 22

Поскольку setState() является асинхронным, установка нового состояния на основе предыдущего состояния иногда может пойти не так. В таких сценариях мы можем использовать синтаксис функции обратного вызова для установки состояния.

this.setState((prevState, props) => {
  return {
    counter: prevState.counter + props.increment
  }
})

Question 23

В компоненте класса мы установили начальное состояние как:

state = {
name: “Backbencher”,
age: 23
}

Затем мы обновляем состояние с помощью следующего кода:

this.setState({
age: 24
});

Каким будет текущее значение объекта состояния?

Answer 23

Состояния объединены в компоненты класса. Таким образом, значение состояния будет:

{
name: “Backbencher”,
age: 24
}

Question 24

Здесь у нас есть компонент класса:

class Banner extends React.Component {

state = {
country: “India”
}

constructor(props) {
super(props);
}

logMessage() {
console.log(this.state.country);
}

  render() {
    return (
      <div>
        Click
      </div>
    )
  }
}

При нажатии кнопки отображается сообщение об ошибке вместо отображения “India”.

Uncaught TypeError: Cannot read property ‘state’ of undefined

В чем проблема и как ее решить?

Answer 24

Здесь функция logMessage вызывается в случае нажатия кнопки. Так как эта функция не является стрелочной, значение this внутри функции равно undefined. Мы пытаемся получить значение state от undefined. Из-за этого возникает TypeError.

Мы можем решить эту проблему, явно привязав logMessage к классу компонента, используя метод bind.

constructor(props) {
super(props);
this.logMessage = this.logMessage.bind(this);
}

Мы также можем изменить logMessage на стрелочную функцию для решения этой проблемы.

logMessage = () => {
console.log(this.state.country);
}

Question 25

Как мы можем условно отрендерить JSX в React?

Answer 25

Один из способов - использовать оператор if. Мы не можем использовать if…else внутри JSX. Но мы можем динамически возвращать элементы React в зависимости от условия.

if(isLoggedIn) {
  return 
} else {
  return 
}

Другой способ - использовать логические операторы для реализации встроенного if.

<div>
{count > 10 && }
</div>

Мы можем реализовать встроенный if…else с помощью тернарного оператора JavaScript.

{ isLoggedIn ? : }

Question 26

Что такое компоненты?

Answer 26

Компоненты - это строительные блоки любого React-приложения. Как правило, приложение на React состоит из множества компонентов. Проще говоря, компонент - это JavaScript-класс или функция, опционально принимающие так называемые свойства (пропы, properties, props) и возвращающие элемент React, описывающий, как должна выглядеть определенная часть UI.

React-приложение состоит из множества компонентов, каждый из которых отвечает за отрисовку (рендеринг, render) небольшой, переиспользуемой (имеющей возможность повторного использования) части HTML. Компоненты могут вкладываться в другие компоненты, что обеспечивает возможность создания сложных приложений, состоящих из элементарных “кирпичиков”.

Question 27

Назовите преимущества и ограничения React

Answer 27

Преимущества

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

JSX (JavaScript и XML) делает код компонентов/блоков более читаемым. Он отчетливо показывает, как компоненты связаны (скомбинированы) между собой.

Связывание данных в React предоставляет хорошие условия для создания динамичных приложений.

Быстрый рендеринг. Использование встроенных методов для минимизации количества операций с DOM помогает оптимизировать и ускорить процесс обновления.

Тестируемость. Имеются отличные встроенные инструменты для тестирования и отладки кода.

Дружелюбность по отношению к SEO (search engine optimization, поисковая оптимизация).
React предоставляет возможность рендеринга страниц на стороне сервера и регистрации обработчиков событий на стороне клиента:
React.renderToString() вызывается на сервере
React.render() вызывается на клиенте
React сохраняет разметку, сгенерированную на сервере, и добавляет к ней обработчики событий

Ограничения

Кривая обучения. Будучи библиотекой, а не полноценным фреймворком, он требует глубоких знаний по внедрению UI в MVC (Model-View-Controller, Модель-Представление-Контроллер) фреймворки.

Одним из недостатков React также является ориентированность на слой представления. Для решения проблем “Представления” требуется поиск подходящей “Модели” и “Контроллера”.

Разработка приложения без использования изоморфного подхода приводит к проблемам с индексацией приложения поисковыми роботами.

Question 28

В6. Что такое ReactDOM?

Answer 28

ReactDOM - это пакет (package), предоставляющий специфичные для браузера методы, которые могут быть использованы на верхнем уровне приложения для эффективного управления DOM-элементами, имеющимися на странице. ReactDOM предоставляет в распоряжение разработчиков следующие методы:

render()
findDOMNode()
unmountComponentAtNode()
hydrate()
createPortal() и др.

Question 29

В7. В чем разница между ReactDOM и React?

Answer 29

Модуль ReactDOM содержит специфичные для DOM методы, в то время как React включает основные инструменты для разных платформ (например, React Native).

Question 30

В чем разница между классовыми и функциональными компонентами?

Answer 30

Функциональные компоненты

Функциональные компоненты - это обычные функции JavaScript. Чаще всего, они представлены в форме стрелочных функций, но их вполне можно создавать и с помощью ключевого слова function

Их часто называют компонентами без состояния, которые просто принимают данные и отображают их в некоторой форме; поэтому они, в основном, отвечают за рендеринг UI

В них нельзя использовать методы жизненного цикла (например, componentDidMount())

У них нет метода render()

Как правило, они отвечают за UI и форму представления данных (например, компонент кнопки)

Принимают и используют пропы

Им следует отдавать предпочтение в случаях, когда вам не требуется работать с состоянием

Классовые компоненты

Для создания классовых компонентов используются классы ES6, расширяющие класс React.Component

Их часто называют компонентами с состоянием, поскольку в них реализуется логика поведения на основе состояния

Внутри классов могут использоваться методы жизненного цикла (например, componentDidMount())

Принимают props и имеют к ним доступ через this.props

Могут содержать refs (ссылки) на нижележащие DOM-узлы

Могут использовать такие техники улучшения производительности, как shouldComponentUpdate() и PureComponent

Question 31

В чем разница между состоянием и пропами?

Answer 31

Состояние

Это данные, содержащиеся внутри компонента. Состояние является локальным (принадлежащем опеределенному компоненту). Компонент может обновлять состояние с помощью метода setState()

Пропы

Это данные, передаваемые дочернему компоненту от родительского. props являются доступными только для чтения в получающем их потомке. Тем не менее, передаваемая функция обратного вызова, может быть использована в потомке для обновления его состояния

Question 32

В11. Что такое “чистый” компонент (Pure Component)?

Answer 32

Pure Components - это компоненты, которые не рендерятся повторно при обновлении их состояния и пропов одними и теми же значениями. Если значение предыдущего и нового состояния и пропов равны, компонент не отрисовывается повторно. “Чистые” компоненты ограничивают повторный рендеринг, обеспечивая повышение производительности приложения.

Question 33

В12. Зачем использовать “чистые” компоненты? Когда следует использовать “чистые” компоненты вместо обычных?

Answer 33

Компоненты имеют один недостаток: они всегда повторно рендерятся вслед за родительским компонентом, даже если их пропы остались прежними.

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

Такое поведение может привести с большому количеству ненужного рендеринга. Действительно, если компонент зависит только от пропов и состояния, тогда он должен обновляться только при их изменении независимо от того, что происходит с его родительским компонентом.

Это как раз то, для чего предназначены “чистые” компоненты - они останавливают “порочный круг” рендеринга. “Чистые” компоненты не перерисовываются до тех пор, пока не изменятся их пропы и состояние.

Случаи использования “чистых” компонентов:

• В целях предотвращения повторного рендеринга компонента, чьи состояние и пропы остались прежними
• Состояние и пропы компонента являются иммутабельными
• Мы не планируем реализовывать собственный метод жизненного цикла shouldComponentUpdate()