🌐 100 Days of React  — «Что я сделал на 8-й день»

🌐 100 дней реакции — что я сделал на 8-й день

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

✔ Ошибка типа — отлажено

Начнем с того, на чем я остановился вчера. Да! Ошибка. Это было решено. Не мной, конечно, а двумя разными людьми — Ашар Ирфан и Сакиб Амин. 🙌

Вчера вечером Ашар увидел мой код и понял, почему приложение падает. Сакиб сделал то же самое утром. Он решил проблему и открыл pull request (PR) на GitHub.

Так в чем была ошибка!? Я сделал опечатку в своем компоненте приложения. Я по ошибке написал onDelele вместо onDelete в качестве атрибута моего компонента счетчиков. Эта небольшая опечатка приводила к сбою приложения всякий раз, когда я нажимал кнопку удаления. 😕

Вы видите, что я допустил опечатку в строке №10. После ее устранения приложение стало работать стабильно и перестало вылетать. Да!! 🥂

📦 Функциональный компонент без сохранения состояния

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

Вы можете написать функциональные компоненты без сохранения состояния в виде функций. Как!? Позволь мне показать тебе.

⚡ Эта функция называется фабричной функцией. Обычно он возвращает объект, но в нашем случае JSX-выражения. Как вы заметили выше, я передал props в качестве аргумента функции NavBar. Это потому, что теперь мы используем функциональный компонент, а в функциональных компонентах мы передаем props в качестве аргумента. Чтобы позже к нему можно было получить доступ внутри функции.

🚀 Деструктурирование объекта

В моем проекте я широко использовал this.props[property name] во многих местах. Это повторение сделало мой код беспорядочным. Так что же нам с этим делать?

Мы можем сделать наш код немного чище, деструктурировав объекты props в функциональных компонентах без сохранения состояния. Затем мы можем использовать переменные деструктурированного объекта вместо this.props[имя свойства]. 🤞

🔁 Крючки жизненного цикла

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

На этапе монтирования экземпляр компонента создается и вставляется в DOM. Фаза монтажа имеет три крючка жизненного цикла

• конструктор
• оказывать
• компонентдидмаунт

📃 Обновление состояния происходит при изменении реквизитов компонента. На этом этапе у нас есть два крючка жизненного цикла:

• оказывать
• компонентдидобдате

Этап размонтирования происходит, когда компонент удаляется из DOM. Он содержит хук жизненного цикла с именем componentWillUnmount.

Я подробно изучил эти крючки жизненного цикла, но я не буду больше писать о том, как они работают. Крючки жизненного цикла были моей последней темой сегодня. Завтра я напишу о том, что я узнал в свой 9-й день. А пока, привет ✌

Первоначально опубликовано на https://msaad.dev 1 августа 2019 г.