반응 redux에서 구성 요소와 컨테이너의 차이점

반응 redux에서 구성 요소와 컨테이너의 차이점은 무엇입니까?

ComponentReact API의 일부입니다. 컴포넌트는 React UI의 일부를 설명하는 클래스 또는 함수입니다.

컨테이너 는 connectredux 저장소 에 사용되는 React 구성 요소에 대한 비공식 용어입니다 . 컨테이너는 Redux 상태 업데이트 및 dispatch작업을 수신 하며 일반적으로 DOM 요소를 렌더링하지 않습니다. 그들은 표현적인 자식 구성 요소에 렌더링을 위임 합니다.

자세한 내용 은 Dan Abramov의 프레젠테이션 및 컨테이너 구성 요소 를 참조하십시오.

데이터 가져 오기 및 표시를 담당하는 구성 요소를 스마트 또는 컨테이너 구성 요소라고합니다. 데이터는 redux, 모든 네트워크 호출 또는 타사 구독에서 올 수 있습니다.

벙어리 / 프레젠테이션 구성 요소는 수신 된 소품을 기반으로 뷰를 표시하는 역할을하는 구성 요소입니다.

예를 들어 좋은 기사

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

컴포넌트는 뷰의 구성 요소를 구성하므로 DOM 요소를 렌더링하고 컨텐츠를 화면에 배치해야합니다.

컨테이너는 데이터 정교화에 참여하므로 상태를 수정해야하므로 redux와 "토크"해야합니다. 따라서 연결 (react-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);

구성 요소

구성 요소를 사용하면 UI를 독립적 인 재사용 가능한 조각으로 분할하고 각 조각을 분리하여 생각할 수 있습니다. 그것들은 때때로 "프리젠 테이션 컴포넌트"라고 불리우며 주요 관심사는 사물 이 어떻게 보이는지입니다.

컨테이너

컨테이너는 UI가없는 구성 요소와 같으며 컨테이너는 작업 방식에 관심이 있습니다. . 주로 데이터를 가져오고 업데이트하기 위해 redux 스토어와 통신합니다.

Redux doc에서 테이블 비교 참조

자세한 설명 https://redux.js.org/basics/usage-with-react#presentational-and-container-components

둘 다 구성 요소입니다. 컨테이너는 기능적이므로 자체적으로 HTML을 렌더링하지 않으며 실제 HTML을 작성하는 프리젠 테이션 구성 요소도 있습니다. 컨테이너의 목적은 상태를 맵핑하고 프리젠 테이션 컴포넌트의 소품에 디스패치하는 것입니다.

더 읽을 거리 : 링크

Reux, Redux는 독립적 인 라이브러리입니다.

React는 HTML 문서를 작성하기위한 프레임 워크를 제공합니다. 구성 요소는 문서의 특정 부분을 나타내는 방식입니다. 그런 다음 구성 요소와 관련된 방법으로 문서의 특정 부분을 조작 할 수 있습니다.

Redux는 JS 환경에서 데이터를 저장하고 관리하기위한 특정 철학을 규정하는 프레임 워크입니다. 특정 메소드가 정의 된 하나의 큰 JS 객체이며 최상의 사용 사례는 웹 응용 프로그램의 상태 관리 형태입니다.

React는 모든 데이터가 루트에서 잎으로 내려가도록 규정하므로 모든 소품을 구성하고 구성 요소에 소품을 정의 한 다음 소품을 어린이에게 특정 소품으로 전달하는 것이 지루합니다. 또한 전체 응용 프로그램 상태를 취약하게 만듭니다.

React Redux는 연결된 구성 요소를 다른 React 구성 요소 (your Container)로 감싸서 간단히 Redux 저장소에 직접 연결하는 깨끗한 솔루션을 제공합니다 . 구현 환경에서 구현시 필요한 전체 응용 프로그램 상태를 정의했습니다. 따라서 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 구성 요소의 컨테이너 역할을합니다.

React에는 두 가지 주요 구성 요소가 있습니다. 먼저 스마트 구성 요소 (컨테이너)이고 두 번째 구성 요소는 dumb (presentation component)입니다. 컨테이너는 구성 요소와 매우 유사하지만 컨테이너가 응용 프로그램 상태를 인식한다는 점만 다릅니다. 웹 페이지의 일부가 데이터 (벙어리)를 표시하는 데만 사용되는 경우이를 구성 요소로 만듭니다. 똑똑하고 응용 프로그램의 상태가 변경 될 때마다 데이터를 알 필요가 있으면 컨테이너로 만드십시오.