具有無狀態功能的 Hello World

Created: November-22, 2018

無狀態元件從功能程式設計中獲得了他們的理念。這意味著：一個函式在給定的內容上完全返回相同的東西。

例如：

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 有更多優化空間。實現是乾淨的，但到目前為止還沒有實現對無狀態元件的這種優化。