В этой статье мы рассмотрим классовые компоненты React.js, если вы только начали изучать React, то вам будет очень интересно и полезно прочитать эту статью.
Также стоит сказать, что если вы совсем новичок и не знаете React.js вообще, то тогда вам стоит почитать статью «Быстрый старт на React.js», но там показывается работа с функциональными компонентами, так как они более актуальны и востребованы среди работодателей.
Работа с классовыми компонентами в React.js:
Работать с ними очень просто, вам нужно только создать класс и унаследовать его от React.Component, вот вам пример для наглядности:
1 2 3 4 5 6 7 | import React from 'react' class Welcome extends React.Component { render() { return <h1>Привет, {this.props.name}</h1>; } } |
Как видите мы создали компонент Welcome с использованием класса, внутри мы создали метод render(), который отвечает за то, что вывести компоненту, в нашем случае это должен быть заголовок H1 «Привет, имя», но это имя мы передаём в пропс.
Props или пропсы это определённые значения которые мы передаём в компонент, передаётся они как атрибуты вот пример:
1 | <Welcome name="Алиса" /> |
То есть, мы передали компонент атрибут name, и получаем мы его в нашем компонента как показана выше, но есть одно но, React нам выдаст ошибку, так как по сути внутри компонента мы не получили пропсы, это не функциональный компонент, где его можно так просто взять.
Для этого нам нужно создать внутри нашего класса, конструктор, и уже там получить наши пропсы, вот как это делается:
1 2 3 | constructor(props) { super(props); } |
Мы просто берём и унаследуем пропсы, если вы изучали как работать с ООП, то для вас тут всё понятно, но если нет, то почитаете статью «JS наследование».
Таким образом вы передаёте пропсы в ваш классовый компонент.
Но ещё вам нужно назначить состояние, это тоже как правило делается внутри конструктора, делается это примерно так:
1 2 3 4 5 6 | constructor(props) { super(props); this.state = { title: "", } } |
Тут в состояние мы храним один толmко заголовок, который можно вывести просто прописав вот это: this.state.title, таким образом мы выводим заголовок.
Для того чтобы изменить состояние используете такую конструкцию:
1 | this.setState({...this.state, title: "Hello World"}) |
Здесь мы используем метод setState(), внутри создаём объект, сначала внутри этого объекта делаем деструктуризацию нашего состояния, это нужно если у нас есть ещё какие то свойства в state, кроме тех, которые мы меняем, и собственно говоря, создаём свойство с новым значением которое нам надо поменять.
Последние о чём нужно рассказать, это о некоторых базовых методах, которые используются для жизненного цикла компонента.
- componentDidMount() — Код внутри метода срабатывает когда меняется состояние this.state;
- componentWillUnmount() — Код внутри метода срабатывает при удаление компонента, как правило используется для выключения событий;
Это всего два метода, которые нужно знать для работы с жененным циклом, возможно о нём мы тоже поговорим в другой раз, но стоит сказать, что метод render и constructor, тоже для этого используются, только первый для рендера, а второй при самом объявление компонента.
Вывод:
В этой статье вы прочитали про классовые компоненты React.js, как с ними работать, как внутри них работает состояние и какие есть методы для работы с жизненным циклом компонента React, какой каждый из них, для чего нужен.