2016-10-02 9 views
12

私はdocsから反応することを学んでいますが、この例ではsuper()が何をしているかわかりません。通常、新しいインスタンスの作成に渡された引数を受け取りませんし、React.Componentのコンストラクタメソッドを呼び出して、これらの引数をインスタンスに組み込みますか?それは何の引数なしで何をしますか? ES6でsuper()は引数と何をするのですか?

class LikeButton extends React.Component { 
    constructor() { 
    super(); 
    this.state = { 
     liked: false 
    }; 
    this.handleClick = this.handleClick.bind(this); 
    } 
    handleClick() { 
    this.setState({liked: !this.state.liked}); 
    } 
    render() { 
    const text = this.state.liked ? 'liked' : 'haven\'t liked'; 
    return (
     <div onClick={this.handleClick}> 
     You {text} this. Click to toggle. 
     </div> 
    ); 
    } 
} 

ReactDOM.render(
    <LikeButton />, 
    document.getElementById('example') 
); 
+1

super()は、ほとんどのクラスベースの言語では、親のコンストラクタを呼び出します。したがって、React.Componentのコンストラクタが呼び出されます。 – Keith

+0

スーパーコンストラクタには、ゼロ引数が意味を持つようにするデフォルトの引数(暗黙的またはその他)がありますか?これは、ソースコードを見ることで解決できるようです。 – Carcigenicate

+0

React.Componentコンストラクタは1つの引数をとりますhttps://facebook.github.io/react/docs/reusable-components.html#es6-classes – Dionys

答えて

22

、派生クラスは、コンストラクタを持っている場合super()を呼び出す必要があります。 reactでは、すべてのコンポーネントはComponentクラスから拡張されています。

実際にすべてのES6 /反応クラスに対してコンストラクタは必要ありません。カスタムコンストラクタが定義されていない場合は、default constructorが使用されます。

constructor() {} 

と派生クラスのために、デフォルトコンストラクタは次のとおりです:基底クラスの場合、それは

constructor(...args) { 
    super(...args); 
} 

super()が呼び出されるまでthisが初期化されていないので、あなたはまた、thisにアクセスする前にsuper()を呼び出す必要があります。

リアクションにカスタムコンストラクタを使用する理由はいくつかあります。 1つは、getInitialStateライフサイクルメソッドを使用する代わりに、this.state = ...を使用してコンストラクタ内の初期状態を設定できることです。

コンストラクタ内のクラスメソッドをthis.someClassMethod = this.someClassMethod.bind(this)でバインドすることもできます。実際にはコンストラクタでメソッドをバインドする方が良いのは、一度だけ作成されるからです。それ以外の場合はbindを呼び出したり、矢印関数を使用してコンストラクタの外側にあるメソッドをバインドすると(renderメソッドのように)、実際にはすべてのレンダリングで関数の新しいインスタンスが作成されます。その詳細についてはhereをご覧ください。

あなたは、コンストラクタでthis.propsを使用する場合は、引数として小道具でsuperを呼び出す必要があります:

constructor(props) { 
    super(props); 
    this.state = {count: props.initialCount}; 
} 

そうしないと、this.propsがコンストラクタで定義されていません。ただし、コンストラクタ内で何も実行する必要はなく、コンストラクタの外にあるクラス内の他の場所では、this.propsにアクセスできます。

関連する問題