React, Redux, Router

Question 1

Что такое React?

Answer 1

Это фронтенд библиотека. Она основана на JavaScript и поддерживается компанией Facebook. Главным предназначением этой библиотеки является предоставление разработчикам универсального UI для многократного использования.

Question 2

Перечислите особенности React?

Answer 2

Ключевые особенности:
- Virtual DOM вместо реального DOM
- Быстрота и масштабируемость
- JSX
- React легко интегрируется с другими библиотеками

Question 3

Что такое Virtual DOM? Как он работает с React?

Answer 3

Virtual DOM - легковесный JS объект, который представляет копию реального DOM дерева. Позволяет на много быстрее взаимодействовать со страницей, так как операции с реальным DOM с точки зрения производительности - сильно дороже.

Question 4

Разница между управляемыми (controlled) и не управляемыми (uncontrolled) компонентами?

Answer 4

Управляемый компонент имеет состояние и через него как раз происходит “контроль” этого компонента. Например текст в строке ввода.

Не управляемый компонент - не имеет состоянием и поэтому нет возможности контролировать что в нём происходит.

Question 5

Для чего нужен атрибут key при рендере списков?

Answer 5

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

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

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

Question 6

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

Answer 6

State не зависит от других компонентов и является внутренним состоянием компонента.

Props поступают в компонент снаружи.

Question 7

Что такое JSX?
Какие у него ограничения?

Answer 7

JSX - это диалект языка JavaScript, с помощью которого удобно производить элементы React. Его особенность в том что можно писать HTML прямо в JS файле.

Важные моменты при использовании JSX:

1. Возврат единственного корневого элемента.
2. Все теги должны быть явно закрыты.
3. Использование camelCase в именовании атрибутов.

Question 8

Что такое фрагмент (Fragment)? Почему фрагмент лучше, чем div?

Answer 8

Фрагменты позволяют группировать список дочерних элементов без добавления лишних узлов в DOM. Это полезно, когда нужно вернуть несколько элементов из компонента, но нужно избежать оборачивания их в дополнительный контейнер, такой как <div>.

<></> или <Fragment></Fragment>

Question 9

Разница между элементом и компонентом?

Answer 9

Элемент в React — это объект, описывающий, что должно быть отображено на экране (например, <h1>Hello, world!</h1>). Элементы являются строительными блоками интерфейса.

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

Question 10

Что такое React-ссылка (ref)? Как создать ссылку?

Answer 10

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

Это нужно для вызова анимации, задание фокуса и выделения текста, взаимодействия с этим элементом сторонними библиотеками.

В классовом компоненте:

В конструкторе создаётся ссылка: this.ref = React.createRef()

Закрепление за элементом: <div ref={this.ref} />

Ссылка будет каждый рендер новая.

В функциональном компоненте:

Хуком создаётся ссылка: const ref = useRef()

Закрепление за элементом: <div ref={ref} />

В объекте ref всего одно свойство - current. И в нём хранится ссылка на элемент DOM.

Question 11

Что такое контекст (Context)?
Как с ним работать?

Answer 11

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

Использование происходит в 3 этапа:

1. Создание контекста
   const ThemeContext = React.createContext(defaultValue);
2. Предоставление контекста (Provider)
   Обернуть компоненты в Provider.
   В value передать контекст.

      return (
        <ThemeContext.Provider value={theme}>
          <Page />
        </ThemeContext.Provider>
      );

3. Потребление контекста (Consumer)
   В классовом компоненте использовать свойство объекта контекста Consumer. Внутри него сделать функцию, которая в качестве аргумента получает значение контекста:

      return (
        <MyContext.Consumer>
          {value => <div>{value}</div>}
        </MyContext.Consumer>
      );

В функциональном компоненте воспользоваться хуком useContext()
const value = useContext(SomeContext).

Question 12

Могут ли веб-браузеры читать JSX?

Answer 12

Нет, не могут.

Под капотом JSX превращается в обычный JS, а элементы становятся объектами.

Question 13

В чём различие между React JS и React Native?

Answer 13

React JS - для веба.

React Native - для мобильных приложений.

Question 14

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

Answer 14

Компонентыв React JS представляют из себяфункциив JavaScript. Они делят пользовательский интерфейс React на отдельные части и позволяют разработчику повторно использовать его в любой момент.

Question 15

Что такое Props?

Answer 15

Propsот слова Properties (свойства). Это способ передать данные от родительских компонентов к ребёнку.

Важная особенность заключается в одном направлении данных, которые передаются через пропсы. Только сверху вниз. Изменять пропс в дочернем компоненте - нельзя.

Question 16

Что такое State? Как его изменить?

Answer 16

Это внутреннее состояние компонента.

В классовом компоненте:
Начальное состояние задаётся в конструкторе через указание this.state.
Последующие значения состояние указываются через this.setState().

В функциональном компоненте:
Используется хук useState()
const [state, setState] = useState(initialState)
Возвращает значение текущего состояния и функцию для его изменения.

Question 17

