React 具有无状态功能的Hello World
示例
无状态组件正从函数式编程中获取其原理。这意味着：一个函数总是在相同的事物上完全返回给它的东西。
例如：
const statelessSum = (a, b) => a + b; let a = 0; const statefulSum = () => a++;
从上面的示例可以看出，给定a和b，statelessSum始终将返回相同的值。但是，即使没有参数，statefulSum函数也不会返回相同的值。这种功能的行为也称为副作用。因为，该组件影响的范围超出了其他范围。
因此，建议更频繁地使用无状态组件，因为它们是无副作用的，并且总是会产生相同的行为。那就是您想要在应用程序中追求的，因为波动状态是可维护程序的最坏情况。
最基本的反应组件类型是无状态组件。React组件是其道具的纯函数，不需要任何内部状态管理，可以将其编写为简单的JavaScript函数。据说这是StatelessFunctionalComponents因为它们仅是的功能props，而没有任何state可追踪的。
这是一个简单的示例来说明a的概念StatelessFunctionalComponent：
//在HTML中
<div id="element"></div>
//在React中
const MyComponent = props => {
return <h1>Hello, {props.name}!</h1>;
};
ReactDOM.render(<MyComponent name="Arun" />, element);
// Will render <h1>Hello, Arun!</h1>请注意，此组件所做的全部工作就是渲染h1包含nameprop的元素。该组件不跟踪任何状态。这也是一个ES6示例：
import React from 'react'
const HelloWorld = props => (
<h1>Hello, {props.name}!</h1>
)
HelloWorld.propTypes = {
name: React.PropTypes.string.isRequired
}
export default HelloWorld由于这些组件不需要后台实例来管理状态，因此React具有更多的优化空间。该实现是干净的，但是到目前为止，尚未实现针对无状态组件的此类优化。