2016-03-29 13 views
4

Reactコンポーネントを作成するためのes6構文はexport default class ExampleComponent extends React.Componentです。ただし、がない場合はまだ動作しますが、import React from 'react'の条件にはextends React.Componentがありません。なぜこのようなことが起こるのですかReact.Componentを拡張しない

+0

前者はライフサイクルメソッド(例: 'componentDidMount')にアクセスできますが、後者はアクセスできません。これは静的なコンポーネントです。 – lux

+1

@lux後者は 'render'へのアクセス権を持っています。これはhttps://github.com/gaearon/flux-react-router-example – Guigui

+0

をチェックし、ドキュメンテーション:https:// facebookによる 'render()'のみです。 github.io/react/blog/2015/10/07/react-v0.14.html#stateless-functional-components - > '"これらのコンポーネントは、レンダリングメソッドのみが定義されたReactクラスのように動作します " – lux

答えて

3

React.Componentを拡張することなく、JSクラスを作成しているだけです。さらに:

  • それは(あなたがReact.createClass()またはES6クラスとしてのいずれかで作成することができます)リアクトクラスの要件を満たしているので、それはよまだ「仕事」、
  • しかしあなたはしませんlifeCyleメソッドを取得するか、状態にアクセスしてください(私がこれについて間違っている場合は誰かが私を修正してください、ちょうどクラスBCではバッキングインスタンスが添付されていないと確信しています)。
  • これらの「より単純な」コンポーネントは、何かをレンダリングする単なる(うまくいけば)純粋な関数なので、Reactにとっては一般的に処理が速く、必要な機械も少なくて済みやすい
  • ここで重要な違いは、レンダリングメソッドを持つクラスでは、「必要な」ものではないことです。これは十分にあるべきであるほとんどの時間の;あなたはすべてstateにアクセスする必要はありません

希望に役立ちます!

+0

このトピック: https://facebook.github.io/react/docs/state-and-lifecycle.html私は@markthethomasに同意します。ドキュメントから: "...クラスとして定義されたコンポーネントにはいくつかの追加機能があります。ローカル状態はまさにそれです:クラスだけが利用できる機能です。"ドキュメントではライフサイクルフックについて明示的に述べていませんが、それは明らかです。 –

0

「純粋な」JavaScript classを作成していますが、一度それが伸びていなければ、React.Componentは特定のリアクションの動作にアクセスできなくなります。チェックhow extends work

+0

これをチェックするhttps://github.com/gaearon/flux-react -router-example、多くのReactコンポーネントはReact.Componentを拡張していませんが、まだ正常に動作しています – Guigui

+0

これはこの推奨されていないライブラリのためです:https://github.com/gaearon/react-pure-render –

関連する問題