如果要创建组件,似乎可以用很多不同的方式创建类。这些有什么区别?我怎么知道要使用哪个?
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。一种只是使用新的ES2015类语法,而另一种则使用ES2015之前的语法。
React.createClass
class MyComponent extends React.Component
为了学习模块,我建议阅读一些有关新模块语法的文章以使其熟悉。这是一个很好的开始: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({ })