Друзья,

Сегодня я расскажу вам, как уничтожить вашего соперника с помощью продвинутой техники ReactJS. Цель нашей Макиавеллистической операции - заморозить их браузер. Это сделает попытки врага кодировать безрезультатными. Или, по крайней мере, препятствовать их поиску в Google на неопределенный период времени. Это особенно хорошо работает с Firefox, потому что, ну, Firefox.

class Vengeance extends React.Component {
    render() {
        return (
            <div>
                <h4>Do you have pets?</h4>
                <select onChange={this.setState({hasPets: true})} defaultValue={true}>
                    <option/>
                    <option value={true}>YES</option>
                    <option value={false}>NO</option>
                </select>
            </div>
        );
    }
}

Это так просто. Противник будет получать в консоли разработчика экспоненциально растущее количество ошибок JavaScript, которые они все равно не смогут отладить, потому что приложение перестанет реагировать на любой ввод с помощью мыши или клавиатуры. Если вам повезло, и ваш противник использует Firefox или его ноутбук такой же медлительный, как и мой, его браузер перейдет в режим призрака (ууу!). Состояние, которое невозможно устранить даже с помощью меню Apple «Принудительный выход». Это приводит непосредственно к перезагрузке ноутбука. Блестящий ход. Победа одержана. Враг побежден. Счет игры 1: 0. Вы можете поблагодарить меня позже, молодой Наполеон.

Теперь, когда враг побежден, пора преподать ему ценный урок успешной разработки ReactJS.

setState(…): Cannot update during an existing state transition (such as within `render` or another component’s constructor).

Вот что происходит под капотом нашей Макиавеллистской операции. Мы вызываем функцию setState сразу, а не как обработчик onChange. То же самое, если бы мы вызывали handleChange вот так

<select onChange={this.handleChange()}>

Нашему врагу очень легко не заметить, что мы называем реальным методом. Оттуда потребуется лишь простое знание React. Обновление состояния в методе «рендеринга» приводит к бесконечному циклу. Великолепно!

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

class Vengeance extends React.Component {
    handleSelect(e) {
        this.setState({showPets: e.target.value});
    }
    render() {
        return (<div>
            <h4>Do you have pets?</h4>
            <select onChange={this.handleSelect} defaultValue={true}>
                <option/>
                <option value={true}>YES</option>
                <option value={false}>NO</option>
            </select>
        </div>);
    }
}

Или, если вы сегодня чувствуете себя хакером:

<select onChange={this.setState.bind(this, {hasPets:true})} defaultValue={true}>

В любом случае это триумф. Вот и все, сладкие штаны. Да пребудет с вами всегда сила развития.

Подпишитесь, чтобы читать больше интересных статей о веб-разработке. Если вам нравится то, что вы только что прочитали, посмотрите и другие забавные статьи в этой публикации:
#Shitcode Wednesday Ep.1
#Shitcode Wednesday Ep.2
Или напишите мне в Твиттере @ftert.