В React есть два способа обработки данных: Props и State. Компоненты React будут отображаться, если есть какие-либо изменения или обновления в состоянии или свойствах. Каждый компонент имеет свое собственное состояние и используется только для хранения значений. тогда как реквизиты используются для передачи данных от родительского компонента к дочернему компоненту. Прежде чем приступить к чтению этого поста, я рекомендую вам прочитать мои предыдущие статьи о ReactJS basic. В этой статье я расскажу об обработке данных с помощью State.
Состояние. Состояние используется для хранения значения в компоненте. Есть несколько ключевых моментов, которые вы должны помнить о состоянии:
- Состояние инициализируется внутри метода конструктора компонента.
- Доступ к состоянию невозможен из-за пределов компонента, но значение может быть передано через свойства.
- Состояние содержит динамические данные, где значение может быть изменено в любое время в зависимости от действий пользователя, но значение состояния не должно изменяться напрямую. Состояние обновляет свое значение с помощью метода 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. Нажмите здесь, чтобы прочитать больше статей:
- Часть 1: Основы React JS
- Часть 2: Обработка данных с использованием реквизита
Спасибо, что прочитали мой пост. Не стесняйтесь задавать любые вопросы в разделе комментариев. :)