Обновление экрана

Введение

Добро пожаловать в документацию по React! В этом практическом занятии вы познакомитесь с обновлением экрана.

Skills Graph

Обновление экрана

Виртуальная машина уже содержит проект React. В общем случае вам нужно только добавить код в App.js.

Для установки зависимостей используйте следующую команду:

npm i

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

Во - первых, импортируйте useState из React:

import { useState } from "react";

Теперь вы можете объявить переменную состояния внутри вашего компонента:

function MyButton() {
  const [count, setCount] = useState(0);
  //...

Из useState вы получите два значения: текущее состояние (count) и функцию, которая позволяет вам обновить его (setCount). Вы можете дать им любые имена, но по соглашению пишут [что - то, setЧто - то].

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

function MyButton() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return <button onClick={handleClick}>Clicked {count} times</button>;
}

React вызовет функцию вашего компонента снова. На этот раз count будет равняться 1. Затем 2, и так далее.

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

// App.js
import { useState } from "react";

export default function MyApp() {
  return (
    <div>
      <h1>Counters that update separately</h1>
      <MyButton />
      <MyButton />
    </div>
  );
}

function MyButton() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return <button onClick={handleClick}>Clicked {count} times</button>;
}

Заметьте, как каждая кнопка "помнит" свое собственное состояние count и не влияет на другие кнопки.

Для запуска проекта используйте следующую команду. Затем вы можете обновить вкладку Web 8080, чтобы просмотреть веб - страницу.

npm start

Резюме

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