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

setState

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

В приведенном выше коде у нас есть счетчик состояний «0», а в «setState» обновляется новое значение состояния. Обратите внимание, что setState работает с асинхронизацией JavaScript. Имейте в виду, что некоторые ключевые моменты о "setState".

  1. Всегда используйте setState и никогда не изменяйте состояние напрямую.
  2. Код должен быть выполнен после обновления состояния. Поместите этот код в функцию обратного вызова, которая является вторым аргументом метода setState.
  3. Когда вам нужно обновить состояние на основе предыдущего значения состояния, передайте функцию в качестве аргумента вместо обычного объекта.

Давайте посмотрим на этот пример.

Здесь мы обновляем наше текущее состояние в течение пяти раз при каждом нажатии кнопки. По сути, это пример, аналогичный ключевому моменту пункта 2. Давайте посмотрим на этот пример функционального компонента.

«УРА!» Как это просто!

Деструктуризация

Просто это особенность ES6.

Здесь слева наш основной компонент «Приложение» и справа компонент «Приветствие». Через компонент «Приложение» мы передаем свойство «name» и «heroName» в компоненте «Greet». После этого в компоненте «Greet» мы получаем эти свойства как объект через props и деструктурируем эти свойства, например

const {name, heroName} = props;

Давайте посмотрим, как мы реструктурируем свойство в «компонентах класса».

Обработка событий

Когда пользователь взаимодействует с любым приложением, запускаются события. Например - щелчки мышью, наведение курсора, нажатие клавиши, изменение события и т. Д. Давайте посмотрим, как обрабатывать событие в React.

Здесь, когда мы нажали кнопку, событие изменилось. Собственно, я вкратце опишу в этом примере вышеизложенное. Вот почему в этом разделе ничего не объясняется. Но в компоненте класса интересная концепция называет «Обработчики событий привязки».

Привязка обработчиков событий: если вы правильно понимаете "привязку обработчиков событий", вы должны знать о ключевом слове this в JavaScript.

Посмотрите на этот пример, что вы думаете. Это правильно или неправильно? Когда вы запускаете этот код, он просто работает правильно, но затем вы нажимаете кнопку. Вы получаете сообщение «TypeErro: Невозможно прочитать свойство setState», равное undefined. Что ж, давай попробуем найти нужный баг.

Согласно JavaScript, мы знаем, что когда мы использовали ключевое слово this в теле функции, оно возвращает объект Window. Если в React вы вводите ключевое слово this в консоли hadleBtn, оно возвращает неопределенное значение. Собственно, это основная причина этого «TypeErro». Что ж, теперь у нас есть причина для этой проблемы. Давай решим это.

Есть четыре (4) способа решить эту проблему, и мы видим каждый пример из этих 4 способов.

1-й способ: добавьте метод bind в обработчик событий.

<button onClick={this.handleBtn.bind(this)}>Click</button>

2-й способ: примените стрелочную функцию в обработчике события onClick.

<button onClick={() => this.handleBtn()}>Click</button>

3-й способ, в конструкторе добавьте метод привязки с обработчиком событий.

constructor(props) {
    super(props)
    this.state = {
        message: 'Hi, Bangladesh',
    }
    this.handleBtn = this.handleBtn.bind(this);
}

4-й способ: примените «стрелочную функцию» к этому обработчику события «handleBtn».

handleBtn = () => {
    this.setState({
        message: 'YAY!'
    })
}

Некоторые эксперты говорят, что все эти 4 способа номер 3 лучше подходят для повышения производительности. Итак, наш последний код: