react 组件两种声明方式疑问

Question

方式一：

import React from 'react';class GameView extends  React.Component{
}

export default GameView;

方式二：

import React from 'react';

const GameView = ({}) => {
}export default GameView;

第一种方式是es6的，我经常见，但是最近看别人代码，发现了第二种定义方式。
第二种导入了React库，却没使用，也定义成功了，怎么实现的？

非常感谢 @cheoyx @eyesofkids 详细解答，我突然发现，我基本没有看过React的文档，我来公司之后，学习React都是参考的公司前辈，大神们的源码。看源码确实学习的非常快，但是基础的东西却不清楚。之后，我会认真的看一下官方文档的。谢谢大家。

Answer 1

在React v15中，我们共有三种方式可以定义一个组件。大概是React的设计者们认为，多几种方式可以让不同需求的开发者增加来使用React的诱因，菜色不同但都可以吃好吃饱。另一方面也可以在不同情况下使用不同定义方式，各有一些好处，简单的效率好，复杂的弹性多。第一种是你说的ES6方式，因为它里面有超出ES6标准的语法，通常称为ES6+的类定义方式，是使用继承自React.Component类别的语法，这样式又可以称为建构式样式(constructor pattern)。因为现在可以直接执行ES6+相关语法与API的浏览器，通常会需要要新版本的浏览器，而且还不见得会100%相容。所以我们一般都会先经由babel工具帮忙先转成ES5语法再执行，这样在浏览器各种不同版本与品牌中，可以得到最大的相容程度。不过ES6+是一种未来将会普及的语法，也是时间早晚的问题而已。现在官方已经都换这种方式来写文件或教程了。第二种是ES5的语法，这是为了要能相容于只支援ES5的浏览器，所使用的一种方式。最早React的版本中只有这种方式，所以网上的范例有很多都是用这种语法，如果你连JSX语法也不使用的话，那么是完全可以不需要babel工具，就可以在各种支援ES5标准的浏览器中执行。这种样式又可以称之为工厂样式(factory pattern)。下面是例子代码:var&nbsp;HelloWorld&nbsp;=&nbsp;React.createClass({&nbsp;&nbsp;render:&nbsp;function()&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;<h1>{this.props.text}</h1> &nbsp;&nbsp;} });第三种是是函数(函式)定义样式，这只能在无状态的功能性元件(Stateless functional components)上使用，像我们上面的HelloWorld组件就是无状态的(stateless)，里面没有定义state值与相关生命周期的方法。纯粹是个显示用的简单元件，所以可以用这个语法。这个语法是在React 0.14版本才加入的，也是前不久的事情而已(2015.10)。通常这个样式还会使用ES6中的箭头函式语法，让程式码更简洁，不过它看起来不太像是个很厉害的组件，纯粹是个函数(式)而已:&nbsp;const&nbsp;HelloWorld&nbsp;=&nbsp;(props)&nbsp;=>&nbsp;(&nbsp;&nbsp;&nbsp;<h1>{props.text}</h1> &nbsp;)注: React的最近版本是从0.14直接大跳板号到15.0的。注: 箭头函式的后面使用括号(())是只有单个语句时使用的，会自动加上return在语句前。如果是多行语句要用花括号({})，而且要加上return的语句。函数(函式)定义方式有一些限制与规则，大致如下，太细可能要查文档:里面不能有state(状态)。里面不能用生命周期的方法，例如componentDidMount全部不行。propTypes屬性可以用，但要写在寫在函式區塊的"外面"有用到JSX语句还是要import(引入)React函式库，JSX语法相当于要调用React.createElement方法，所以需要。这个函式定义方式现在在redux中有变化应用方式出现，就是拿来再区分为容器组件(Container Components)与呈现组件(Presentational Components)，即是以函数型的组件解决方式，完全舍弃类(建构式样式)或工厂样式，是一种更简洁的体现。