В React есть два способа обработки данных: Props и State. Компоненты React будут отображаться, если есть какие-либо изменения или обновления в состоянии или свойствах. Каждый компонент имеет свое собственное состояние и используется только для хранения значений. тогда как реквизиты используются для передачи данных от родительского компонента к дочернему компоненту. Прежде чем приступить к чтению этого поста, я рекомендую вам прочитать мои предыдущие статьи о ReactJS basic. В этой статье я расскажу об обработке данных с помощью State.

Состояние. Состояние используется для хранения значения в компоненте. Есть несколько ключевых моментов, которые вы должны помнить о состоянии:

  1. Состояние инициализируется внутри метода конструктора компонента.
  2. Доступ к состоянию невозможен из-за пределов компонента, но значение может быть передано через свойства.
  3. Состояние содержит динамические данные, где значение может быть изменено в любое время в зависимости от действий пользователя, но значение состояния не должно изменяться напрямую. Состояние обновляет свое значение с помощью метода setState().

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

import React from 'react';
class Hello extends React.Component {    
    constructor() {    
        this.state = {      
            userName: "Jhon Doe"    
        };  
    }
    changeName = () => {
      this.setState({
      userName: "Ben Smith"
     });
   };    
    
    render() {    
        return (      
            <div>        
              <p>{this.state.userName}</p> 
              <button onClick={this.changeName}>Change user name</button>   
            </div>    
        );  
    }
}

В приведенном выше примере сначала я создал компонент класса с именем «Hello», и у него есть специальный метод, называемый constructor(). Внутри метода конструктора() я инициализировал состояние, которое является объектом, и добавил свойство userName со значением "John Smith".В методе render() мы получаем свойство userName, используя Точечная нотация JavaScript, подобная этой {this.state.userName}Теперь вы можете видеть, что имя пользователя отображается на экране.

Теперь давайте посмотрим, как мы можем обновить состояние. Здесь мы добавили элемент кнопки, чтобы имя пользователя менялось при нажатии кнопки. В элемент кнопки мы добавили обработчик события onClick для вызова нашей функции следующим образом: <button onClick={this.changeName}>Change user name</button> Он будет запускать функцию каждый раз, когда вы нажимаете кнопку.

Внутри функции changeName мы обновили состояние с помощью setState метода следующим образом: this.setState({ userName: "Ben Smith" });Теперь имя пользователя будет изменено. Таким образом, React может обновить пользовательский интерфейс.

Надеюсь, эта статья поможет вам узнать основы обработки данных с помощью State. Нажмите здесь, чтобы прочитать больше статей:

Спасибо, что прочитали мой пост. Не стесняйтесь задавать любые вопросы в разделе комментариев. :)