React：単純なロジックをContainerまたはPresentationコンポーネントに入れるには？

Question

私は出力のためにオブジェクトの配列をプレゼンテーションコンポーネントに渡すコンテナコンポーネントを持っています。

プレゼンテーションコンポーネントでは、特定の基準を満たすこれらのオブジェクトの数を表示する必要があります。コンテナコンポーネントでカウントを実行し、それをプレゼンテーションコンポーネントに渡すのがベストプラクティスか、プレゼンテーションコンポーネントでこのカウントを実行することは問題ありません。

すなわち：

export class ResultsPage extends React.Component { 

    constructor(props){ 
    super(props); 
    } 

    countSexyObjects(){ 
    const matching = this.props.allObjects.filter((obj)=>{ 
     return obj.sexy === true; 
    }); 

    return matching.length 
    } 

    render(){ 
    return (
     <PresentationalComponent allObjects={this.props.allObjects} 
            numberOfSexyObjects={this.countSexyObjects()} /> 
    ); 
    } 
} 


let PresentationalComponent = (props) => { 

    return (
    <div> 
     There are {props.numberOfSexyObjects} sexy objects 
    </div> 
); 
}; 

OR

export class ResultsPage extends React.Component { 

    constructor(props){ 
    super(props); 
    } 

    render(){ 
    return (
     <PresentationalComponent allObjects={this.props.allObjects} /> 
    ); 
    } 
} 


let PresentationalComponent = (props) => { 

    const countSexyObjects =() => { 
    const matching = this.props.allObjects.filter((obj)=>{ 
      return obj.sexy === true; 
     }); 

    return matching.length 
    }; 

    return (
    <div> 
     There are {countSexyObjects()} sexy objects 
    </div> 
); 
}; 

Answer 1

理想的状態が反応における悪と考えられています。 Reactは州の概念に基づいて構築されていますが、より少ない州がより好ましいと理解しています。つまり、純粋に純粋な関数でコードを構造化しようとします。

あなたの最初の例のIMHOはより正確です。 ResultsPageはコンテナコンポーネント（スマートコンポーネント）であり、もう一方はダムです。ダムコンポーネントは状態を管理せず、UIの見た目だけを処理します。すべてのHTML、ブートストラップロジックをそこに置くことができます。あなたはXHR呼び出しから一致基準を取得したい、今言うことができますので、

このパターンは良好である理由である、第2のケースで、あなたのコードは、次の2つを変更しなければならなかったか

export class ResultsPage extends React.Component { 

    constructor(props){ 
    super(props); 
    } 

    getSexyMatcher() { 
    /* make ajax call here */ 
    return results; 
    } 

    render(){ 
    return (
     <PresentationalComponent allObjects={this.props.allObjects} sexyMatcher={getSexyMatcher()}/> 
    ); 
    } 
} 


let PresentationalComponent = (props) => { 

    const countSexyObjects =() => { 
    const matching = this.props.allObjects.filter((obj)=>{ 
      return obj.sexy.match(props.sexyMatcher) 
      // return obj.sexy === true; 
     }); 

    return matching.length 
    }; 

    return (
    <div> 
     There are {countSexyObjects()} sexy objects 
    </div> 
); 
}; 

お知らせになります同じビジネスロジックのコンポーネント？他の誰かがコードベースの別の場所でそのコードを使用した場合はどうでしょうか？ 最初のケースでは、物事ははるかに簡単です。スマートコンポーネントにajax関数を追加し、その結果をUIコンポーネントに渡すだけです。

Answer 2

私はいくつかの理由のための最初の形式を使用します。

• スマートコンポーネント」何Aの良いアイデアべきセクシー・オブジェクト "です。それがオブジェクトのフィールドであれば、それはかなりシンプルで、いずれかの方法で議論することができます。それがセクシーであるかどうかを判断するためにWebサービスやより複雑なロジックに依存している場合、プレゼンテーション層では決してそれを望みません。シンプルに複雑になる方法があるので、最初は複雑さをサポートする構造を使用します。

• コードのテストは、スマートコンポーネントのロジックで簡単になります。コンポーネントを準備し、固定データセットから出力変数をチェックすることができます。

• コンポーネントで「SexyObject」の条件を変更できる場合は、選択ロジックを分離したままにしておくと、プレゼンテーションコンポーネントを再利用することができます。

はちょうど私の$、0.02