Друзья,
Сегодня я расскажу вам, как уничтожить вашего соперника с помощью продвинутой техники 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.