ReactJS useState Hook: руководство для начинающих

Введение

ReactJS, популярная библиотека JavaScript для создания пользовательских интерфейсов, представляет хуки для упрощения и улучшения логики компонентов. Одним из наиболее часто используемых хуков в React является хук useState, который управляет состоянием компонента. Понимание того, как это работает, поможет вам раскрыть весь потенциал React.

В этом руководстве для начинающих мы рассмотрим, что такое перехватчики, как инициализировать и обновлять состояние с помощью useState, а также углубимся в хранение и обновление различных типов состояния. К концу вы сможете уверенно управлять состоянием своих компонентов. Давайте приступим!

Что такое крючки?

Хуки в React

Хуки — это функции, которые позволяют вам использовать state и другие функции React без написания компонента класса. До появления хуков управление состоянием компонента было возможно только внутри компонентов класса. С помощью таких хуков, как useState, вы можете добавлять состояние к функциональным компонентам, делая их более универсальными.

React предоставляет несколько хуков, например:

• useState – для управления состоянием.
• useEffect – для побочных эффектов, таких как получение данных.
• useContext – для управления контекстом внутри вашего приложения.

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

Как инициализировать useState

Базовая инициализация

Инициализировать useState в функциональном компоненте очень просто. Все начинается с импорта хука из React и его вызова внутри вашего компонента. Синтаксис выглядит следующим образом:

import React, { useState } from 'react';

function Counter() {
  // Declare state variable and its updater function
  const [count, setCount] = useState(0);

  return (
    

      
You clicked {count} times
       setCount(count   1)}>
        Click me
      
    
  );
}

Авария:

• useState(0) инициализирует состояние с начальным значением 0.
• count — это переменная состояния, а setCount — это функция, используемая для обновления этого состояния.
• Каждый раз при нажатии кнопки состояние обновляется, и компонент повторно визуализируется с новым значением.

Как читать состояние

Доступ к текущему состоянию

Считать текущее состояние несложно. Вы просто используете переменную состояния (count в предыдущем примере) непосредственно в вашем JSX. Поскольку React повторно отображает компонент при изменении состояния, обновленное значение автоматически отражается в пользовательском интерфейсе.

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

Current count: {count}

Этот код получает доступ к состоянию счетчика и отображает его динамически.

Как обновить состояние

Использование функции установки состояния

Обновление состояния в React выполняется с использованием второго элемента из useState, который представляет собой функцию установки. Эта функция принимает обновленное значение и повторно отображает компонент с этим новым состоянием.

Вот пример увеличения и уменьшения счетчика:

 setCount(count   1)}>Increment
 setCount(count - 1)}>Decrement

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

Что может держать государство?

Различные типы значений

Состояние в React может содержать различные типы данных, в том числе:

• Примитивные типы, такие как числа, строки и логические значения.
• Объекты и массивы.
• Нулевые и неопределенные значения.

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

Удержание строки в состоянии:

const [name, setName] = useState("John");

Удержание массива в состоянии:

const [items, setItems] = useState([1, 2, 3]);

Удержание объекта в состоянии:

const [user, setUser] = useState({ name: "John", age: 30 });

Хук useState в React позволяет управлять этими различными типами данных, но при обновлении сложных типов, таких как объекты и массивы, следует соблюдать осторожность, о чем мы поговорим дальше.

Обновление объектов и массивов в состоянии

Неизменяемые обновления

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

Пример: обновление объекта

const [user, setUser] = useState({ name: "John", age: 30 });

function updateName() {
  setUser(prevState => ({
    ...prevState,
    name: "Doe"
  }));
}

В этом примере:

• Мы распространяем существующее состояние (prevState) на новый объект, используя ...prevState.
• Затем мы изменяем свойство name, не изменяя исходный объект пользователя.

Пример: обновление массива

const [items, setItems] = useState([1, 2, 3]);

function addItem() {
  setItems(prevItems => [...prevItems, 4]);
}

Здесь:

• Мы расширяем предыдущий массив (prevItems) и добавляем новый элемент (4), создавая новый массив.

Раздел часто задаваемых вопросов

Зачем использовать useState вместо состояния на основе классов?

Хуки, такие как useState, упрощают управление состоянием внутри функциональных компонентов, делая код более читабельным и менее загроможденным по сравнению с компонентами классов.

Может ли useState хранить несколько типов данных?

Да, useState может хранить строки, числа, массивы, объекты, логические значения и даже нулевые или неопределенные значения.

Обновление состояния асинхронно?

Да, React пакетно обновляет состояние, и изменения могут не отражаться сразу после вызова функции установки.

Как обновить сложные состояния, такие как объекты или массивы?

Чтобы избежать изменения исходного состояния, всегда создавайте копию объекта или массива, а затем неизменяемо обновляйте ее с помощью оператора распространения (...).

Заключение

Хук useState — один из самых мощных и часто используемых в React. Это помогает вам управлять локальным состоянием функциональных компонентов, делая ваш код React более чистым и эффективным. Независимо от того, работаете ли вы с простыми переменными или сложными объектами и массивами, понимание того, как правильно использовать и обновлять состояние, является ключом к созданию динамических приложений React. Продолжайте практиковаться, и вскоре вы с легкостью освоите управление состоянием React!

Теперь, когда вы прошли путь от нуля до героя с помощью useState, попробуйте включить его в свои проекты и увидеть магию React в действии!