web-dev-qa-db-ja.com

React.jsにcomponentWillMountのような機能を持たせる目的は何ですか？

最近、React.jsでコンポーネントを作成しています。 componentWillMountやcomponentDidMountなどのメソッドを使用する必要がありませんでした。

renderは必須です。 getInitialStateや私が書いた他のヘルパーメソッドも役に立ちます。ただし、前述の2つのライフサイクルメソッドではありません。

私の現在の推測は、それらがデバッグに使用されていることですか？それらの中でconsole.logを実行できます。

componentWillMount: function() {
  console.log('component currently mounting');
},

componentDidMount: function() {
  console.log('component has mounted');
}

他に用途はありますか？

javascriptuser-interfacereactjsfrontendreact-jsx
23
Adi Sivasankaran

componentDidMountは、React以外のJavaScriptプラグインを使用する場合に便利です。たとえば、Reactには適切な日付ピッカーがありません。 Pickaday は美しく、箱から出しただけで簡単に機能します。そのため、私のDateRangeInputコンポーネントは、開始日と終了日の入力にPickadayを使用しており、次のように接続しています。

  componentDidMount: function() {
    new Pikaday({
      field: React.findDOMNode(this.refs.start),
      format: 'MM/DD/YYYY',
      onSelect: this.onChangeStart
    });

    new Pikaday({
      field: React.findDOMNode(this.refs.end),
      format: 'MM/DD/YYYY',
      onSelect: this.onChangeEnd
    });
  },

Pikadayがそれに接続するには、DOMをレンダリングする必要があります。componentDidMountフックを使用すると、その正確なイベントにフックできます。

componentWillMountは、コンポーネントがマウントされる直前にプログラムで何かを実行したい場合に役立ちます。私が取り組んでいる1つのコードベースの例は、他の方法ではいくつかの異なるメニューコンポーネントに複製されるコードの束を持つミックスインです。 componentWillMountは、1つの特定の共有属性の状態を設定するために使用されます。 componentWillMountを使用できる別の方法は、prop（s）によって分岐するコンポーネントの動作を設定することです。

  componentWillMount() {
    let mode;
    if (this.props.age > 70) {
      mode = 'old';
    } else if (this.props.age < 18) {
      mode = 'young';
    } else {
      mode = 'middle';
    }
    this.setState({ mode });
  }
25
Cymen

componentDidMountは、クライアント側で1回だけ実行されます。これは、特に同形アプリ（クライアントとサーバーの両方で実行される）を作成している場合に重要です。 componentDidMountを使用して、ウィンドウまたはDOMへのアクセスが必要なタスクを実行できます。

FacebookのReactページから

If you want to integrate with other JavaScript frameworks, set timers using setTimeout or setInterval, or send AJAX requests, perform those operations in this method.

componentWillMountの使用例は少ないですが（実際には使用しません）、クライアント側とサーバー側の両方で実行されるという点が異なります。イベントリスナーやDOM操作をここに配置したくないのは、理由もなくサーバー上で実行しようとするためです。

4
Jon

ダッシュボードツールである私のプロジェクトでは、componentDidMount（）を使用しました。

ホームページでは、以前に保存されたダッシュボードがサイドバーに表示されます。ページがレンダリングされた後にダッシュボードのリストを非同期に取得するために、コンポーネントレンダリングのホームページのcomponentDidMount（）内でajax呼び出しを行います。

0
Shubham Séthi

これは、componentWillMountを使用する同形Webアプリケーションの例です： https://github.com/coodoo/react-redux-isomorphic-example

ただし、サーバー側で理由なしにcomponentWillMount内のコードを実行することは99％確実です（クライアント側でのみ実行されるようにするためにcomponentDidMountを使用すると、フェッチの約束が確実に行われるようにするため、ページをレンダリングする前に、個々のコンポーネント内ではなくserver.js内で実行されます。

ここでコンポーネントごとの非同期フェッチについての議論があります： https://github.com/facebook/react/issues/1739 私が知る限り、少なくとも同型に関する限り、componentWillMountの適切な使用例はありません。

0
dpwrussell