web-dev-qa-db-ja.com

REACTでコンストラクターを使用するのが適切なのはいつですか？

OOP C++のような言語でのコンストラクタの概念を理解しています。しかし、REACTでコンストラクタをいつ使用するかは完全にはわかりません。JavaScriptはオブジェクト指向であることはわかりますが、わかりませんコンストラクタが実際に「構築」しているもの。

子コンポーネントをレンダリングするとき、子コンポーネントにコンストラクタが必要ですか？例えば：

class App extends React.Component {
   constructor(props) {
      super(props);
      this.state = {
         items: [],
         error: null
      }
    }
    render () {
       return (
          <React.Fragment>
             <ChildComponent data={this.state.items}></ChildComponent>
          </React.Fragment>
       )
    }
}

簡潔にするために、この例は短くしておきます。しかし、なぜコンストラクタが必要なのでしょうか。そして、小道具の子コンポーネントにコンストラクタが必要ですか？

ES6の知識が足りない可能性があります。

javascriptreactjsreact-nativeconstructores6-class
7
WebDream

状態を初期化せず、メソッドをバインドしない場合、Reactコンポーネントのコンストラクタを実装する必要はありません。

Reactコンポーネントのコンストラクタは、それがマウントされる前に呼び出されます。React.Componentサブクラスのコンストラクタを実装する場合、他のステートメントの前にsuper（props）を呼び出す必要があります。それ以外の場合、this.propsコンストラクタで定義されないため、バグが発生する可能性があります。

通常、Reactコンストラクタでは、2つの目的でのみ使用されます。

  • This.stateにオブジェクトを割り当ててローカル状態を初期化します。
  • イベントハンドラーメソッドをインスタンスにバインドします。

https://reactjs.org/docs/react-component.html#constructor

1
null

あなたの例のリンケは、状態を初期化したり、イベントリスナー関数をバインドしたりする必要があるときに便利なコンストラクタです

  1. _<element onClick={this.handler} />_
  2. コンストラクタ内のthis.handler = this.bind.handler(this);
0
Aldo Maria Landini