具有无状态功能的 Hello World

无状态组件从功能编程中获得了他们的理念。这意味着：一个函数在给定的内容上完全返回相同的东西。

例如：

const statelessSum = (a, b) => a + b;

let a = 0;
const statefulSum = () => a++;

从上面的例子可以看出，statelessSum 总是会返回给定 a 和 b 的相同值。但是，即使没有参数，statefulSum 函数也不会返回相同的值。这种类型的函数的行为也称为副作用。因为，该组件会影响某些事物。

因此，建议更频繁地使用无状态组件，因为它们没有*副作用，*并且总是会创建相同的行为。这就是你希望在应用程序中使用的内容，因为波动状态是可维护程序的最坏情况。

最基本的反应组分类型是没有状态的反应组分。React 组件是其道具的纯函数，不需要任何内部状态管理，可以编写为简单的 JavaScript 函数。这些被认为是 Stateless Functional Components 因为它们只是 props 的功能，没有任何 state 来跟踪。

这是一个简单的例子来说明 Stateless Functional Component 的概念：

// In HTML
<div id="element"></div>

// In React
const MyComponent = props => {
    return <h1>Hello, {props.name}!</h1>;
};

ReactDOM.render(<MyComponent name="Arun" />, element);
// Will render <h1>Hello, Arun!</h1>

请注意，此组件所做的全部操作是渲染包含 name 道具的 h1 元素。此组件不跟踪任何状态。这是一个 ES6 示例：

import React from 'react'

const HelloWorld = props => (
    <h1>Hello, {props.name}!</h1>
)

HelloWorld.propTypes = {
    name: React.PropTypes.string.isRequired
}

export default HelloWorld

由于这些组件不需要后台实例来管理状态，因此 React 有更多优化空间。实现是干净的，但到目前为止还没有实现对无状态组件的这种优化 。