Состояние и жизненный цикл компонента

До сих пор мы только рассмотрили один способ обновления пользовательского интерфейса.

Мы вызывали ReactDOM.render() в “цикле”

1
function tick() {
2
  const element = (
3
    <div>
4
      <h1>Hello, world!</h1>
5
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
6
    </div>
7
  );
8
  ReactDOM.render(
9
    element,
10
    document.getElementById('root')
11
  );
12
}
13

14
setInterval(tick, 1000);

В этом разделе мы узнаем, как сделать компонент Clock действительно многоразовым и инкапсулированным. Он будет настраивать свой собственный таймер и обновляться каждую секунду.

Мы можем начать с инкапсуляции комопонента часов:

1
function Clock(props) {
2
  return (
3
    <div>
4
      <h1>Hello, world!</h1>
5
      <h2>It is {props.date.toLocaleTimeString()}.</h2>
6
    </div>
7
  );
8
}
9

10
function tick() {
11
  ReactDOM.render(
12
    <Clock date={new Date()} />,
13
    document.getElementById('root')
14
  );
15
}
16

17
setInterval(tick, 1000);

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

1
ReactDOM.render(
2
  <Clock />,
3
  document.getElementById('root')
4
);

Чтобы это реализовать, нам нужно добавить «состояние» к компоненту «Clock». Состояние похоже на props, но оно является частным и полностью контролируется компонентом. Мы упоминали ранее, что компоненты, определенные как классы, имеют некоторые дополнительные функции. Локальное состояние - это именно та функция которая доступна только для классов.

Преобразование функции в класс

Вы можете преобразовать функциональный компонент, например Clock, в класс за пять шагов:

1. Создайте ES6 класс с тем же именем. Класс будет расширять React.Component.
2. Добавьте к нему один пустой метод под названием render().
3. Переместите тело функции в метод render().
4. Замените prop с на this.props в теле render().
5. Удалить оставшееся объявление функции.

1
class Clock extends React.Component {
2
  render() {
3
    return (
4
      <div>
5
        <h1>Hello, world!</h1>
6
        <h2>It is {this.props.date.toLocaleTimeString()}.</h2>
7
      </div>
8
    );
9
  }
10
}

Clock теперь определяются как класс, а не функция. Это позволяет нам использовать дополнительные функции, такие как локальное состояние и перехват жизненного цикла.

Добавляем локальное состояние в класс

Мы переместим date из props в три этапа:

• Замените this.props.date на this.state.date в методе render()

1
class Clock extends React.Component {
2
  render() {
3
    return (
4
      <div>
5
        <h1>Hello, world!</h1>
6
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
7
      </div>
8
    );
9
  }
10
}

• Добавим инициализацию this.state в конструкторе класса

1
class Clock extends React.Component {
2
  constructor(props) {
3
    super(props);
4
    this.state = {date: new Date()};
5
  }
6

7
  render() {
8
    return (
9
      <div>
10
        <h1>Hello, world!</h1>
11
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
12
      </div>
13
    );
14
  }
15
}

Обратите внимание, мы должны передать props в родительский класс. Конструктор класса компонента должен всегда вызывать базовый конструктор и передавать ему props.

1
  constructor(props) {
2
    super(props);
3
    this.state = {date: new Date()};
4
  }

• Удалите date prop из елемента  <Clock />

1
ReactDOM.render(
2
  <Clock />,
3
  document.getElementById('root')
4
);

Позднее мы добавим код таймера обратно к самому компоненту. Результат выглядит следующим образом:

1
class Clock extends React.Component {
2
  constructor(props) {
3
    super(props);
4
    this.state = {date: new Date()};
5
  }
6

7
  render() {
8
    return (
9
      <div>
10
        <h1>Hello, world!</h1>
11
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
12
      </div>
13
    );
14
  }
15
}
16

17
ReactDOM.render(
18
  <Clock />,
19
  document.getElementById('root')
20
);

Далее мы сделаем настройку таймера и обновление каждую секунду внутри компонента Clock.

Добавление методов жизненного цикла компонента в класс

В приложениях с большим количеством компонент, очень важно высвобождать ресурсы, используемые компонентами при их уничтожении. Мы хотим настроить таймер, когда Clock отображается в DOM в первый раз. Это называется «mount» в React. Мы также хотим очистить этот таймер всякий раз, когда DOM, созданный Clock, удаляется. Это называется «unmount» в React. Мы можем объявить специальные методы для класса компонентов для запуска некоторого кода, когда компонент mount и unmount:

1
class Clock extends React.Component {
2
  constructor(props) {
3
    super(props);
4
    this.state = {date: new Date()};
5
  }
6

7
  componentDidMount() {
8

9
  }
10

11
  componentWillUnmount() {
12

13
  }
14

15
  render() {
16
    return (
17
      <div>
18
        <h1>Hello, world!</h1>
19
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
20
      </div>
21
    );
22
  }
23
}

Эти методы называются «хуками жизненного цикла».

componentDidMount () запускается после вывода компонента в DOM. Это хорошее место для установки таймера:

1
componentDidMount() {
2
    this.timerID = setInterval(
3
      () => this.tick(),
4
      1000
5
    );
6
  }

Обратите внимание, как мы сохраняем идентификатор таймера вthis.

Хотя this.props настраивается самим React, this.state имеет особое значение, вы можете добавлять дополнительные поля в класс вручную, если вам нужно сохранить что-то, что не используется для визуального вывода. Если вы не используете что-то в render(), оно не должно находиться в this.state. Мы уничтожем наш таймер в методе componentWillUnmount ():

1
componentWillUnmount() {
2
    clearInterval(this.timerID);
3
  }

Наконец, мы будем применять метод, называемый tick(), который компонент Clock будет запускать каждую секунду. Он будет использовать this.setState() для обновления локального состояния компонента:

1
class Clock extends React.Component {
2
  constructor(props) {
3
    super(props);
4
    this.state = {date: new Date()};
5
  }
6

7
  componentDidMount() {
8
    this.timerID = setInterval(
9
      () => this.tick(),
10
      1000
11
    );
12
  }
13

14
  componentWillUnmount() {
15
    clearInterval(this.timerID);
16
  }
17

18
  tick() {
19
    this.setState({
20
      date: new Date()
21
    });
22
  }
23

24
  render() {
25
    return (
26
      <div>
27
        <h1>Hello, world!</h1>
28
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
29
      </div>
30
    );
31
  }
32
}
33

34
ReactDOM.render(
35
  <Clock />,
36
  document.getElementById('root')
37
);

Попробовать код онлайн.

Теперь, после всех наших манипуляций часы тикают каждую секунду.

Давайте быстро вспомним, что происходит, и порядок, в котором вызываются методы:

1. Когда<Clock /> передается вReactDOM.render(), React вызывает конструктор компонентаClock. ПосколькуClock должен отображать текущее время, он инициализирует объект this.state, и устанавливает текущее время. Позднее мы обновим это состояние.
2. Затем React вызывает метод render() компонентаClock. Так React узнает, что должно отображаться на экране. Затем React обновляет DOM, чтобы соответствовать результату рендерингаClock.
3. Когда Clock вставлен в DOM, React вызывает хук жизненного циклаcomponentDidMount(). Внутри компонентаClock запрашивает у браузера настройку таймера для вызова методаtick() компонента один раз в секунду
4. Каждую секунду браузер вызывает метод tick(). Компонент Clock планирует обновление UI, вызвав setState() с объектом, содержащим текущее время. Благодаря вызову setState() React знает, что состояние изменилось, и снова вызывает метод render(), чтобы вывести то что должно быть на экране. На этот раз this.state.date в методе render() будет другим, и поэтому рендеринг будет включать в себя обновленное время. React обновляет DOM.
5. Если компонент «Clock» удаляется из DOM, React вызывает hook componentWillUnmount (), чтобы таймер был остановлен.

Используем состояние правильно

Есть три вещи, которые вы должны знать о setState().

Не изменять состояние напрямую

Например, это не приведет к повторному рендерингу компонента:

1
// Wrong
2
this.state.comment = 'Hello';

Вместо этого нужно использовать setState метод

1
// Correct
2
this.setState({comment: 'Hello'});

Единственным местом, где вы можете назначить this.state, является конструктор.

Обновления состояния может быть асинхронным

React может выполнять несколько вызовов setState() в одно обновление для производительности. Поскольку this.props и this.state могут обновляться асинхронно, вы не должны полагаться на их значения для вычисления следующего состояния. Например, этот код может не обновить счетчик:

1
// Wrong
2
this.setState({
3
  counter: this.state.counter + this.props.increment,
4
});

Чтобы исправить это, используйте вторую форму setState(), которая принимает функцию, а не объект. Эта функция получит предыдущее состояние в качестве первого аргумента и props во время обновления в качестве второго аргумента:

1
// Correct
2
this.setState((prevState, props) => ({
3
  counter: prevState.counter + props.increment
4
}));

Мы использовали arrow function выше, но также можно писать обычные функции:

1
// Correct
2
this.setState(function(prevState, props) {
3
  return {
4
    counter: prevState.counter + props.increment
5
  };
6
});

Обновление состояние это объединение

Когда вы вызываете setState(), React объединяет объект, который вы указываете, с текущим состоянием. Например, ваше состояние может содержать несколько независимых переменных:

1
 constructor(props) {
2
    super(props);
3
    this.state = {
4
      posts: [],
5
      comments: []
6
    };
7
  }

Затем вы можете самостоятельно обновлять их с помощью отдельных вызовов setState ():

1
componentDidMount() {
2
    fetchPosts().then(response => {
3
      this.setState({
4
        posts: response.posts
5
      });
6
    });
7

8
    fetchComments().then(response => {
9
      this.setState({
10
        comments: response.comments
11
      });
12
    });
13
  }

Слияние неглубокое, поэтому this.setState ({comments}) оставляет this.state.posts неповрежденным, но полностью заменяет this.state.comments.

Потоки данных

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

1
<h2>It is {this.state.date.toLocaleTimeString()}.</h2>

Это также работает для пользовательских компонентов:

1
<FormattedDate date={this.state.date} />

Компонент FormattedDate получит дату в своих props и не будет знать, пришла ли она из состояния Clock, из props Clock или был набран вручную:

1
function FormattedDate(props) {
2
  return <h2>It is {props.date.toLocaleTimeString()}.</h2>;
3
}

Это обычно называют потоком данных «сверху вниз» или «однонаправленным». Любое состояние всегда принадлежит определенному компоненту, и любые данные или пользовательский интерфейс, полученные из этого состояния, могут влиять только на компоненты «ниже» их в дереве. Если вы представляете дерево компонентов как водопад props, состояние каждого компонента похоже на дополнительный источник воды, который соединяет его в произвольной точке, но также течет вниз. Чтобы показать, что все компоненты действительно изолированы, мы можем создать компонент приложения, который отображает три :

1
function App() {
2
  return (
3
    <div>
4
      <Clock />
5
      <Clock />
6
      <Clock />
7
    </div>
8
  );
9
}
10

11
ReactDOM.render(
12
  <App />,
13
  document.getElementById('root')
14
);

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