Сегодняшние темы:

1. What is React?
2. It’s declarative
3. The Component Lifecycle
4. Higher-Order Components
5. How rendering works
6. Basic needs
7. React best practices
8. React Hooks
9. Don’t need Flux
10. componentWillUnmount()

Тема 1. Что такое React?

React — это библиотека JavaScript. В библиотеке мы должны сами принимать все решения. А вот во фреймворках типа Angular, Vue и т.д. аро такого нет. Некоторые решения уже приняты за нас в рамках. React не помогает нам в общении с сервером, переводах, маршрутизации и так далее. Например, «Роутер». Нам нужно импортировать его в наше приложение React. Это не стандартная вещь в React. Но фреймворк — вещь законченная. Итак, мы можем сказать, что React — это библиотека.

Тема 2. Это декларативно

В React вы используете декларативный стиль для написания своих компонентов. Давайте посмотрим на пример с <select>:

<select 
    value={value}
    onChange={handleChange}
>
    {
        somearray.map(element => 
            <option value={element.value}>
                {element.text}
            </option>
        )
    }
</select>

В этом примере <select> вы не используете цикл for для ручного создания сопоставленной коллекции. Вы не говорите что нужно сделать, а просто как это должно выглядеть.

Тема 3. Жизненный цикл компонента

В React есть два типа компонентов. У каждого компонента есть «жизненный цикл», который мы можем переопределить, чтобы запускать код в определенное время в процессе. Здесь мы увидим четыре вида «жизненного цикла»: монтирование, обновление, размонтирование и обработка ошибок.

Монтаж:

Эти методы вызываются в следующем порядке, когда экземпляр компонента создается и вставляется в DOM:

  • constructor()
  • static getDerivedStateFromProps()
  • render()
  • componentDidMount()

Обновление:

Обновление может быть вызвано изменениями реквизитов или состояния. Эти методы вызываются в следующем порядке при повторном рендеринге компонента:

  • static getDerivedStateFromProps()
  • shouldComponentUpdate()
  • render()
  • getSnapshotBeforeUpdate()
  • componentDidUpdate()

Размонтирование:

Этот метод вызывается, когда компонент удаляется из DOM:

  • componentWillUnmount()

Обработка ошибок:

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

  • static getDerivedStateFromError()
  • componentDidCatch()

Тема 4. Компоненты высшего порядка

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

const EnhancedComponent = higherOrderComponent(WrappedComponent);

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

HOC распространены в сторонних библиотеках React, таких как connect Redux и createFragmentContainer Relay.

Тема 5. Как работает рендеринг

Когда состояние компонента изменяется, вызов setState() информирует React об этом изменении. После этого React вызывает метод render() для обновления представления компонентов в памяти (Virtual DOM) и сравнивает его с тем, что отображается в браузере. Если есть изменения, React делает минимально возможное обновление DOM.

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

Я часто сравниваю это с механизмом сравнения в Git. Есть два снимка дерева компонентов, которые React сравнивает и просто меняет местами то, что нужно поменять местами.

Тема 6. Основные потребности

Самое простое приложение React требует трех вещей:

  • ReactDOM.render() для рендеринга нашего приложения
  • Элемент JSX (называемый в данном контексте корневым узлом)
  • Элемент DOM, внутри которого монтируется приложение (обычно это div с идентификатором root в файле index.html).

Тема 7. Передовой опыт React

1. Keep components small and function-specific.
2. Reusability is important, so keep creation of new components to the minimum required.
3. Comment only where necessary.
4. Name the component after the function.
5. Use capitals for component names.
6. Separate stateful aspects from rendering.
7. All files related to any one component should be in a single folder.
8. Use Modern Developer Tools.

Тема 8: хуки React

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

Есть два основных правила использования хуков React, которые мы не можем нарушать, чтобы они работали правильно:

  1. Хуки можно вызывать только в верхней части компонентов (они не могут быть в условных выражениях, циклах или вложенных функциях).
  2. Хуки можно использовать только внутри функциональных компонентов (их нельзя использовать в обычных функциях JavaScript или компонентах класса).

Тема 9. Flux не нужен

Вероятно, наиболее распространенное заблуждение среди новичков в React заключается в том, что им нужно использовать его с Redux или какой-либо другой реализацией Flux.

Редукс великолепен. Это самая популярная реализация Flux, множество функций и чистый, функциональный, тестируемый подход. Но нам это может не понадобиться.

Если чье-то приложение маленькое, или ему не нужно глобальное состояние, или у вас нет проблем с отслеживанием изменений состояния в его/ее приложении, не используйте его.

Тема 10: componentWillUnmount()

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

Мы не должны вызывать ‘setState()’ в componentWillUnmount(), потому что компонент никогда не будет перерисовываться. После размонтирования экземпляр компонента больше никогда не смонтируется.

Это все на сегодня. Увидимся в моей следующей статье.