React и TypeScript: Практическое руководство. Быстрый старт. Ирина Кириченко

Чтение книги онлайн.

            </div>

      )

      }

      }

      function App () {

        return <Counter />

      }

      export default App

      Рассмотрим код подробней.

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

      Однако, в современных версиях React большинство разработчиков предпочитают использовать более современный синтаксис с хуками (useState, useEffect, и т.д.), который обеспечивает более читаемый и функциональный способ управления состоянием и эффектами. Хуки стали стандартом в React и рекомендуются для большинства проектов.

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

      – constructor (props): Мы объявляем конструктор для нашего компонента и передаем ему props (свойства), которые компонент получит от родительского компонента. Таким образом, props содержат информацию о данных, которые компонент может использовать.

      – super (props): Эта строка вызывает конструктор родительского класса (класса React.Component). Она необходима, чтобы наш компонент мог правильно наследовать функциональность React и корректно обрабатывать переданные свойства (props).

      – this.state = {count: 0};: Здесь мы инициализируем локальное состояние компонента. В данном случае, мы создаем переменную count и устанавливаем ее значение на 0. Состояние – это способ для компонента React хранить и отслеживать изменения данных, которые могут влиять на отображение на веб-странице.

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

      В этом примере компонент Counter (счетчик) имеет внутренний state, который используется для отслеживания количества нажатий на кнопку «Увеличить». Метод setState () обновляет состояние компонента, что влечет за собой перерендеринг.