원문: Container Components

Container Components

React 모드에서 내 코드에 가장 깊은 영향을 미치는 모드 중 하나는container component 모드입니다.
React에서.js Conf에서 Jason Bonta는 페이스북에서 고성능 구성 요소 (High Performance Components) 를 어떻게 만드는지 이야기했다.Nestled가 이 강연에서 말한 것은 this gem about container components이다.
이 개념은 매우 간단하다.
하나의container는 데이터 인출을 한 다음 코리스폰딩 서브 구성 요소를 렌더링합니다.그렇습니다.
"Corresponding"은 같은 이름의 구성 요소를 공유하는 것을 의미합니다. 예를 들어 다음과 같습니다.

StockWidgetContainer => StockWidget
TagCloudContainer => TagCloud
PartyPooperListContainer => PartyPooperList

이것이 바로 그중의 개념이다.

Why containers?

예를 들어 평론을 보여주는 구성 요소가 있습니다.컨테이너 구성 요소에 대해 잘 모릅니다.그래서 너는 모든 물건을 한 곳에 놓을 것이다.

//  CommentList.js

class CommentList extends React.Component {
    constructor(){
        super();
        this.state = { comments: []}
    }

    componentDidMount(){
        $.ajax({
            url: "/my-comments.json",
            dataType: 'json',
            success: function(comments){
                this.setState({comments});
            }.bind(this)
        });
    }

    render(){
        return <ul> {this.state.comments.map(renderComponent)} </ul>;
    }

    renderComponent({body, author}){
        return <li> {body}-{author} </li>;
    }
}

당신의 구성 요소는 데이터를 끌어와서 보여주는 데 사용됩니다.이것은 결코 무슨 잘못이 아니지만, 너는 오히려 약간의 React의 장점을 놓쳤다.

재활용성

CommentList 구성 요소는 동일한 정확한 조건에서만 재사용할 수 있습니다.

데이터 구조

당신이 원하는 구성 요소는 그들이 필요로 하는 데이터 형식에 대한 예상을 정해야 합니다.PropTypes가 바로 이 일을 하고 있습니다.
우리의 구성 요소는 데이터 구조에 대한 요구가 매우 높지만 이러한 요구를 말할 방법이 없다.만약 json의 인터페이스 데이터가 바뀌었다면, 이 구성 요소는 아무런 알림도 하지 않을 것입니다.(사실 말하고 싶은 것은 PropTypes를 잘 활용하여 데이터 구조를 정확하게 제어할 수 없다는 것이다)

한번 더.이번에 컨테이너 추가.

우선, 데이터 인출 기능을container 구성 요소로 옮깁니다.

// CommentListContainer.js

class CommentListContainer extends React.Component{
    constructor(){
        super();
        this.state = { comments: [] }
    }

    componentDidMount() {
    $.ajax({
      url: "/my-comments.json",
      dataType: 'json',
      success: function(comments) {
        this.setState({comments: comments});
      }.bind(this)
    });
  }

  render() {
    return <CommentList comments={this.state.comments} />;
  }
}

이제 Comments를 CommentList의 prop으로 다시 만듭니다.

// CommentList.js

class CommentList extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        return <ul> {this.props.comments.map(renderComment)} </ul>;
    }
    renderComment({body, author}) {
        return <li>{body}—{author}</li>;
    }
}

마지막으로 우리는 무엇을 얻었습니까?

저희가 실제로 많이 얻었는데...
우리는 우리의 데이터 추출과 과장에 대한 관심사를 나누었다.
CommentList 구성 요소를 재사용할 수 있게 되었습니다.
CommentList가 PropTypes를 사용할 수 있도록 하고 오류가 발생하면 알림을 보낼 수 있습니다.
나는 컨테이너 components의 큰 팬이다.그들은 나의 React game를 많이 진보시켰고, 나의 구성 요소를 더욱 쉽게 읽을 수 있게 했다.그들을 시험해 보고 제이슨의 강연을 보세요.너무 좋아요!
Carry on, nerds.