Skip to content

Instantly share code, notes, and snippets.

@pointofpresence
Last active May 23, 2020 11:13
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save pointofpresence/7d3542721708c2a88c19d744c185758b to your computer and use it in GitHub Desktop.
Save pointofpresence/7d3542721708c2a88c19d744c185758b to your computer and use it in GitHub Desktop.

Состояние компонента и useState

С помощью хука useState можно создать локальное состояние внутри функционального компонента. Раньше это было доступно только компонентам-классам.

import React from 'react';

// создаем переменную для хранения состояния
// используя деструктуризацию массива
// синтаксис: const [stateVariable] = React.useState(defaultValue);
function App() {
  const [language] = React.useState('javascript');
  return <div>I am learning {language}</div>;
}

Примечание: все хуки, рассматриваемые в этом разделе, можно отдельно импортировать из пакета react.

import React, { useState } from "react";

function App() {
  const [language] = useState("javascript");
  return <div>I am learning {language}</div>;
}

Обновление состояния

Разумеется, созданное состояние можно обновить, иначе не имело бы смысла его создавать. Для этого используются функции-сеттеры:

function App() {
  // сеттер идет вторым параметром в деструктурируемом массиве
  // для именования используется префикс set + имя переменной в PascalCase
  const [language, setLanguage] = React.useState("python");

  return (
    <div>
      <button onClick={() => setLanguage("javascript")}>
        Change language to JS
      </button>
      <p>I am now learning {language}</p>
    </div>
  );
}

Чтобы обновить состояние, мы просто передаем в сеттер его новое значение.

Обратите внимание, в качестве обработчика события используется стрелочная функция.

Внутри одного компонента хук useState можно использовать несколько раз:

function App() {
  const [language, setLanguage] = React.useState("python");
  const [yearsExperience, setYearsExperience] = React.useState(0);

  return (
    <div>
      <button onClick={() => setLanguage("javascript")}>
        Change language to JS
      </button>
      <input
        type="number"
        value={yearsExperience}
        onChange={event => setYearsExperience(event.target.value)}
      />
      <p>I am now learning {language}</p>
      <p>I have {yearsExperience} years of experience</p>
    </div>
  );
}

В useState в качестве состояния можно передать примитивное значение или даже объект.

Если обновление зависит от предыдущего состояния, то в сеттер можно передать не объект, а функцию. Первым параметром она получит текущий state, а вернуть должна новый.

function App() {
  const [developer, setDeveloper] = React.useState({
    language: "",
    yearsExperience: 0,
    isEmployed: false
  });

  function handleToggleEmployment(event) {
    // передаем в сеттер функцию
    // в качестве параметра получаем текущее состояние
    // возвращаем обновленное состояние
    setDeveloper(prevState => {
      return { ...prevState, isEmployed: !prevState.isEmployed };
    });
  }

  return (
    <button onClick={handleToggleEmployment}>Toggle Employment Status</button>
  );
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment