Сохранение и сброс состояния

Состояние привязано к позиции в дереве рендеринга

React строит деревья рендеринга для структуры компонентов в вашем пользовательском интерфейсе.

Когда вы предоставляете компоненту состояние, вы можете подумать, что состояние «живет» внутри компонента. Но состояние фактически хранится внутри React. React связывает каждое хранимое им состояние с соответствующим компонентом в зависимости от того, где этот компонент находится в дереве рендеринга.

Здесь есть только один <Counter /> тег JSX, но он отображается в двух разных позициях:

import { useState } from 'react';

export default function App() {
  const counter = <Counter />;
  return (
    <div>
      {counter}
      {counter}
    </div>
  );
}

function Counter() {
  const [score, setScore] = useState(0);
  const [hover, setHover] = useState(false);

  let className = 'counter';
  if (hover) {
    className += ' hover';
  }

  return (
    <div
      className={className}
      onPointerEnter={() => setHover(true)}
      onPointerLeave={() => setHover(false)}
    >
      <h1>{score}</h1>
      <button onClick={() => setScore(score + 1)}>
        Add one
      </button>
    </div>
  );
}

Вот как это выглядит в виде дерева:

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

В React каждый компонент на экране имеет полностью изолированное состояние. Например, если вы отображаете два Counter компонента рядом, каждый из них получит своё собственное, независимое, score и hover состояния.

Попробуйте нажать на оба счётчика и обратите внимание, что они не влияют друг на друга:

import { useState } from 'react';

export default function App() {
  return (
    <div>
      <Counter />
      <Counter />
    </div>
  );
}

function Counter() {
  const [score, setScore] = useState(0);
  const [hover, setHover] = useState(false);

  let className = 'counter';
  if (hover) {
    className += ' hover';
  }

  return (
    <div
      className={className}
      onPointerEnter={() => setHover(true)}
      onPointerLeave={() => setHover(false)}
    >
      <h1>{score}</h1>
      <button onClick={() => setScore(score + 1)}>
        Add one
      </button>
    </div>
  );
}

Как видите, при обновлении одного счётчика обновляется только состояние этого компонента:

React будет хранить состояние до тех пор, пока вы отображаете тот же компонент в той же позиции в дереве. Чтобы увидеть это, увеличьте оба счётчика, затем удалите второй компонент, сняв флажок «Отобразить второй счётчик», а затем добавьте его обратно, установив флажок:

import { useState } from 'react';

export default function App() {
  const [showB, setShowB] = useState(true);
  return (
    <div>
      <Counter />
      {showB && <Counter />} 
      <label>
        <input
          type="checkbox"
          checked={showB}
          onChange={e => {
            setShowB(e.target.checked)
          }}
        />
        Render the second counter
      </label>
    </div>
  );
}

function Counter() {
  const [score, setScore] = useState(0);
  const [hover, setHover] = useState(false);

  let className = 'counter';
  if (hover) {
    className += ' hover';
  }

  return (
    <div
      className={className}
      onPointerEnter={() => setHover(true)}
      onPointerLeave={() => setHover(false)}
    >
      <h1>{score}</h1>
      <button onClick={() => setScore(score + 1)}>
        Add one
      </button>
    </div>
  );
}

Обратите внимание, как в момент остановки рендеринга второго счётчика его состояние полностью исчезает. Это происходит потому, что при удалении React компонента он уничтожает его состояние.

Когда вы устанавливаете флажок «Отобразить второй счётчик», второй Counter и его состояние инициализируются заново (score = 0) и добавляются в DOM.

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

Сохранение состояния при одинаковом компоненте в той же позиции

В этом примере есть два разных <Counter /> тега:

import { useState } from 'react';

export default function App() {
  const [isFancy, setIsFancy] = useState(false);
  return (
    <div>
      {isFancy ? (
        <Counter isFancy={true} /> 
      ) : (
        <Counter isFancy={false} /> 
      )}
      <label>
        <input
          type="checkbox"
          checked={isFancy}
          onChange={e => {
            setIsFancy(e.target.checked)
          }}
        />
        Use fancy styling
      </label>
    </div>
  );
}

function Counter({ isFancy }) {
  const [score, setScore] = useState(0);
  const [hover, setHover] = useState(false);

  let className = 'counter';
  if (hover) {
    className += ' hover';
  }
  if (isFancy) {
    className += ' fancy';
  }

  return (
    <div
      className={className}
      onPointerEnter={() => setHover(true)}
      onPointerLeave={() => setHover(false)}
    >
      <h1>{score}</h1>
      <button onClick={() => setScore(score + 1)}>
        Add one
      </button>
    </div>
  );
}

При установке или снятии флажка состояние счётчика не сбрасывается. Независимо от того, isFancy true или false, у вас всегда будет <Counter /> в качестве первого дочернего элемента div возвращаемого корневым App компонентом:

Это тот же компонент в той же позиции, поэтому с точки зрения React это тот же счётчик.

import { useState } from 'react';

export default function App() {
  const [isFancy, setIsFancy] = useState(false);
  if (isFancy) {
    return (
      <div>
        <Counter isFancy={true} />
        <label>
          <input
            type="checkbox"
            checked={isFancy}
            onChange={e => {
              setIsFancy(e.target.checked)
            }}
          />
          Use fancy styling
        </label>
      </div>
    );
  }
  return (
    <div>
      <Counter isFancy={false} />
      <label>
        <input
          type="checkbox"
          checked={isFancy}
          onChange={e => {
            setIsFancy(e.target.checked)
          }}
        />
        Use fancy styling
      </label>
    </div>
  );
}

function Counter({ isFancy }) {
  const [score, setScore] = useState(0);
  const [hover, setHover] = useState(false);

  let className = 'counter';
  if (hover) {
    className += ' hover';
  }
  if (isFancy) {
    className += ' fancy';
  }

  return (
    <div
      className={className}
      onPointerEnter={() => setHover(true)}
      onPointerLeave={() => setHover(false)}
    >
      <h1>{score}</h1>
      <button onClick={() => setScore(score + 1)}>
        Add one
      </button>
    </div>
  );
}

Разные компоненты в одной позиции сбрасывают состояние

В этом примере при установке флажка <Counter> будет заменён на <p>:

import { useState } from 'react';

export default function App() {
  const [isPaused, setIsPaused] = useState(false);
  return (
    <div>
      {isPaused ? (
        <p>See you later!</p> 
      ) : (
        <Counter /> 
      )}
      <label>
        <input
          type="checkbox"
          checked={isPaused}
          onChange={e => {
            setIsPaused(e.target.checked)
          }}
        />
        Take a break
      </label>
    </div>
  );
}

function Counter() {
  const [score, setScore] = useState(0);
  const [hover, setHover] = useState(false);

  let className = 'counter';
  if (hover) {
    className += ' hover';
  }

  return (
    <div
      className={className}
      onPointerEnter={() => setHover(true)}
      onPointerLeave={() => setHover(false)}
    >
      <h1>{score}</h1>
      <button onClick={() => setScore(score + 1)}>
        Add one
      </button>
    </div>
  );
}

Здесь вы переключаетесь между разными типами компонентов в одной позиции. Изначально первый дочерний элемент <div> содержал Counter. Но когда вы заменили его на p, React удалил Counter из дерева пользовательского интерфейса и уничтожил его состояние.

Также, при рендеринге другого компонента в той же позиции, он сбрасывает состояние всего своего поддерева. Чтобы увидеть, как это работает, увеличьте счётчик, а затем установите флажок:

import { useState } from 'react';

export default function App() {
  const [isFancy, setIsFancy] = useState(false);
  return (
    <div>
      {isFancy ? (
        <div>
          <Counter isFancy={true} /> 
        </div>
      ) : (
        <section>
          <Counter isFancy={false} />
        </section>
      )}
      <label>
        <input
          type="checkbox"
          checked={isFancy}
          onChange={e => {
            setIsFancy(e.target.checked)
          }}
        />
        Use fancy styling
      </label>
    </div>
  );
}

function Counter({ isFancy }) {
  const [score, setScore] = useState(0);
  const [hover, setHover] = useState(false);

  let className = 'counter';
  if (hover) {
    className += ' hover';
  }
  if (isFancy) {
    className += ' fancy';
  }

  return (
    <div
      className={className}
      onPointerEnter={() => setHover(true)}
      onPointerLeave={() => setHover(false)}
    >
      <h1>{score}</h1>
      <button onClick={() => setScore(score + 1)}>
        Add one
      </button>
    </div>
  );
}

Состояние счётчика сбрасывается при нажатии на флажок. Хотя вы рендерите Counter, первый дочерний элемент div изменяется с div на section. Когда дочерний элемент div был удалён из DOM, всё поддерево ниже него (включая Counter и его состояние) также было уничтожено.

Как правило, если вы хотите сохранить состояние между перерисовками, структура вашего дерева должна «совпадать» от одной перерисовки к другой. Если структура отличается, состояние уничтожается, потому что React уничтожает состояние при удалении компонента из дерева.

import { useState } from 'react';

export default function MyComponent() {
  const [counter, setCounter] = useState(0);

  function MyTextField() {
    const [text, setText] = useState('');

    return (
      <input
        value={text}
        onChange={e => setText(e.target.value)}
      />
    );
  }

  return (
    <>
      <MyTextField />
      <button onClick={() => {
        setCounter(counter + 1)
      }}>Clicked {counter} times</button>
    </>
  );
}

Сброс состояния в одной позиции

По умолчанию React сохраняет состояние компонента, пока он находится в одной и той же позиции. Обычно именно это вам нужно, поэтому это логичный по умолчанию вариант поведения. Но иногда вам может потребоваться сбросить состояние компонента. Рассмотрим это приложение, которое позволяет двум игрокам отслеживать свои результаты во время каждого хода:

import { useState } from 'react';

export default function Scoreboard() {
  const [isPlayerA, setIsPlayerA] = useState(true);
  return (
    <div>
      {isPlayerA ? (
        <Counter person="Taylor" />
      ) : (
        <Counter person="Sarah" />
      )}
      <button onClick={() => {
        setIsPlayerA(!isPlayerA);
      }}>
        Next player!
      </button>
    </div>
  );
}

function Counter({ person }) {
  const [score, setScore] = useState(0);
  const [hover, setHover] = useState(false);

  let className = 'counter';
  if (hover) {
    className += ' hover';
  }

  return (
    <div
      className={className}
      onPointerEnter={() => setHover(true)}
      onPointerLeave={() => setHover(false)}
    >
      <h1>{person}'s score: {score}</h1>
      <button onClick={() => setScore(score + 1)}>
        Add one
      </button>
    </div>
  );
}

В настоящее время при изменении игрока счёт сохраняется. Два Counter отображаются в одной и той же позиции, поэтому React рассматривает их как один и тот же Counter с изменившимся свойством person.

Но концептуально в этом приложении они должны быть двумя отдельными счётчиками. Они могут отображаться в одном месте пользовательского интерфейса, но один из них — счётчик для Тейлора, а другой — для Сары.

Есть два способа сбросить состояние при переключении между ними:

1. Отображать компоненты в разных позициях
2. Назначать каждому компоненту явную идентичность с помощью key

Вариант 1: Отображение компонента в разных позициях

Если вы хотите, чтобы эти два Counter были независимыми, вы можете отобразить их в двух разных позициях:

import { useState } from 'react';

export default function Scoreboard() {
  const [isPlayerA, setIsPlayerA] = useState(true);
  return (
    <div>
      {isPlayerA &&
        <Counter person="Taylor" />
      }
      {!isPlayerA &&
        <Counter person="Sarah" />
      }
      <button onClick={() => {
        setIsPlayerA(!isPlayerA);
      }}>
        Next player!
      </button>
    </div>
  );
}

function Counter({ person }) {
  const [score, setScore] = useState(0);
  const [hover, setHover] = useState(false);

  let className = 'counter';
  if (hover) {
    className += ' hover';
  }

  return (
    <div
      className={className}
      onPointerEnter={() => setHover(true)}
      onPointerLeave={() => setHover(false)}
    >
      <h1>{person}'s score: {score}</h1>
      <button onClick={() => setScore(score + 1)}>
        Add one
      </button>
    </div>
  );
}

• Изначально, isPlayerA true. Таким образом, первая позиция содержит состояние Counter, а вторая пустая.
• При нажатии на кнопку «Следующий игрок» первая позиция очищается, а вторая теперь содержит Counter.

Состояние каждого Counter уничтожается каждый раз, когда он удаляется из DOM. Именно поэтому они сбрасываются каждый раз, когда вы нажимаете кнопку.

Это решение удобно, когда у вас отображается всего несколько независимых компонентов в одном месте. В этом примере у вас только два, поэтому отображать их отдельно в JSX несложно.

Вариант 2: Сброс состояния с помощью ключа

Есть и другой, более универсальный способ сбросить состояние компонента.

Вы могли видеть key при отображении списков. Ключи нужны не только для списков! Вы можете использовать ключи, чтобы заставить React различать любые компоненты. По умолчанию React использует порядок внутри родителя («первый счётчик», «второй счётчик»), чтобы различать компоненты. Но ключи позволяют сообщить React, что это не просто первый счётчик или второй счётчик, а конкретный счётчик — например, счётчик Тейлора. Таким образом, React узнает счётчик Тейлора, где бы он ни появлялся в дереве!

В этом примере два <Counter /> не делят состояние, хотя они появляются в одном и том же месте в JSX:

import { useState } from 'react';

export default function Scoreboard() {
  const [isPlayerA, setIsPlayerA] = useState(true);
  return (
    <div>
      {isPlayerA ? (
        <Counter key="Taylor" person="Taylor" />
      ) : (
        <Counter key="Sarah" person="Sarah" />
      )}
      <button onClick={() => {
        setIsPlayerA(!isPlayerA);
      }}>
        Next player!
      </button>
    </div>
  );
}

function Counter({ person }) {
  const [score, setScore] = useState(0);
  const [hover, setHover] = useState(false);

  let className = 'counter';
  if (hover) {
    className += ' hover';
  }

  return (
    <div
      className={className}
      onPointerEnter={() => setHover(true)}
      onPointerLeave={() => setHover(false)}
    >
      <h1>{person}'s score: {score}</h1>
      <button onClick={() => setScore(score + 1)}>
        Add one
      </button>
    </div>
  );
}

Переключение между Тейлором и Сарой не сохраняет состояние. Это происходит потому, что вы присвоили им разные keys:

{isPlayerA ? (
  <Counter key="Taylor" person="Taylor" />
) : (
  <Counter key="Sarah" person="Sarah" />
)}

Указание key сообщает React использовать само key в качестве части позиции, вместо их порядка в родительском элементе. Именно поэтому, даже если вы отображаете их в одном и том же месте в JSX, React видит их как два разных счётчика, и поэтому они никогда не будут совместно использовать состояние. Каждый раз, когда счётчик появляется на экране, его состояние создаётся. Каждый раз, когда он удаляется, его состояние уничтожается. Переключение между ними постоянно сбрасывает их состояние.

Сброс формы с ключом

Сброс состояния с ключом особенно полезен при работе с формами.

В этом приложении чата компонент <Chat> содержит состояние текстового поля ввода:

import { useState } from 'react';
import Chat from './Chat.js';
import ContactList from './ContactList.js';

export default function Messenger() {
  const [to, setTo] = useState(contacts[0]);
  return (
    <div>
      <ContactList
        contacts={contacts}
        selectedContact={to}
        onSelect={contact => setTo(contact)}
      />
      <Chat contact={to} />
    </div>
  )
}

const contacts = [
  { id: 0, name: 'Taylor', email: 'taylor@mail.com' },
  { id: 1, name: 'Alice', email: 'alice@mail.com' },
  { id: 2, name: 'Bob', email: 'bob@mail.com' }
];

Попробуйте ввести что-нибудь в поле ввода, а затем нажмите «Элис» или «Боб», чтобы выбрать другого получателя. Вы заметите, что состояние поля ввода сохраняется, потому что компонент <Chat> отображается в той же позиции в дереве.

В многих приложениях это может быть желаемым поведением, но не в приложении чата! Вы не хотите, чтобы пользователь отправлял сообщение, которое он уже набрал, неправильному человеку из-за случайного нажатия. Чтобы это исправить, добавьте key:

<Chat key={to.id} contact={to} />

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

Теперь при переключении получателя поле ввода всегда очищается:

import { useState } from 'react';
import Chat from './Chat.js';
import ContactList from './ContactList.js';

export default function Messenger() {
  const [to, setTo] = useState(contacts[0]);
  return (
    <div>
      <ContactList
        contacts={contacts}
        selectedContact={to}
        onSelect={contact => setTo(contact)}
      />
      <Chat key={to.id} contact={to} />
    </div>
  )
}

const contacts = [
  { id: 0, name: 'Taylor', email: 'taylor@mail.com' },
  { id: 1, name: 'Alice', email: 'alice@mail.com' },
  { id: 2, name: 'Bob', email: 'bob@mail.com' }
];

import { useState } from 'react';

export default function App() {
  const [showHint, setShowHint] = useState(false);
  if (showHint) {
    return (
      <div>
        <p><i>Hint: Your favorite city?</i></p>
        <Form />
        <button onClick={() => {
          setShowHint(false);
        }}>Hide hint</button>
      </div>
    );
  }
  return (
    <div>
      <Form />
      <button onClick={() => {
        setShowHint(true);
      }}>Show hint</button>
    </div>
  );
}

function Form() {
  const [text, setText] = useState('');
  return (
    <textarea
      value={text}
      onChange={e => setText(e.target.value)}
    />
  );
}