Сегодня я собираюсь поделиться некоторыми важными вопросами собеседования по React JS для начинающих. Давайте начнем.

Что такое Реакт?

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

Что такое JSX?

JSX — это XML-подобное расширение синтаксиса для ECMAScript (аббревиатура расшифровывается как JavaScript XML). По сути, он просто обеспечивает синтаксический сахар для функции React.createElement(), давая нам выразительность JavaScript наряду с синтаксисом шаблона, подобным HTML.

В приведенном ниже примере текст внутри тега <h1> возвращается как функция JavaScript в функцию рендеринга.

class App extends React.Component {
  render() {
    return(
      <div>
        <h1>{'Welcome to React world!'}</h1>
      </div>
    )
  }
}

Когда использовать компонент класса вместо функционального компонента?

Если компоненту нужны методы состояния или жизненного цикла, используйте компонент класса, в противном случае используйте компонент функции. Однако, начиная с React 16.8 с добавлением хуков, мы могли использовать состояние, методы жизненного цикла и другие функции, которые были доступны только в компоненте класса, прямо в нашем функциональном компоненте.

Что такое чистые компоненты?

React.PureComponent точно такой же, как React.Component, за исключением того, что он обрабатывает для нас метод shouldComponentUpdate(). При изменении реквизита или состояния PureComponent будет выполнять поверхностное сравнение как реквизита, так и состояния. Компонент, с другой стороны, не будет сравнивать текущие реквизиты и состояние со следующими из коробки. Таким образом, компонент будет перерисовываться по умолчанию всякий раз, когда вызывается shouldComponentUpdate.

Почему бы нам не обновить состояние напрямую?

Если мы попытаемся обновить состояние напрямую, компонент не будет повторно отображаться.

//Wrong
this.state.message = 'Hello world'

Вместо этого используйте метод setState(). Он планирует обновление объекта состояния компонента. Когда состояние изменяется, компонент отвечает повторным рендерингом.

//Correct
this.setState({ message: 'Hello World' })

В чем разница между обработкой событий HTML и React?

  1. В HTML название события должно быть строчным:
<button onclick='activateLasers()'>

В то время как в React следует соглашению camelCase:

<button onClick={activateLasers}>

2. В HTML мы можем вернуть false, чтобы предотвратить поведение по умолчанию:

<a href='#' onclick='console.log("The link was clicked."); return false;' />

В то время как в React мы должны вызывать preventDefault() явно:

function handleClick(event) {
  event.preventDefault()
  console.log('The link was clicked.')
}

3. В HTML нам нужно вызвать функцию, добавив () В то время как в реакции мы не должны добавлять () к имени функции. (например, см. функцию «activateLasers» в первом пункте)

Какая польза от рефов?

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

Как создавать рефы?

Есть два подхода

  1. Это недавно добавленный подход. Refs создаются с использованием метода React.createRef() и присоединяются к элементам React с помощью атрибута ref. Чтобы использовать refs во всем компоненте, просто назначьте ref свойству экземпляра в конструкторе.
class MyComponent extends React.Component {
  constructor(props) {
    super(props)
    this.myRef = React.createRef()
  }
  render() {
    return <div ref={this.myRef} />
  }
}

2. Мы также можем использовать подход с обратными вызовами ref независимо от версии React. Например, доступ к элементу ввода компонента панели поиска осуществляется следующим образом:

class SearchBar extends Component {
   constructor(props) {
      super(props);
      this.txtSearch = null;
      this.state = { term: '' };
      this.setInputSearchRef = e => {
         this.txtSearch = e;
      }
   }
   onInputChange(event) {
      this.setState({ term: this.txtSearch.value });
   }
   render() {
      return (
         <input
            value={this.state.term}
            onChange={this.onInputChange.bind(this)}
            ref={this.setInputSearchRef} />
      );
   }
}

Мы также можем использовать refs в функциональных компонентах, используя замыкания. Примечание. Мы также можем использовать встроенные обратные вызовы ref, хотя это не рекомендуется.

Что такое виртуальный DOM?

Виртуальный DOM (VDOM) — это представление Real DOM в памяти. Представление пользовательского интерфейса хранится в памяти и синхронизируется с «настоящим» DOM. Это шаг между вызовом функции рендеринга и отображением элементов на экране. Весь этот процесс называется согласованием.

Как работает виртуальный DOM?

Virtual DOM работает в три простых шага.

  1. Всякий раз, когда какие-либо базовые данные изменяются, весь пользовательский интерфейс повторно отображается в представлении Virtual DOM.

2. Затем вычисляется разница между предыдущим представлением DOM и новым.

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

В чем разница между теневым DOM и виртуальным DOM?

Shadow DOM – это технология браузера, предназначенная в первую очередь для определения области действия переменных и CSS в веб-компонентах. Virtual DOM – это концепция, реализованная библиотеками в JavaScript поверх API-интерфейсов браузера.

Что такое реактивное волокно?

Fiber — это новый механизм согласования или повторная реализация основного алгоритма в React v16. Цель React Fiber — повысить его пригодность для таких областей, как анимация, макет, жесты, возможность приостанавливать, прерывать или повторно использовать работу, а также назначать приоритет различным типам обновлений; и новые примитивы параллелизма.

Какова основная цель React Fiber?

Цель React Fiber – повысить его пригодность для таких областей, как анимация, компоновка и жесты. Его главной особенностью является инкрементный рендеринг: возможность разделить работу рендеринга на куски и распределить их по нескольким кадрам.

Что такое управляемые компоненты?

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

Например, чтобы написать все имена заглавными буквами, мы используем handleChange, как показано ниже:

handleChange(event) {
  this.setState({value: event.target.value.toUpperCase()})
}

Заменяют ли хуки реквизиты для рендеринга и компоненты более высокого порядка?

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

Как убедиться, что хуки соответствуют правилам в нашем проекте?

Команда React выпустила плагин ESLint под названием eslint-plugin-react-hooks, который обеспечивает соблюдение этих двух правил. Мы можем добавить этот плагин в наш проект, используя следующую команду:

npm install eslint-plugin-react-hooks@next

И примените приведенную ниже конфигурацию в нашем файле конфигурации ESLint:

// our ESLint configuration
{
  "plugins": [
    // ...
    "react-hooks"
  ],
  "rules": {
    // ...
    "react-hooks/rules-of-hooks": "error"
  }
}

Это все на сегодня. Спасибо.