Reactjs - オブジェクト指向？

Question

私はReactjを使用し始めており、オブジェクト指向（Java）のバックグラウンドから来ています。本当の継承と構成で真のオブジェクト指向の方法でReactを使用できるかどうか不思議でした。

使用例：開発者が再利用できるように、Reactコンポーネントをライブラリに作成しています。これをオブジェクト指向の方法で設計できますか？たとえば、いくつかの基本的なスタイル/ビヘイビアを持つ一般的な入力テキストフィールドを持つことができますか？また、Inputからプロパティとビヘイビアを活用できるInputを拡張する別のMyInputフィールドがありますか？

私がReactを学んだことのほとんどは、すべてを管理するために、アプリケーション自体の状態と減速材を使用しているようです。私にはOOデザインの力の欠点があるように思えます。しかし、多分私は間違っています。すべての情報が最も役に立ちます。

Answer 1

mixinsを作成して、コンポーネント間で機能を共有することは可能です。コンポーネントの継承力の緊密な結合は、長期的にはこれは難しい可能性があります。

私は は明らかにオブジェクト指向（しかし++などのJava、Cなどの言語とまったく似ていない、と他の多くのtradionalのオブジェクト指向言語 ）されたJavascriptを に基づいていますに反応することをあなたに伝えたいすべての

Answer 2

ファースト。

リアクション自体はオブジェクト指向のテクニックを強制しませんが、 リアクションコンポーネントは完全に再利用可能です。非常にシンプルな入力テキストボックス、ラベルから複雑なものまで汎用コンポーネントを作成でき、何度も再利用できます。

あなたはJAVA世界から来ているなら、私はやや似た方法でクラスの味を得るためにのJavascript ES6を使用するためにあなたをお勧めします。

サンプルは

class Text extends React.Component { 
    render() { 
    return <p>{this.props.children}</p>; 
    } 
} 

React.render(<Text>Hello World</Text>, document.body); 

JavascriptをES6でコンポーネントを反応させるの継承がここ

class Point { 
    constructor(x, y) { 
     this.x = x; 
     this.y = y; 
    } 
    toString() { 
     return '(' + this.x + ', ' + this.y + ')'; 
    } 
} 

class CPoint extends Point { 
    constructor(x, y, color) { 
     super(x, y); 
     this.color = color; 
    } 
    toString() { 
     return super.toString() + ' in ' + this.color; 
    } 
} 

あなたが見るすべてのコードを働いている方法を参照してくださいJavaScriptであります！

のためにあなたが表現的要素とコンテナコンポーネントより良い再利用性と構造のためを持っているようにアプリケーションを分割することができ反応します。

• 表現的コンポーネント： 小道具を介してデータを受信し、それらを表示するとともに、主に懸念。彼らは、データがどのようにロードされるか、または突然変異され、独自の状態を持たない方法を指定しません。

例

const Text = ({ children = 'Hello World!' }) => <p>{children}</p> 

• コンテナコンポーネント： は、プレゼンテーションまたは他の容器コンポーネントにデータと動作を渡します。彼らは独自の状態を持っています。ここでデータを生成し、それをプレゼンテーションコンポーネントに渡すことができます。

例

class Contacts extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
      message:"new message" 
    }; 
    } 
    render() { 
    return (
     <div><Text children={this.state.message}/></div> 
    ); 
    } 
} 

私は離れてミックスインからのご滞在をお勧めします。 ミックスはES6クラスではサポートされていません。