После создания элемента нельзя изменить его потомков или атрибуты

8.62M

Category:

programming

6_React

1. Инструменты фронтенд-разработки

Императивный ответ:
«Пройди через северный выход парковки и поверни налево.
Сядь на автобус 678 и выйди на остановке «Улица Победы».
Иди прямо и поверни направо у первого светофора.
На следующем светофоре поверни налево. Номер моего дома — 134.»
Декларативный ответ:
Мой адрес: Энск, улица Победы, дом 134.

6. 7. Приложение на JS и HTML

8. Приложение на React

9. Подключение

Шаг 1: Добавляем DOM-контейнер в HTML
Шаг 2: Добавляем script-теги
Шаг 3: Создаём React-компонент

10. Минификация JavaScript для продакшена

11. Используем React с JSX

Используем React с JSX
React
React с JSX

12. Используем React с JSX

Используем React с JSX
Использование React как препроцессора

13. Онлайн-песочницы

• CodePen,
• CodeSandbox,
• Stackblitz.

14. JSX

15. 16. Выражения JSX

17. Атрибуты

18. Дочерние элементы

19. Рендеринг элементов

20. Рендеринг элементов

метод ReactDOM.render(). Этот метод принимает три параметра:
• ReactElement: элемент для рендеринга
• DOMElement: элемент DOM, в который надо добавить ReactElement
• Callback: опциональная функция обратного вызова

21. После создания элемента нельзя изменить его потомков или атрибуты

22. 23. Функциональные и классовые компоненты

Функциональные и классовые
компоненты

24. «Пропсы» (props)

25. Композиции компонентов

26. Извлечение компонентов

27. Извлечение компонентов

28. Извлечение компонентов

29. Пропсы можно только читать

30. Состояние

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

1.
2.
constructor(props): конструктор, в котором происходит начальная инициализация компонента
static getDerivedStateFromProps(props, state): вызывается непосредственно перед рендерингом
компонента. Этот метод не имеет доступа к текущему объекту компонента (то есть обратиться к
объкту компоненту через this) и должен возвращать объект для обновления объекта state или
значение null, если нечего обновлять.
3.
4.
render(): рендеринг компонента
componentDidMount(): вызывается после рендеринга компонента. Здесь можно выполнять
запросы к удаленным ресурсам
componentWillUnmount(): вызывается перед удалением компонента из DOM
5.

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

1.
2.
3.
4.
5.
static getDerivedStateFromProps(props, state)
shouldComponentUpdate(nextProps, nextState): вызывается каждый раз при обновлении объекта props или state. В качестве
параметра передаются новый объект props и state. Эта функция должна возвращать true (надо делать обновление) или
false (игнорировать обновление). По умолчанию возвращается true. Но если функция будет возвращать false, то тем самым
мы отключим обновление компонента, а последующие функции не будут срабатывать.
render(): рендеринг компонента (если shouldComponentUpdate возвращает true)
getSnapshotBeforeUpdate(prevProps, prevState): вызывается непосредственно перед компонента. Он позволяет компоненту
получить информацию из DOM перед возможным обновлением. Возвращает в качестве значения какой-то отдельный
аспект, который передается в качестве третьего параметра в метод componentDidUpdate() и может учитываться в
componentDidUpdate при обновлении. Если нечего возвращать, то возвращается значение null
componentDidUpdate(prevProps, prevState, snapshot): вызывается сразу после обновления компонента (если
shouldComponentUpdate возвращает true). В качестве параметров передаются старые значения объектов props и state.
Третий параметр - значение, которое возвращает метод getSnapshotBeforeUpdate

33. Состояние и жизненный цикл

Состояние и жизненный цикл

34.

35.

36.

37.

38. 39. Асинхронные обновления

40. 41. Обработка событий

• События в React именуются в стиле camelCase вместо
нижнего регистра.
• С JSX вы передаёте функцию как обработчик события
вместо строки.