React 具有无状态功能的Hello World

示例

无状态组件正从函数式编程中获取其原理。这意味着：一个函数总是在相同的事物上完全返回给它的东西。

例如：

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

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

从上面的示例可以看出，给定a和b，statelessSum始终将返回相同的值。但是，即使没有参数，statefulSum函数也不会返回相同的值。这种功能的行为也称为副作用。因为，该组件影响的范围超出了其他范围。

因此，建议更频繁地使用无状态组件，因为它们是无副作用的，并且总是会产生相同的行为。那就是您想要在应用程序中追求的，因为波动状态是可维护程序的最坏情况。

最基本的反应组件类型是无状态组件。React组件是其道具的纯函数，不需要任何内部状态管理，可以将其编写为简单的JavaScript函数。据说这是Stateless Functional Components因为它们仅是的功能props，而没有任何state可追踪的。

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

// 在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具有更多的优化空间。该实现是干净的，但是到目前为止，尚未实现针对无状态组件的此类优化。