리액션 리덕스 내 성분과 용기의 차이

리액션 리덕스 내 성분과 용기의 차이

리액트 리덕스의 구성 요소와 용기의 차이점은 무엇입니까?

Component입니다.구성 요소는 React UI의 일부를 설명하는 클래스 또는 함수입니다.

컨테이너는 React 컴포넌트의 비공식 용어입니다.connect 레독스 스토어. - 레독스 스토어.는 Redux 및 Redux 상태를 합니다.dispatch동작은 일반적으로 DOM 요소를 렌더링하지 않고 프레젠테이션 하위 구성요소에 렌더링을 위임합니다.

자세한 내용은 Dan Abramov의 프레젠테이션 컴포넌트와 컨테이너 컴포넌트를 참조하십시오.

구성 요소들

컴포넌트를 사용하면 UI를 재사용 가능한 독립된 조각으로 분할하고 각 조각을 분리하여 생각할 수 있습니다.그것들은 때때로 "프레젠테이션 컴포넌트"라고 불리며, 주요 관심사는 사물의 외관입니다.

컨테이너

컨테이너는 UI가 없는 컴포넌트와 같으며 컨테이너는 동작방식에 관심이 있습니다.주로 데이터를 가져오고 업데이트하기 위해 리덕스 스토어와 대화합니다.

Redux 문서에서 표 비교 보기

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

데이터 가져오기 및 표시를 담당하는 구성 요소를 스마트 또는 용기 구성 요소라고 합니다.데이터는 redux, 임의의 네트워크 콜 또는 서드파티 서브스크립션에서 얻을 수 있습니다.

덤/프레젠테이션 컴포넌트는 받은 소품을 바탕으로 뷰를 표시하는 컴포넌트입니다.

여기에 예가 있는 좋은 기사

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

리액트는 스마트 컴포넌트(컨테이너)와 덤(프레젠테이션 컴포넌트) 두 가지 주요 컴포넌트로 구성됩니다.컨테이너는 구성요소와 매우 유사하며, 유일한 차이점은 컨테이너가 애플리케이션 상태를 인식한다는 것입니다.웹 페이지의 일부가 데이터(덤프) 표시에만 사용되는 경우 해당 웹 페이지를 구성 요소로 만드십시오.데이터가 변경될 때마다 응용프로그램의 상태를 파악하고 스마트해야 하는 경우 데이터를 컨테이너로 만드십시오.

컴포넌트는 뷰의 piace를 구성하므로 DOM 요소를 렌더링하고 내용을 화면에 표시해야 합니다.

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

둘 다 컴포넌트입니다.컨테이너는 기능하기 때문에 자체 html을 렌더링하지 않습니다.또한 프레젠테이션 컴포넌트도 있습니다.이 컴포넌트에서는 실제 html을 작성합니다.컨테이너의 목적은 상태를 매핑하고 프레젠테이션 컴포넌트의 소품으로 디스패치하는 것입니다.

상세정보: 링크

React, Redx는 독립된 라이브러리입니다.

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

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

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.

이렇게 하면 연결이 개인 구성 요소의 컨테이너 역할을 합니다.

언급URL : https://stackoverflow.com/questions/43414254/difference-between-component-and-container-in-react-redux