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

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

Вот некоторые из наиболее распространенных методов жизненного цикла:

  • componentDidMount(): этот метод вызывается после первого рендеринга компонента. Это хорошее место для извлечения данных из API или инициализации библиотеки.
  • componentDidUpdate(): этот метод вызывается после обновления компонента. Это хорошее место для выполнения действий на основе изменений состояния или свойств.
  • componentWillUnmount(): этот метод вызывается перед удалением компонента из DOM. Это хорошее место для очистки любых ресурсов, используемых компонентом.

Вот пример того, как использовать эти методы жизненного цикла:

import React, { Component } from 'react';
class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: []
    };
  }
  componentDidMount() {
    fetch('https://myapi.com/data')
      .then(response => response.json())
      .then(data => this.setState({ data }));
  }
  componentDidUpdate(prevProps, prevState) {
    if (this.state.data !== prevState.data) {
      console.log('Data has changed!');
    }
  }
  componentWillUnmount() {
    console.log('Component is being unmounted.');
  }
  render() {
    return (
      <div>
        <p>Data: {this.state.data}</p>
      </div>
    );
  }
}
export default MyComponent;

В этом примере мы определили компонент под названием «MyComponent», который извлекает данные из API с помощью метода componentDidMount(). Мы также используем метод componentDidUpdate() для регистрации сообщения об изменении состояния данных и метод componentWillUnmount() для регистрации сообщения при размонтировании компонента.

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

Вот пример того, как обрабатывать событие нажатия кнопки:

import React, { useState } from 'react';
function MyComponent() {
  const [count, setCount] = useState(0);
  const handleClick = () => {
    setCount(count + 1);
  };
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}
export default MyComponent;

В этом примере мы определяем компонент с именем «MyComponent», который использует хук useState для определения переменной состояния счетчика и функцию с именем «handleClick», которая обновляет состояние счетчика при нажатии кнопки. Мы передаем функцию handleClick в качестве реквизита кнопки, используя атрибут onClick.

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