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

Question

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; 

Answer 1

はい、その差の一種です。

だから、

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; 

を、上記の例では、changeImageも原因となる部品（の状態を管理する：あなたはたとえばthis.setStateを使用しても変更状態を、することができますステートフル部品を除いて再レンダリングされるすべての子/依存コンポーネント）。

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

、ステートレスコンポーネントは、ちょうど通常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オブジェクトに添加した。成分の挙動は、STに依存している場合、それは

として説明することができる単純な定義で

Answer 2

そのコンポーネントの状態をステートフルコンポーネントと呼び、その動作がそのステートから独立している場合は、ステートレスコンポーネントにすることができます。

"ステートフル"なものは、アプリケーション/コンポーネントの状態に関する情報をメモリに保存する中心点です。 何かが「ステートレス」であるとき、内部状態を計算しますが、決してそれを直接変更しません。

ステートレスコンポーネントは、時にはダム成分として

と呼ばれるステートフルコンポーネント上ステートレス主な利点は、スケーラビリティと再利用です。