it-swarm.com.ru

Разница между компонентом и контейнером в редукторе реакции

В чем разница между компонентом и контейнером в реактивной смеси?

89
Stanislav Mayorov

Component является частью React API. Компонент - это класс или функция, которая описывает часть пользовательского интерфейса React.

Container - это неформальный термин для компонента React, который connect- передается в хранилище с избыточностью. Контейнеры получают обновления состояния Redux и действия dispatch и обычно не отображают элементы DOM; они делегируют рендеринг дочерним компонентам presentational.

Для более подробной информации читайте презентация против компонентов контейнера от Дана Абрамова.

83
joews

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

Тупые/презентационные компоненты - это те, которые отвечают за представление данных, которые получают. 

Хорошая статья с примером здесь 

https://www.cronj.com/blog/difference-container-component-react-js/

5
Akash Bhandwalkar

Они оба компонента; контейнеры являются функциональными, поэтому они не визуализируют html самостоятельно, и тогда у вас также есть презентационные компоненты, где вы пишете фактический html. Назначение контейнера - сопоставить состояние и отправку реквизитам для презентационного компонента. 

Дальнейшее чтение: Ссылка

2
lysdexic

Компоненты создают часть представления, поэтому он должен отображать элементы DOM, отображая содержимое на экране.

Контейнеры участвуют в обработке данных, поэтому они должны «общаться» с избыточностью, потому что ей нужно будет изменить состояние. Таким образом, вы должны включить connect (response-redux), что он устанавливает соединение, и функции mapStateToProps и mapDispatchToProps

.
.
.
import { connect } from "react-redux";

class myContainer extends Component {
}

function mapStateToProps(state) {
  // You return what it will show up as props of myContainer
  return {
    property: this.state.property
  };
}

function mapDispatchToProps(dispatch) {
  // Whenever property is called, it should be passed to all reducers
  return bindActionCreators({ property: property }, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(myContainer);
2
J C

Реакт, Redux - это независимые библиотеки.

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

Redux - это фреймворк, который предписывает конкретную философию для хранения и управления данными в средах JS. Это один большой JS-объект с определенными определенными методами, лучший вариант использования имеет форму управления состоянием веб-приложения.

Поскольку React предписывает, чтобы все данные передавались от корня к листьям, становится утомительно включать все реквизиты, определять их в компонентах и ​​затем передавать реквизиты определенным реквизитам детям. Это также делает уязвимым все состояние приложения.

React Redux предлагает чистое решение, где он напрямую соединяет вас с хранилищем Redux, просто оборачивая подключенный компонент вокруг другого компонента React (вашего Container). Поскольку в вашей реализации, в вашей реализации вы уже определили, какая часть всего состояния приложения вам требуется. Таким образом, connect извлекает эти данные из хранилища и передает их в качестве реквизита компоненту, который оборачивается вокруг него.

Рассмотрим этот простой пример:

 class Person extends Component {
  constructor(props){
   this.name = this.props.name;
   this.type = this.props.type;
  }

  render() {
     return <p> My name is {this.name}. I am a doctor { this.type } </p>
  }
}

 const connect = InnerComponent => { 

   class A extends Component{
     render() {
        return <InnerComponent {...this.props} type="Doctor"/>
     }
   } 
   A.displayName = `Connect(${InnerComponent.displayName})`
   return A
 }

Функция connect передает реквизит type.

Таким образом, соединение действует как контейнер для компонента Person.

1
nirbhaygp

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

0
Neel Patel