web-dev-qa-db-ja.com

Reactjs-オブジェクト指向？

私はReactjsを使い始めており、OO（Java）のバックグラウンドから来たとき、真のオブジェクト指向の方法でReact継承と構成。

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

私が学んだことのほとんどは、Reactはアプリケーション自体内で状態とリデューサーを使用してすべてを管理しているように見えますが、私にはOO design。しかし、私は間違っているかもしれません。

javascriptoopreactjs
21
jbambrough

まず、ReactはJavascriptに基づいていることを伝えたいと思いますが、これは明らかにオブジェクト指向です（ただし、Java、C++、およびその他の多くの言語とまったく同じではありません）従来のオブジェクト指向言語）。

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

Java worldから来ている場合は、Javascript es6を使用して、クラスを少し似た方法で味わうことをお勧めします。

サンプルReact Javascript es6のコンポーネント

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

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

ここでinheritanceがどのように機能するかをご覧ください

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です！

Reactでは、アプリケーションを分割して、プレゼンテーションコンポーネントとコンテナコンポーネントを使用して、再利用性と構造化を改善できます。

  • プレゼンテーションコンポーネント：主に、小道具を介したデータの受信と表示に関係します。データの読み込み方法や変更方法を指定せず、独自の状態もありません。

例

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>
    );
  }
}

Mixinsに近づかないことをお勧めします。 ミキシンはES6クラスではサポートされていません。

16
WitVault

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

3
Raulucco