web-dev-qa-db-ja.com

ステートフルとステートレスのReactJSの違い

Reactのステートフルコンポーネントとステートレスコンポーネントの正確な違いを理解しようとしています。ステートレスコンポーネントは何かをするだけですが、何も覚えていないのに対し、ステートフルコンポーネントは同じことをするかもしれませんが、this.state。それが理論です。

しかし、今、コードを使用してこれを表示する方法を確認すると、違いを作るのに少し苦労しています。次の2つの例は正しいですか？唯一の違いは、実際にgetInitialState関数の定義です。

ステートレスコンポーネントの例：

var React = require('react');

var Header = React.createClass({
    render: function() {
        return(
            <img src={'mypicture.png'} />
        );
    }
});

module.exports = Header;

ステートフルコンポーネントの例：

var React = require('react');

var Header = React.createClass({

    getInitialState: function() {
        return {
            someVariable: "I remember something"
        };
    },

    render: function() {
        return(
            <img src={'mypicture.png'} />
        );
    }
});

module.exports = Header;
reactjscomponentsstatelessstateful
31
Socrates

はい、それは違いのようなものです。 statefulコンポーネントを除き、change状態を使用できます。たとえば、this.setStateを使用します。

var React = require('react');

var Header = React.createClass({

    getInitialState: function() {
        return {
            imageSource: "mypicture.png"
        };
    },

    changeImage: function() {

        this.setState({imageSource: "differentpicture.png"});
    },

    render: function() {
        return(
            <img src={this.state.imageSource} onClick={this.changeImage.bind(this)} />
        );
    }
});

module.exports = Header;

そのため、上記の例では、changeImagemanagesコンポーネントの状態（すべての子/依存コンポーネントも再レンダリングされます）。

アプリケーションのどこかで、データをバインドするか、物事を覚える必要があります。ステートレスコンポーネントは馬鹿げており（それは良いことです）、記憶できず、UIの他の部分にコンテキストを与えることもできません。ステートフルコンポーネントは、必要なコンテキストglueを提供します。

一方、ステートレスコンポーネントはコンテキストを渡すだけです（通常はthis.propsを介して：

var React = require('react');

var Header = React.createClass({
    render: function() {
        return(
            <img src={this.props.imageSource} />
        );
    }
});

ReactDOM.render(<Header imageSource="myImage.png"/>, document.body);

上記の例では、renderの間に、imageSourceが属性として渡され、ステートレスコンポーネントthis.propsオブジェクトに追加されることがわかります。

34
Davin Tryon

機能コンポーネントまたはステートレスコンポーネント

  1. 機能コンポーネントは、JavaScriptの純粋な機能に似ています。
  2. 機能コンポーネントは、ステートレスコンポーネントとも呼ばれます。
  3. 機能コンポーネントは親コンポーネントからのみ小道具を受け取り、JSX要素を返します。
  4. 機能コンポーネントは、React=.

クラスコンポーネントまたはステートフルコンポーネント

  1. Reactクラスコンポーネントは、ステートフルコンポーネントとして呼び出されます。
  2. ステートフルコンポーネントは、Reactのすべてのライフサイクルメソッドで機能します。
  3. このコンポーネントは状態を変更します。

それが大きな違いです

JavaScriptの純粋な機能に関する知識がある場合は、機能コンポーネントまたはステートレスコンポーネントを簡単に理解できます。

6
Hemadri Dasari

簡単な定義では、次のように説明できます。

コンポーネントの動作がコンポーネントの状態に依存している場合、そのコンポーネントはステートフルコンポーネントと呼ばれ、動作がその状態に依存しない場合は、ステートレスコンポーネントになります。

何かが「ステートフル」である場合、アプリ/コンポーネントの状態に関する情報をメモリに保存する中心点です。何かが「ステートレス」の場合、内部状態を計算しますが、直接変更することはありません。

ステートレスコンポーネントは、ダムコンポーネントと呼ばれることもあります

ステートフルコンポーネントに対するステートレスの主な利点は、スケーラビリティと再利用性です。

これで、@ Davin Tryon Answerのサンプルコンポーネントを確認できます。

4
Samuel J Mathew