Обновление и чтение состояний с логическими значениями - PullRequest
Новая
       15

Обновление и чтение состояний с логическими значениями

0 голосов
/ 07 мая 2018

Я заметил кое-что о состояниях с логическим значением в Javascript.Рассмотрим небольшой эксперимент React ниже, который имитирует работу кнопки «Нравится» в Facebook на стороне клиента: 

export default class App extends Component {
    state = {
        liked: false,
        likes: 34
    }

    toggleLike = (e) => {
        this.setState(state => ({
            liked: !state.liked,
            likes: (!state.liked) ? state.likes + 1 : state.likes - 1
        }))
    }

    render() {
        return(
            <button onClick={this.toggleLike}>
                <label className={(this.state.liked) ? 'liked' : null}>Like:</label>
                <span>{this.state.likes}</span>
            </button>
        )
    }
}

Если this.state.liked равно true, количество лайков должно увеличиваться на 1, а значение «Нравится»"label должен добавить имя класса с именем liked, которое превращает цвет текста в голубой.В коде нет ошибок, но вот что меня смущает:

В методе toggleLike() условие (!state.liked);но при рендеринге className в HTML это (this.state.liked)

Я не понимаю, означает ли это «если новое значение состояния не равно начальному значению» или «если новое значение состояния равно true или false».

1 Ответ

0 голосов
/ 07 мая 2018

Оба проверяют, "является ли новое значение состояния истинным или ложным".

Визуализатор отображает className в соответствии со значением текущего состояния («если новое состояние истинно, сделайте что-нибудь, в противном случае сделайте что-нибудь другое»). setState, с другой стороны, использует отрицательное значение, так как он хочет установить «лайки» на основе предыдущего значения («если новое состояние ложное, сделайте что-нибудь, иначе сделайте что-то другое»).

setState также может использовать state.liked, а не !state.liked, а затем вместо записи: 

likes: (!state.liked) ? state.likes + 1 : state.likes - 1

Код будет: 

likes: (state.liked) ? state.likes -1 : state.likes + 1

Итог - оба могут использовать state.liked и, возможно, быть менее запутанными.

...