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

Вот пример презентационного компонента:

import React from "react"
 
function Button(props) {
  return <button>{props.label}</button>
}

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

import React, { Component } from "react"
import Button from "./Button"
 
class Form extends Component {
  state = {
    name: "",
  }
 
  handleChange = (event) => {
    this.setState({ name: event.target.value })
  }
 
  handleSubmit = (event) => {
    event.preventDefault()
    // отправка формы
  }
 
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" value={this.state.name} onChange={this.handleChange} />
        </label>
        <Button label="Submit" />
      </form>
    )
  }
}

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

Назад