ReactJSのエクスポート（デフォルト）クラス

debugcn 投稿 Dev

チーズパフ：

コンポーネントを作成している場合は、さまざまな方法でクラスを作成できるようです。これらの違いは何ですか？どれを使用すればよいですか？

import React, {Component} from 'react'

export default class Header extends Component {

}

export const Header = React.createClass({

})

export default React.createClass({

})

私はそれらが異なることをしていると仮定していますか、それとも単に異なる構文ですか？

誰かが私に簡単な説明やリンクを提供してくれれば、本当にありがたいです。私は違いが何であるかを正確に知らない新しいフレームワークから始めたくありません。

ニックボール：

こんにちは、Reactへようこそ！

ここで問題になっているのはReact固有のものではなく、新しいES2015モジュールの構文に関連していると思います。Reactクラスコンポーネントを作成する場合、ほとんどの目的と目的でReact.createClass、機能的にと同等と考えることができますclass MyComponent extends React.Component。1つは新しいES2015クラス構文を使用しているだけで、もう1つはES2015以前の構文を使用しています。

モジュールについて学ぶには、新しいモジュールの構文に関するいくつかの記事を読んで、モジュールに慣れることをお勧めします。まず、http：//www.2ality.com/2014/09/es6-modules-final.htmlから始めてください。

つまり、これらは構文の違いにすぎませんが、簡単なウォークスルーを試みます。

/**
 * This is how you import stuff.  In this case you're actually 
 * importing two things:  React itself and just the "Component" 
 * part from React.  Importing the "Component" part by itself makes it
 * so that you can do something like:
 *
 * class MyComponent extends Component ...
 * 
 * instead of...
 * 
 * class MyComponent extends React.Component
 * 
 * Also note the comma below
 */
import React, {Component} from 'react';


/**
 * This is a "default" export.  That means when you import 
 * this module you can do so without needing a specific module
 * name or brackets, e.g.
 * 
 * import Header from './header';
 *
 * instead of...
 *
 * import { Header } from './header';
 */
export default class Header extends Component {

}

/**
 * This is a named export.  That means you must explicitly
 * import "Header" when importing this module, e.g.
 *
 * import { Header } from './header';
 *
 * instead of...
 * 
 * import Header from './header';
 */
export const Header = React.createClass({

})

/**
 * This is another "default" export, only just with a 
 * little more shorthand syntax.  It'd be functionally 
 * equivalent to doing:
 *
 * const MyClass = React.createClass({ ... });
 * export default MyClass;
 */
export default React.createClass({

})

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]