2017-10-09 9 views
2

私は非常に最近React & Reduxエコシステムに参加しました。 Reactが提供するコンポーネント(さらに多くのことを含む)とReduxの3つの原則の間のきれいな組織に感謝します。私は開発する最良の方法が何であるかを決めるのが難しいと思っています。オブジェクト指向または機能性?React/Reduxの開発はオブジェクト指向プログラミングかFunctional Programmingか?

React/Reduxの前は、以前はES6クラスを使用して開発していましたが、これはオブジェクト指向プログラミング、特に継承のためのきちんとした構文を提供します。以下のような簡単な構造の上に構築されたすべてのコンポーネントのクラス:Reduxのの導入後

export default class MyComponent extends React.Component { 
    constructor(){ 
     // initialise state here 
    } 

    componentWillMount(){ 
     // populate state here 
    } 

    componentDidMount(){ 
     // update UI/bind listeners here 
    } 

    render(){ 
     // output HTML here 
    } 
} 

は、私は上記の構造は、コンポーネントは、もはや自分自身の状態を維持しているので、私は後だんどのような状態ではなくなったことを感じるようになりました;代わりに状態はReduxストアから来て、connectメソッドとmapStateToPropsを使用して小道具として渡されます。不変データのコンセプトとともに、これはすべての関数がファーストクラスの関数である関数型プログラミングアプローチを支持するように思われました。上記のコンポーネントは、今のように見えるを開始します:

const MyComponent = ({ myPropA, onEvent }) => { 
    // output HTML here 
} 

const mapStateToProps = state => { 
    return { 
     myPropA: state.myPropA 
    } 
} 

const mapDispatchToProps = dispatch => { 
    return { 
     onEvent: data => dispatch({ 
      type: 'ACTION_NAME', 
      data 
     }); 
    } 
} 

connect(mapStateToProps, mapDispatchToProps)(MyComponent); 

関数型プログラミングのアプローチをより良いリアクト/ Reduxの組み合わせを好むようだ、しかし私は助けるが、いくつかの有用なOOPはを逃しされていることを感じることができません。 React/Reduxテクノロジスタックに関するベストプラクティスは何ですか?誰もが違うことをしているようです。しかし、推奨やベストプラクティスはありますか?コンテナ(スマート)はクラスコンポーネントである一方、プレゼンテーション(ダム)コンポーネントは機能コンポーネントであると言うのは賢明でしょうか?または、コンポーネントライフサイクルが必要なときはいつでもクラスでなければなりませんが、それ以外の場合は機能コンポーネントですか?

OOPとFPは広いトピックであることを認識しています。 React/Reduxの範囲内で、私は単一の正解があることを望んでいます。 :)

+1

にこれらの説明を見つけることができますか?これは実際には有効な質問です! AngularとRedux(後でngrx)を使って作業するとき、私はこれを自分自身に尋ねました。 – tftd

+0

本当にあなたのコンポーネントで何をしたいかによって異なります。現時点では、リアクションコンポーネントは必要に応じてより強力になる可能性があります(ライフサイクルイベントを利用できるように) – Icepickle

+0

意見に基づいていると私は同意しません。もちろん、開発者は両方をやっているかもしれませんが、正しいか悪いか、良いか良いかがあるはずです。開発者の選択の背後に理由がなければならない。 Javaのようなより伝統的なプログラミング言語では、1つのデザインパターンを別のデザインパターンに使用すべきかどうかについて議論することができます。 –

答えて

4

質問は、ステートレスまたはステートフルコンポーネントを使用する必要がありますか?

コンポーネントのプロパティのみが必要な場合は、ステートレスコンポーネントであり、関数型プログラミングを使用してプロパティを作成できます。より少ない行数のコードを提供し、読みやすく、テストが簡単です。

コンポーネントを内部で管理する必要がある場合は、ステートフルコンポーネントで、以前と同じようにES6クラスを使用してその動作を記述する必要があります。

多くのプロジェクトでは、プレゼンテーションとコンテナコンポーネントの間の矛盾を見ました。

プレゼンテーションコンポーネントは、propsからのデータのみをレンダリングするため、ステートレスコンポーネントであり、関数を使用して作成できます。これらのコンポーネントはreduxを認識していません。これらのコンポーネントをテストするのは簡単です。

コンテナコンポーネントは、状態を管理し、リフィックスを認識しており、アクションをディスパッチし、リフィックス状態に登録します。ステートフルコンポーネントであり、ES6クラスを使用して作成できます。

あなたはdownvoted、なぜredux documentation

関連する問題