Переменные (Состояния и пропсы)

Переменные (состояния)

В React есть переменные, которые называются состояния, и создаются в методе constructor() через свойство thist.state.

class Items extends React.Component {
    constructor(props) {
        super(props);
        this.state = {name: "React"};
    }
    
    render() {
        return (
            <p>Приложение: {this.state.name}</p>
        );
    }
}

// Вывод данных в элементе "#app"
ReactDOM.render(<Items />, document.getElementById("app"));

Пример кода на Playcode

При изменении значения состояния, они автоматически изменятся в самом DOM.

В результате будет сгенерирован HTML:

<p>Приложение: React</p>

Когда состояние this.state изменяется, то React снова вызывает render() и генерирует приложение с новыми данными.

Состояния доступны в пределах текущего компонента.

Изменить состояние можно через метод this.setState().

// неправильно
this.state.name = "JavaScript";

// правильно
this.setState({name: "JavaScript"});

Если значение состояния задаётся через this.state или this.props, то рекомендуется использовать следующий код:

// неправильно
this.setState({
  name: this.state.value + this.props.value
});

// правильно
this.setState((state, props) => ({
  name: state.value + props.value
}));

React экранирует переменные (например, <h1> преобразуется в <h1>). Это сделано для предотвращения атак XSS.

Параметры (пропсы)

При создании React-приложения можно передавать параметры, которые будут доступны через объект props.

class Item extends React.Component {    
    render() {
        return (
            <p>Приложение: {this.props.title}</p>
        );
    }
}

ReactDOM.render(<Item title="React" />, document.getElementById("app"));

// Приложение: React

Пример кода на Playcode

Для каждого объекта можно передавать свой параметр:

ReactDOM.render(<div>
    <Item title="React" />
    <Item title="JavaScript" />
    <Item title="jQuery" />
</div>, document.getElementById("app"));

// Приложение: React
// Приложение: JavaScript
// Приложение: jQuery

Пример кода на Playcode

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

class Items extends React.Component {
    constructor(props) {
        super(props);
        this.state = {name: props.title};
    }
    
    render() {
        return (
            <p>Приложение: {this.state.name}</p>
        );
    }
}

// Вывод данных в элементе "#app"
ReactDOM.render(<Items title="React" />, document.getElementById("app"));

Пример кода на Playcode

Пропсы можно только читать. При попытке изменить пропс будет показываться ошибка «Cannot assign to read only property 'title' of object».