1) Как заставить компонент React перерендерится?

Самый простой способ перерендерить компонента - изменить его props. Также вы можете сделать это, используя метод this.setState. Наконец, метод this.forceUpdate может инициировать рендеринг. Стоит отметить, что два первых способа сначала вызовут метод shouldComponentUpdate(), поэтому, если вам нужен принудительный рендеринг, используйте метод forceUpdate.

2) Назовите методы жизненного цикла компонента?

Каждый компонент React проходит несколько этапов жизненного цикла, в течение которых вызывается такие методы:
  • constructor(props): инициализация компонента
  • componentWillMount(): вызывается непосредственно перед рендерингом компонента
  • render(): метод, отвечающий за рендеринг
  • componentDidMount(): метод вызывается после рендеринга компонента
  • componentWillUnmount(): вызывается перед удалением компонента из DOM

3) Какие методы компонента могут быть вызваны после некоторых изменений состояния?
  • shouldComponentUpdate(nextProps, nextState):  вызывается всякий раз, когда изменяется состояние или props . Поскольку параметры получают новый объект props и состояние. Если эти функции возвращают true компонент, будет повторно перерисован
  • componentWillUpdate(nextProps, nextState): вызывается, если shouldComponentUpdate возвращает true
  • componentDidUpdate(prevProps, prevState): вызывается сразу после обновления компонента

4)  Почему важно использовать key для отображения элементов списка ?

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

5) Как обрабатывать событие нажатия кнопки в React.js ?

Передайте функцию обработчик в свойство onClick  элемента.
<button onClick={deleteUser}>
  Delete user
</button>
6) Как передать параметр обработчику события или в callback?

Существует два способа: обернуть событие в стрелочную функцию, и передать все необходимые аргументы или использовать метод bind.
<button onClick={() => this.deleteUser(id)} />
<button onClick={this.deleteUser.bind(this, id)} />

7) Что произойдет, если передать функцию в метод setState ?

Переданная функция будет вызвана с текущим состоянием в качестве аргумента, эта функция очень полезна, если вы хотите обновить состояние целостно.
updateBalance(amount) {
  this.setState((prevState) => {
    // Important: read `prevState` instead of `this.state` when updating.
    return {amount: prevState.amount + amount}
  });
}
handleTransaction(){
    this.updateBalance(10);
    this.updateBalance(30);
    this.updateBalance(50);// this.state.amount is now zero, but when component re-renders it will be 80 
}
8) Что такое поднятие состояния вверх по иерархии в React (Lifting State Up)?

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

9) Как получить значение input?

Нет способа получить входное значение напрямую, но его можно сохранить в состоянии, используя обработчик события onChange.
 <input value={this.state.inputValue} onChange={this.updateInputValue}/>
Другой способ сделать это - использовать React refs, который обеспечивает прямой доступ к узлам DOM или компонентам React.
class CustomTextInput extends React.Component {
  constructor(props) {
    super(props);
    this.textInput = React.createRef();
    this.getInputValue = this.getInputValue.bind(this);
  }
  getInputValue() {
    this.textInput.current.value;
  }

  render() {
    return (
      <div>
        <input
          type="text"
          ref={this.textInput} />
      </div>
    );
  }}
10) Что такое строгий режим в React.js

StrictMode - инструмент для обнаружения потенциальных проблем в приложении. StrictMode обнаруживает: компоненты с небезопасными жизненными циклами, использование  устаревших API , неожиданные побочные эффекты Чтобы включить строгий режим, просто добавьте тег <React.StrictMode> где-нибудь в вашем коде.
import React from 'react';function MyApp() {
  return (
    <div>
      <Header />
      <React.StrictMode>
        <Section>
          <Post />
          <CommentBox />
        </Section>
      </React.StrictMode>
      <Footer />
    </div>
  );
}
11) Что такое порталы(Portals)?

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

12) В каком методе жизненного цикла нужно сделать HTTP-запрос ?

Рекомендуется делать HTTP-запросы внутри метода componentDidMount.

13) Что такое чистый компонент и когда он должен использоваться ?

PureComponent автоматически проверяет, должен ли компонент обновляться, поэтому вам не нужно писать shouldComponentUpdate самостоятельно. PureComponent будет вызывать функцию render(), только если обнаруживает изменения в props или в состоянии. В некоторых случаях React.PureComponent более эффективен и определенно уменьшает количество кода.

14) Как сделать условный рендер в React.js?
 
Для небольших функций рендеринга можно возвращать разные результаты, например, используя оператор if
function Header(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserProfileIcon/>;
  }
  return <AnonymousProfileIcon />;
}

Для более сложной глубоко вложенной функции рендеринга JSX можно использовать логический оператор.
function App(props) {
  const isLoggedIn = props.isLoggedIn;
  return (
         <div>
         <Header/>
         <Post/>
         {isLoggedIn && <CommentBox/>}
         <Footer/>
         </div>
            );
}
15) Как собрать React приложение в production режиме?

Если вы используете Webpack, используйте метод DefinePlugin и установите переменную окружения NODE_ENV в production.

16) Где инициализировать состояние компонента?

Наиболее популярным способом является инициализация в конструкторе. Также вы можете определить начальное состояние для компонента в методе getInitialState.
class Comment extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
    isLaoding:true
    }
   }}
Пример использования getInitialState:
var Counter = createReactClass({
  getInitialState: function() {
    return {count: 0};
  }});
17) Что представляют собой компоненты высшего порядка в React.js (HOC)?

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

const CommentComponentOnSteroids = higherOrderComponent(CommentComponent);
18) Кода нужно использовать метод getDerivedStateFromProps(props, state)?

Метод getDerivedStateFromProps подходит для случаев, когда состояние зависит от изменений во времени. Этот метод вызывается непосредственно перед методом render, во время первоначального монтирования и последующих обновлений.

19) Что такое PropTypes и как их использовать?

prop-types это библиотека для проверки типов во время выполнения для React. Эта библиотека очень полезна в больших проектах, так как уменьшает количество потенциальных ошибок.
import PropTypes from 'prop-types';
class SayHello extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.firstName} {this.props.lastName}!</h1>
    );
  }
}
Greeting.propTypes = {
  firstName: PropTypes.string,
  lastName : PropTypes.string
};
20) Что такое stateless компоненты?

Stateless компонент - это простая JavaScript функция, которая принимает props в качестве аргумента и возвращает элемент React.
class StatelessComponent extends React.Component {
  render() {
    return <div>{this.props.someProp}</div>;
  }
}