SHARE
TWEET

Untitled

Siri0n Mar 12th, 2019 (edited) 54 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. //пусть у нас есть простой компонент с двумя кнопками, считающий количество жмяков на первую и вторую кнопку
  2. //не спрашивайте, нахуя он такой нужен
  3.  
  4. //Как было раньше
  5.  
  6. class Example extends Component{
  7.  
  8.   constructor(props){
  9.     super(props);
  10.     //задаём начальный стейт. стейт - это те данные, которые сохраняются между рендерами
  11.     this.state = {
  12.       firstButtonClickCount: 0,
  13.       secondButtonClickCount: 0,
  14.     }
  15.     //делаем магическую хуйню, из-за которой, в частности, реакт решил отказаться от классов
  16.     this.onFirstButtonClick = this.onFirstButtonClick.bind(this);
  17.     this.onSecondButtonClick = this.onSecondButtonClick.bind(this);
  18.   }
  19.  
  20.   onFirstButtonClick(){
  21.     /*ещё одна магическая хуйня. мы передаём в качестве аргумента функцию, которая принимает старый стейт и возвращает кусок нового стейта, который потом shallow merge'ится в новый стейт */
  22.     this.setState(state => ({
  23.       firstButtonClickCount: state.firstButtonClickCount + 1
  24.     }));
  25.   }
  26.  
  27.   onSecondButtonClick(){
  28.     this.setState(state => ({
  29.       secondButtonClickCount: state.secondButtonClickCount + 1
  30.     }));
  31.   }
  32.  
  33.   render(){
  34.     //а это знаменитый JSX. специальный реактовский язык, который выглядит как html, но транспилируется в js
  35.     return <div>
  36.       <button onClick={this.onFirstButtonClick}>
  37.         Clicked {this.state.firstButtonClickCount} times
  38.       </button>
  39.       <button onClick={this.onSecondButtonClick}>
  40.         Clicked {this.state.secondButtonClickCount} times
  41.       </button>
  42.     </div>
  43.   }
  44. }
  45.  
  46. //как стало
  47.  
  48. function Example(){
  49.   /* теперь вместо одного стейта у нас несколько "кармашков", к которым мы получаем доступ с помощью хука useState
  50.   useState возвращает массив из двух элементов. первый элемент - значение в "кармашке" на момент текущего рендера
  51.   второй - функция, с помощью которой можно это значение изменить (изменение отразится только на будущих рендерах) */
  52.  
  53.   const [firstButtonClickCount, setFirstButtonClickCount] = useState(0);
  54.   const [secondButtonClickCount, setSecondButtonClickCount] = useState(0);
  55.  
  56.   return <div>
  57.     <button onClick={() => setFirstButtonClickCount(firstButtonClickCount + 1)}>
  58.       Clicked {firstButtonClickCount} times
  59.     </button>
  60.     <button onClick={() => setSecondButtonClickCount(secondButtonClickCount + 1)}>
  61.       Clicked {secondButtonClickCount} times
  62.     </button>
  63.   </div>
  64. }
  65.  
  66. /* и в общем-то, код стал лаконичнее. но вот с чего у меня бомбит
  67. то, в какой "кармашек" мы попадём при каждом вызове useState, зависит исключительно от порядка вызовов useState
  68. то есть по сути МЫ БЛЯТЬ ХРАНИМ СОСТОЯНИЕ В СТЕКЕ*/
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top