react.js语法问题

Question

在学习react和react-redux时，遇到了两种写法，看官网文档，并不是很明白：
在官网文档里有写到：

Stateless function components
In idiomatic React code, most of the components you write will be stateless, simply composing other components. We’re introducing a new, simpler syntax for these components where you can take props as an argument and return the element you want to render:

// Using an ES2015 (ES6) arrow function:
var Aquarium = (props) => {
  var fish = getFish(props.species);
  return <Tank>{fish}</Tank>;
};

// Or with destructuring and an implicit return, simply:
var Aquarium = ({species}) => (
  <Tank>
    {getFish(species)}
  </Tank>
);

// Then use: <Aquarium species="rainbowfish" />

翻译下来大致说的是无状态组件是为了合并其他组件，通过传递props属性返回一个新元素，不是很明了和普通的render函数有什么区别，两者能够共同跑起来啊，有何异同之处？

class App extends Component {
    render() {
        return (
            <div>
                <h1>123123</h1>
            </div>
        )
    }
}

Answer 1

如果组件没状态和用到生命周期的方法的话就用 function 的写法，会有更好的性能。

这里 https://facebook.github.io/re... 讲的挺明白的。

Answer 2

两者是一样的，前面是定义变量赋值，而后面是使用了ES6中class的写法，功能一样，但是遇到生命周期函数写入感觉第二种好使，建议一个项目写法统一，我通常用class写法

Answer 3

一般共用组件我都会写成一个匿名函数，因为共用组件只负责接收props，不负责处理state，但是各自特有的组件我就写成一个class