8 мая 2021 в 02:05

Вопросы для собеседования по базовым понятиям React

Перевод

Ожидает приглашения

1) Что такое виртуальный DOM? Как виртуальный DOM повышает производительность React?

Подобно "настоящему" DOM, виртуальная модель DOM представляет собой дерево узлов, в котором элементы, их атрибуты и содержимое перечислены в виде объектов и свойств. Метод render() в ReactDOM создает дерево узлов из компонентов React и обновляет это дерево в ответ на мутации в модели данных, вызванные действиями.

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

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

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

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

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

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

Решение:

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

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

React.createElement() принимает три аргумента

createElement(tag, attributes, children)

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

React.createElement("div", {id: "hello"}, "Backbencher")

становится

<div id="hello">Backbencher</div>

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

JSX - это расширение синтаксиса для JavaScript. Он создан для простого написания компонентов React. Без JSX очень сложно писать большие компоненты React на чистом JavaScript.

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

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

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

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

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

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

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

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

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

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

Решение:

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

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

class Banner extends React.Component {

  state = {
    text: ""
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

state = {
  name: "Backbencher",
  age: 23
}

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

this.setState({
  age: 24
});

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

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

{
  name: "Backbencher",
  age: 24
}

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

class Banner extends React.Component {

  state = {
    country: "India"
  }

  constructor(props) {
    super(props);
  }

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

  render() {
    return (
      <div>
        <button onClick={this.logMessage}>Click</button>
      </div>
    )
  }
}

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

Uncaught TypeError: Cannot read property 'state' of undefined

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

Здесь функция 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);
}

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

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

if(isLoggedIn) {
  return <Member />
} else {
  return <Guest />
}

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

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

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

{ isLoggedIn ? <Member/> : <Guest /> }

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

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

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

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

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

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

Теги:

Хабы: