React.jsでthis.propsとpropsを使用する違いは何ですか？

Question

私はthis.propsとpropsを同じ意味で使用していましたが、ほとんどの場合、それらの間に大きな違いはありません（私が知る限り）。

しかし、私は最近、問題にぶち当たっています。これは、いつ、そして、なぜ、他の問題よりも使用されていると思います。

私は現在、同義的にそれらを使用している場所です：

constructor(props, context) { 
    super(props, context); 
    this.data = props.card.data; 
    this.dataLength = this.props.card.data.length; 
    } 

違いとしたときに、他の上の1つを使用して、どこかは何ですか？ ありがとう！

Answer 1

すべては、使用しているコンポーネントのタイプによって異なります。ここで

const StatelessComponent = (props) => { 
    return <div>{props.something}</div>; 
} 

class SomeComponent extends Component { 
    constructor(props){ 
     super(props) 
    } 
    render() { 
     return <div>{this.props.something}</div>; 
    } 
} 

あなたはステートレスなコンポーネントで、それがどのthisコンテキストのない普通の関数であることがわかります。小道具は関数に渡されるので、すでにそれにアクセスできます。
クラスをお持ちの場合、小道具が住んでいる文脈はthisです。
クラスのコンストラクタでは、propsがクラスコンストラクタに渡されます。だから、コンストラクタ関数の小道具のコンテキストで引数として渡され、ローカル変数

です私はあなたがあなたがpropsを使用する関数への引数として渡された小道具を持っているときに、パターンに固執推薦しますあなたが使用する反応クラスの他のメソッドにありますthis.props。それがどのように使用されるのかということです。一貫性のために言わなければならないことがあります。つまり、そのパターンでどちらか一方を選ぶかどうかです。あなたがパターンに従わない/物事を一貫性を保たないと混乱することがあります。

Answer 2

React ES2015コンポーネント（非ステートレスファンクションコンポーネント）のconstructorでは、コンストラクタに渡されるときにpropsを参照することができます。 constructorにthis.props === propsを入力すると、trueと評価されます。

super(props)に電話した後は、Reactではthis.propsしか使用できません。これはES2015 Class specの一部です。

簡単にするために、私は通常ちょうどコンポーネントのライフサイクルメソッド内およびrenderにのみconstructor内props、およびthis.propsを使用しています。