Концепции React, которые нужно знать на собеседовании

При подготовке к собеседованию можно забыть о базовых вещах — уделить слишком много внимания сложным вопросам и не выучить основополагающие моменты. С такой ситуацией однажды столкнулась Келси Макалистер при прохождении собеседования в React, посвятив много времени задачам кода, алгоритмам и структурам данных. На medium.com она поделилась своей историей и описала базовые концепции React, знание которых не поставит вас в неловкое положение на собеседовании.                        

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

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

Что это означает при реализации? 

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

Ниже приведен пример компонента Toggler более высокого порядка. Функция withToggler() принимает компонент в качестве своего первого аргумента, а затем передают этот компонент компоненту Toggler. Он затем отображает этот компонент, передавая переключенное состояние и функцию переключения состояния.

import React, {Component} from 'react'

class Toggler extends Component {
    state = {
        on: this.props.defaultOnValue
    }

    toggle = () => {
        this.setState(prevState => {
            return {
                on: !prevState.on
            }
        })
    }

    render(){
        const {component: C, defaultOnValue, ...props} = this.props
        return (
            <C on={this.state.on} toggle={this.toggle} {...props}/>
        )
    }
}


export function withToggler(component, optionsObj){
    return function(props){
        return(
            <Toggler component={component} defaultOnValue={optionsObj.defaultOnValue} {...props}/>
        )
    }
}

Пример ниже — это один из компонентов, визуализируемый вышеприведенным КВП. Компонент Menu отображает кнопку и меню навигации в зависимости от состояния on, передаваемого компонентом Toggler. Также по коду ниже видно, как передается компонент, а также значение начального состояния в функцию withToggler() перед его экспортом. 

Чем КВП отличаются от обычных компонентов React? 

Обычные компоненты рендерят props в элементы UI, а компоненты высшего порядка рендерят компонент на другой компонент. 

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

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

Как только React узнает, какие виртуальные объекты DOM были изменены, ТОЛЬКО эти объекты обновляются в реальной DOM. Поэтому производительность React намного выше по сравнению с манипулированием реальной DOM.

Жизненный цикл компонента React

Компоненты класса проходят три стадии жизненного цикла: 

Инициализация — нулевой этап, на котором компонент строится с заданным реквизитом и состоянием по умолчанию. Это делается в конструкторе класса компонентов. 

Монтирование — это когда компонент создается и вставляется в DOM. На этом этапе инициализации конструктор устанавливает состояние и свойства. Затем могут быть запущены функции componentDidMount(), а также производиться запросы на выборку и другие асинхронные функции. 

Обновление — это когда компонент повторно рендерится из-за изменения состояния или свойств. На этом этапе выполняются функции shouldComponentUpdate(), render() и componentDidUpdate() каждый раз, когда React обновляет DOM. 

Размонтирование — это когда компонент удаляется из DOM. 

Функциональные компоненты используют хук-эффект useEffect для достижения результатов, аналогичных методам жизненного цикла компонентов класса. Массив зависимостей useEffect позволяет управлять запуском функции только один раз, когда компонент сначала монтируется (пустой массив зависимостей), или когда выполняется обновление того, что помещено в массив зависимостей. После размонтирования компонента можно использовать функцию callback для выполнения очистки.