Что из этого является настоящим контейнером в реакт?

Question

[Артур]

Встречаю много формулировок разных видов компонентов и стал немного путаться.

Является ли компонент, который отрисовывает другой компонент и передает в него данные, контейнером?
например

const Nav = ({data}) => <a>{data}</a>;

class NavContainer extends Component = {
  render () {
    return(
    <Nav data="Hi" />
    )
  }
};

Или контейнером называется компонент (хок), который оборачивает принимаемый компонент и передает в оборачиваемый компонент данные, ничего не отрисовывая?

const Nav = ({data}) => <a>{data}</a>;

const navContainer = (Component) => {
  return ({text, ...props}) => {
    return(
    <Component data={text} {...props} />
    )
  }
};

const withTextNav = navContainer(Nav);
<withTextNav text="hi" />

Answer 1

[Robur]

Встречаю много формулировок разных видов компонентов и стал немного путаться.

И будете встречать еще больше. Каждый придумывает свое, "немного более правильное" определение.
Кому-то контейнер это одно, а кому-то совсем другое, а третий скажет что настоящих контейнеров там вообще нет, потому что настоящие были только в 80-х а потом стали говно какое-то делать.
главное понимать что конкретный человек который вам это говорит под этим словом понимает. Называйте как хотите - если работаете в команде - то договоритесь что какой термин значит. Если самостоятельно - то все равно.

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

Answer 2

[Андрей Охотников]

Я называю контейнерами такие компоненты которые не содержат jsx разметки, они работают с данными и передают их в другие компоненты (тупые), которые в свою очередь ничего с данными не делают, а подставляют их в jsx и возвращают разметку

Comments

[Артур]

1. Оба предложенных мной варианта подходят под ваше описание (первый с небольшой оговоркой, но он тоже возвращает глупый компонент).

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

[Андрей Охотников]

Артур, 1. Да, под мое описания оба подходят. 2. Все так и есть

[Павел Диденко]

Артур, по контейнерам не совсем верно. Их создают только для того, чтобы избежать дублирования кода. Если у вас есть компонент со сложной логикой - необязательно делать из него контейнер, т.к. он используется всего 1 раз. Тут уже на усмотрение.

Answer 3

[Павел Диденко]

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

Выглядит это примерно так:

const Container = (View) => {
 return class extends Component {
  state = { num: 1 };
  render() {
   return <View {..this.state} {...this.props} />
  }
 }
}

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

HOC это немного другое, например connect у react-redux это HOC, разницу между connect и выносом логики для отрисовки конкретных компонентов, думаю поймете сами