Используете вы экспериментальный синтаксис в React JS?

Question

[Артур]

Добрый день,начал изучать React JS и возник вопрос.
Для управления состоянием можно ли использовать такой синтаксис ?

state = {
            class: 'off',
            label: 'Нажми'
        }
        press = () => {
            let className = (this.state.class==="off")?"on":"off";
            let label = (this.state.label === 'Нажми')?'нажми еще раз?':'Нажми';
            this.setState({class: className, label: label});
        }
        render() {
            return <button onClick={this.press} className={this.state.class}>{this.state.label}</button>;
        }

Мне такой вариант больше нравится , но все же хотел узнать мнение опытных разработчиков.

Comments

[Артур]

Артём Петренков на сколько я понял классический вариант
constructor(props){
super(props);
this.state = {class: 'off',label: 'Нажми'}
}
и после с помощью bind делается привязка к состоянию.

Или я не прав?

[Артур]

Артём Петренков, Спасибо

[Роман Александрович]

Артур, я хотел добавить что не стоит хванить label в стейте
думаю в вашем примере можно написать так

render() {
            return <button onClick={this.press} className={this.state.class}>{this.state.class==="on"?'нажми еще раз':'Нажми'}</button>;
        }

а еще есть разница между bind в рендере и bind в конструкторе. В первом варианте при каждом рендере функция bind будет перевызываться что может повлиять на производительноть. Предпочтительнее делать bind в конструкторе.

[Артур]

Роман Александрович, спасибо за информацию информацию ,хотел узнать разве в вашем примере при рендере каждый раз не будет проверятся {this.state.class==="on"?'нажми еще раз':'Нажми'} ? если допустим в рендере кроме button будут еще элементы

[Роман Александрович]

Артур, будет но данная проверка не сильно влияет на производительность

[Артур]

Роман Александрович, хорошо, а

я хотел добавить что не стоит хванить label в стейте

причина тут асинхронность ?

[Роман Александрович]

Артур, ну у вас со временем проект будет расти и стейт тоже будет расти и вы не заметите как у вас стейт занимает 30 40 переменных и вот моя запись позволяет избавляться от хранение 1 переменной (как в вашем примере)