Разница между this.setState и React Hooks

В последнее время я немного больше возвращаюсь к React. Пока я на работе, в свободное время я занимаюсь кодом, а также помогаю другим с их кодом. В последнее время я заметил, что все больше и больше людей используют хуки. Когда я изучал React, у нас их не было, и приходилось прибегать к this.setState() внутри callback-функции. Итак, сегодня мы рассмотрим, что делает хук, как работает его синтаксис и где мы его используем.

handleClick = () => {
  this.setState({
  color: this.props.color
  })
}

Выше приведен пример того, как мы используем функцию обратного вызова в React. В этой функции обратного вызова handleClick мы устанавливаем состояние чего-то, возможно, div, когда на него нажимают, и используем встроенный метод setState. Обычно это все еще приемлемый метод в программировании. Однако есть несколько неудач.

  1. Вы должны инициализировать состояние через функцию-конструктор.
  2. Затем вам нужно обработать функцию обратного вызова
  3. И вы можете использовать этот метод только в компоненте класса в React.

Теперь давайте посмотрим, как мы можем настроить хук в React.

import React, {useState} from 'react';
function Counter(){
const [count, setCount] = useState(0)
  return(
    <div>
       <p>You Clicked the button {count} times!</p>
       <button onClick={() => setCount(count + 1)}>
       Click Me! 
       </button>
   </div>

 )
}

В ПОРЯДКЕ! Итак, давайте разберем это…

  1. Итак, сразу же мы импортируем useState из библиотеки React, что позволяет нам использовать хук в целом.
  2. Затем посредством деструктурирования мы устанавливаем переменную count и передаем метод setCount, аналогичный this.setState(), а затем устанавливаем состояние в 0 при каждом рендеринге.
  3. Затем для кнопки мы передаем функцию onClick, так что, когда пользователь нажимает кнопку, мы увеличиваем значение состояния count на 1 и используем эту функцию setCount в анонимной функции обратного вызова.
  4. Затем мы через JSX интерполируем значение count на странице для отображения текущего состояния.
См. также:  Динамически добавлять новые записи WTForms FieldList из пользовательского интерфейса

Итак, изначально первое, что вы должны заметить, это отсутствие компонента класса, он уже более легкий, поэтому функциональные компоненты берут верх в React. Затем мы используем useState для установки нашего хука, а не функции конструктора, и нам не нужно настраивать объект для инициализации состояния. Тогда нам не нужно явно отображать(). Поскольку мы используем функциональный компонент, мы можем просто вернуть JSX, а React сделает все остальное за нас.

Мы уже видим преимущества использования useState и хуков. Наш код намного меньше кода компонента класса, что упрощает поиск и отладку кода. В общем, я бы сказал, узнайте, как this.setState работает для нас в компонентах класса, прежде чем прыгать прямо в хуки. Хуки могут показаться волшебными, но по сути они делают то же самое в this.setState, только с меньшим количеством кода.

Надеюсь, вам понравился этот обзор структуры хуков в React. Есть еще много, много, много примеров того, как мы можем использовать хуки. Это просто царапает поверхность на данный момент. Я видел крючки, от которых кружилась голова! Так что продолжайте тренироваться!!

Понравилась статья? Поделиться с друзьями:
IT Шеф
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: