API компонента React

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

Ниже приведено подробное описание API компонента React:

Методы жизненного цикла

Методы жизненного цикла компонентов React делятся на три основные фазы: монтирование, обновление и размонтирование. Подробное описание см. в:Жизненный цикл компонента React 。

Фаза монтирования

  • constructor(props): Конструктор, используемый для инициализации состояния или привязки методов.
  • static getDerivedStateFromProps(props, state): Вызывается каждый раз перед вызовом метода render; используется для обновления состояния.
  • componentDidMount(): Вызывается после монтирования компонента; на этом этапе можно выполнять операции с DOM или запросы данных.

Пример

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  static getDerivedStateFromProps(nextProps, prevState) {
    if (nextProps.reset) {
      return { count: 0 };
    }
    return null;
  }

  componentDidMount() {
    console.log('Component mounted');
  }

  render() {
    return <div>{this.state.count}</div>;
  }
}

Фаза обновления

  • static getDerivedStateFromProps(props, state): То же, что и на фазе монтирования, используется для обновления состояния.
  • shouldComponentUpdate(nextProps, nextState): Возвращает логическое значение, которое определяет, должен ли компонент повторно рендериться.
  • render(): Отрисовывает пользовательский интерфейс компонента.
  • getSnapshotBeforeUpdate(prevProps, prevState): Вызывается перед обновлением DOM, используется для захвата некоторой информации (например, позиции прокрутки).
  • componentDidUpdate(prevProps, prevState, snapshot): Вызывается после обновления компонента.

Пример

class MyComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    return nextState.count !== this.state.count;
  }

  getSnapshotBeforeUpdate(prevProps, prevState) {
    return { scrollPosition: window.scrollY };
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    if (snapshot) {
      window.scrollTo(0, snapshot.scrollPosition);
    }
    console.log('Компонент обновлён');
  }

  render() {
    return <div>{this.state.count}</div>;
  }
}

Фаза размонтирования

  • componentWillUnmount(): Вызывается, когда компонент вот-вот будет размонтирован, используется для очистки ресурсов (таких как таймеры, обработчики событий и т. д.).

Пример

class MyComponent extends React.Component {
  componentWillUnmount() {
    console.log('Компонент будет размонтирован');
  }

  render() {
    return <div>{this.state.count}</div>;
  }
}

Управление состоянием

Состояние — это данные внутри компонента, используйтеthis.stateдля определения и управления им. ИспользуйтеsetStateметод для обновления состояния.

Пример

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment = () => {
    this.setState((prevState) => ({ count: prevState.count + 1 }));
  };

  render() {
    return (
      <div>
        <p>Счётчик: {this.state.count}</p>
        <button onClick={this.increment}>Увеличить</button>
      </div>
    );
  }
}

Передача пропсов

Доступ к пропсам, переданным компоненту, через this.props; PropTypes можно использовать для проверки типов.

Пример

import PropTypes from 'prop-types';

class MyComponent extends React.Component {
  render() {
    return <div>{this.props.title}</div>;
  }
}

MyComponent.propTypes = {
  title: PropTypes.string.isRequired,
};

// Используйте компонент и передайте пропсы
<MyComponent title="Hello, World!" />

Обработка событий

Обрабатывайте пользовательские взаимодействия с помощью функций-обработчиков событий. Нужно использовать .bind(this) или стрелочные функции, чтобы гарантировать, что this указывает на правильный контекст.

Пример

class MyComponent extends React.Component {
  handleClick = () => {
    console.log('Button clicked');
  };

  render() {
    return <button onClick={this.handleClick}>Нажми меня</button>;
  }
}

Условный рендеринг

Управление рендерингом компонента с помощью условных операторов.

Пример

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isVisible: true };
  }

  toggleVisibility = () => {
    this.setState((prevState) => ({ isVisible: !prevState.isVisible }));
  };

  render() {
    return (
      <div>
        {this.state.isVisible && <p>Это видно</p>}
        <button onClick={this.toggleVisibility}>Переключить</button>
      </div>
    );
  }
}

Рендеринг списков

Рендеринг списков с помощью метода map массива.

Пример

class MyComponent extends React.Component {
  render() {
    const items = ['Элемент 1', 'Элемент 2', 'Элемент 3'];
    return (
      <ul>
        {items.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    );
  }
}

Контролируемые компоненты

Управляйте значениями элементов формы с помощью состояния.

Пример

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: '' };
  }

  handleChange = (event) => {
    this.setState({ value: event.target.value });
  };

  handleSubmit = (event) => {
    event.preventDefault();
    console.log('Submitted value:', this.state.value);
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input type="text" value={this.state.value} onChange={this.handleChange} />
        <button type="submit">Отправить</button>
      </форма>
    );
  }
}

Установка состояния: setState

setState — это метод в React, используемый для обновления состояния компонента.

Синтаксис выглядит так:

setState(object nextState[, function callback])

Описание параметра

  • object nextState: Объект, содержащий пары ключ-значение состояния для обновления. React объединит этот объект с текущим состоянием.
  • function callback: Необязательная функция обратного вызова, которая выполняется после обновления состояния и завершения повторного рендеринга.

Объединить nextState с текущим состоянием и выполнить повторный рендеринг компонента.

setState — основной метод для запуска обновлений UI в обработчиках событий React и функциях обратного вызова запросов.

О setState

Вы не можете изменять состояние через this.state внутри компонента, потому что это состояние будет заменено после вызова setState().

setState() не изменяет this.state немедленно; вместо этого он создаёт состояние, которое будет обработано. setState() не обязательно синхронен; для повышения производительности React выполняет пакетную обработку изменений состояния и рендеринга DOM.

setState() всегда будет вызывать повторный рендеринг компонента, если в shouldComponentUpdate() не реализована какая-либо логика условного рендеринга.

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

Пример React

class Counter extends React.Component{ constructor(props) { super(props); this.state = {clickCount: 0}; this.handleClick = this.handleClick.bind(this); } handleClick() { this.setState(function(state) { return {clickCount: state.clickCount + 1}; }); } render () { return (<h2 onClick={this.handleClick}>Нажми меня! Количество кликов:{this.state.clickCount}</h2>); } } const root = ReactDOM.createRoot(document.getElementById("root")); root.render( <Counter /> );

Попробуйте »

В примере нажатие на тег h2 увеличивает счётчик кликов на 1.

Другие расширения