Зачем в setState() нужно передавать функцию?

Answer 17

В качестве аргумента для setState может быть коллбек. Это нужно, когда новое состояние зависит от старого (state ⇒ {…}).

Связанно это с тем что setState выполняется асинхронно.

Question 18

Как в React обрабатать пользовательские события?
Что такое синтетические события?

Answer 18

Обработка событий происходит обработчиками, которые можно прикрепить к JSX-элементам. В них передаётся функция.

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

Нативные события можно получить напрямую из синтетических событий, используя атрибут nativeEvent.

Question 19

Как создать обработчик события в React? И в чём будут ключевые отличия от HTML?

Answer 19

Синтаксис:

• В HTML имя события обычно пишется с использованием строчных букв:<button onclick="activateLasers()"></button>
• В React имя события следует соглашению camelCase:<button onClick={activateLasers}></button>

Предотвращения стандартного поведения:

• В HTML можно вернуть false, чтобы предотвратить стандартное поведение:<a href="#" onclick='console.log("The link was clicked."); return false;'></a>
• В React необходимо явно вызвать preventDefault():

  jsx
    function handleClick(event) {
      event.preventDefault();
      console.log("The link was clicked.");
    }
    <a href="#" onClick={handleClick}></a>
   

Вызов функции:

• В HTML необходимо вызывать функцию, добавляя () к ее имени:<button onclick="activateLasers()"></button>
• В React не нужно добавлять () к имени функции:<button onClick={activateLasers}></button>

Question 20

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

Answer 20

Глобально жизненный цикл можно разделить на 3 основных стадии:

1. Монтирование
   
   1. constructor
   2. render
   3. componentDidMount
2. Обновление
   
   1. shouldComponentUpdate
   2. componentDidUpdate
3. Размонтирование
   
   1. componentWillUnmount

Question 21

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

Answer 21

render— единственный обязательный метод в классовом компоненте. При вызове он проверяет this.props и this.state и возвращает JSX для отображения компонента.

constructor- инициализация состояния. Вызывается до того как смонтируется компонент. В начале конструктора необходимо вызывать super(props). Если это не сделать, this.props не будет определён. Это может привести к багам.

componentDidMount- вызывается сразу после монтирования. Отлично подходит для сетевых запросов и создания подписок на события. Так же тут можно работать с DOM.

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

shouldComponentUpdate - используется для повышения производительности и избегания лишних перерисовок.

componentWillUnmount- вызывается непосредственно перед размонтированием компонента. В этом методе выполняется необходимый сброс: отмена таймеров, сетевых запросов и подписок.

componentDidCatch - вызывается после возникновения ошибки у компонента-потомка.

Question 22

Что такое Компонент высшего порядка?

Answer 22

Это функция, которая в качестве аргумента принимает компонент, добавляет ему новый функционал и возвращает новый компонент.

Question 23

Что такое React хуки (Hooks)?

Answer 23

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

Question 24

Что такое синтетические события в React?

Answer 24

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

Question 25

Что такое условный рендеринг (Conditional Rendering)? Как его выполнить?

Answer 25

Возможность отрисовки компонентов на основании каких-то условий. Обычно делается использованием тернарного оператора или логического И. `cond ? var 1 : var2` `var1 && var2`

Question 26

Как в React типизировать пропсы?

Answer 26

PropTypes. Создаётся два объекта. Для типов и для значения по умолчанию. `propTypes` - типы пропсов ``` Компонента.propTypes = { prop1: PropTypes.string, prop2: PropTypes.number.isRequered // isRequered - пометка что он обязателен } ``` `defaultProps` - значения по умолчанию ``` Компонента.defaultProps = { prop2: 2, } ```

Question 27

Что такое «бурение пропсов» (Prop Drilling)? Как его избежать?

Answer 27

Когда пропс передаётся через несколько уровней компонентов. Избежать - использовать контекст или стейт-менеджеры, например redux.

Question 28

Что нельзя делать в методе `render`?

Answer 28

1. Нельзя изменять состояние компонента. Например делать вызов (`setState`). 2. Компонента должна быть чистой функцией.

Question 29

Разница между рендерингом и монтированием?

Answer 29

Рендеринг происходит при каждом изменении. Монтирование - это первый рендеринг.

Question 30

Что такое `сhildren`?

Answer 30

Возможность получить элемент, который находится в компоненте-контейнере в виде пропса. ``` function Container({ children }) { return (

{children}

); } function App() { return (

Child

); } ```

Question 31

Что такое «ленивая» (Lazy) функция? С чем обычно используется?

Answer 31

Функция, которая используется для отложенного импорта компонентов. Позволяет загружать компонент только тогда, когда он понадобился, а не при первой загрузке. Для отображения процесса загрузки, пока ленивый компонент загружается - используется компонент ``. Пока идёт загрузка - будет отображать то, что указано в пропе `fallback`. ``` const LazyComponent = React.lazy(() => import('./LazyComponent')); function App() { return (

Loading...

}>

); } ```