Компонент класса React с примером

Компонент класса — это класс Javascript, который расширяет класс React.Component. Компонент класса определяет методы, которые выполняются в течение жизненного цикла этого компонента.

Компонент класса React — это класс, который расширяет класс React.Component. Это позволяет нашему компоненту переопределять методы родительского класса. Один из родительских методов — render(), который нам нужно переопределить, чтобы отображать наши элементы в пользовательском интерфейсе.

Компонент класса имеет состояние и может иметь конструктор и состояние.

Конструктор — это особый вид функции, которая вызывается при инициализации компонента. Мы определяем конструктор, написав constructor().

По правилу наследования вам нужно вызвать родительский конструктор, написав super() в дочернем конструкторе.

Конструктор используется для установки состояния класса. Состояние — это объект, который содержит свойства класса.

Пример

import React from 'react';
import ReactDOM from 'react-dom';

export default class Book extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return <h1>This is a book</h1>
    }
}
ReactDOM.render(<Book/>, document.getElementById('root'));

Компонент класса React с состоянием

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

В приведенном ниже примере мы сохраняем две переменные состояния: автор и год. Доступ к ним можно получить через this.state.author и this.state.year соответственно.

import React from 'react';
import ReactDOM from 'react-dom';

export default class Book extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            author: 'Michael Jordan',
            year: 2020
        }
    }

    render() {
        return <div>
            <h1>This is a book</h1>
            <h2>Author: {this.state.author}</h2>
            <h2>Year: {this.state.year}</h2>
        </div>
    }
}
ReactDOM.render(<Book/>, document.getElementById('root'));

Выход

Компонент класса React с реквизитом

Реквизиты используются для передачи данных компоненту. Свойства компонентов похожи на аргументы функции. Они записываются так же, как атрибуты HTML-элемента.

this.props возвращает все реквизиты компоненту. В приведенном ниже примере index и author — это 2 реквизита, которые передаются компоненту Book (см. ReactDOM.render()), и доступ к ним осуществляется через this.props.index и this.props.author в render().

import React from 'react';
import ReactDOM from 'react-dom';

export default class Book extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            author: 'Michael Jordan',
            year: 2020
        }
    }

    render() {
        return <div>
            <h1>This is a book with index: {this.props.index}</h1>
            <h2>Author: {this.props.author}</h2>
        </div>
    }
}

ReactDOM.render(<div>
    <Book index={1} author={'Michael'}/>
    <Book index={2} author={'John'}/>
</div>, document.getElementById('root'));

Выход

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