無狀態功能元件

元件讓你分割成 UI 獨立的，可重複使用的部分。這就是 React 的美麗; 我們可以將頁面分成許多小的可重用元件。

在 React v14 之前，我們可以使用 React.Component（在 ES6 中）或 React.createClass（在 ES5 中）建立一個有狀態的 React 元件，而不管它是否需要任何狀態來管理資料。

React v14 引入了一種更簡單的方法來定義元件，通常稱為無狀態功能元件。這些元件使用純 JavaScript 函式。

例如：

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

此函式是一個有效的 React 元件，因為它接受帶有資料的單個 props 物件引數並返回一個 React 元素。我們稱這些元件是**有效的，**因為它們實際上是 JavaScript 函式。

無狀態功能元件通常專注於 UI; 狀態應由更高階別的容器元件管理，或通過 Flux / Redux 等管理。無狀態功能元件不支援狀態或生命週期方法。

優點：

1. 沒有類開銷
2. 不必擔心 this 關鍵字
3. 易於編寫且易於理解
4. 不必擔心管理狀態值
5. 效能改進

簡介 ：如果你正在編寫一個不需要狀態並且想要建立可重用 UI 的 React 元件，那麼你可以將其編寫為無狀態功能元件，而不是建立標準 React 元件。

我們舉一個簡單的例子：

假設我們有一個頁面可以註冊使用者，搜尋註冊使用者，或顯示所有註冊使用者的列表。

這是應用程式的入口點，index.js：

import React from 'react';
import ReactDOM from 'react-dom';

import HomePage from './homepage'

ReactDOM.render(
    <HomePage/>,
    document.getElementById('app')
);

HomePage 元件提供用於註冊和搜尋使用者的 UI。請注意，它是典型的 React 元件，包括狀態，UI 和行為程式碼。註冊使用者列表的資料儲存在 state 變數中，但我們的可重用 List（如下所示）封裝了列表的 UI 程式碼。

homepage.js：

import React from 'react'
import {Component} from 'react';

import List from './list';

export default class Temp extends Component{
    
    constructor(props) {
        super();
        this.state={users:[], showSearchResult: false, searchResult: []};
    }

    registerClick(){
        let users = this.state.users.slice();
        if(users.indexOf(this.refs.mail_id.value) == -1){
            users.push(this.refs.mail_id.value);
            this.refs.mail_id.value = '';
            this.setState({users});
        }else{
            alert('user already registered');
        }
    }

    searchClick(){
        let users = this.state.users;
        let index = users.indexOf(this.refs.search.value); 
        if(index >= 0){
            this.setState({searchResult: users[index], showSearchResult: true});
        }else{
            alert('no user found with this mail id');
        }
    }

    hideSearchResult(){
        this.setState({showSearchResult: false});
    }

    render() {
        return (
            <div>
                <input placeholder='email-id' ref='mail_id'/>
                <input type='submit' value='Click here to register' onClick={this.registerClick.bind(this)}/>
                <input style={{marginLeft: '100px'}} placeholder='search' ref='search'/>
                <input type='submit' value='Click here to register' onClick={this.searchClick.bind(this)}/>
                {this.state.showSearchResult ?
                    <div>
                        Search Result:
                        <List users={[this.state.searchResult]}/>
                        <p onClick={this.hideSearchResult.bind(this)}>Close this</p>
                    </div>
                    :
                    <div>
                        Registered users:
                        <br/>
                        {this.state.users.length ? 
                            <List users={this.state.users}/>
                            :
                            "no user is registered"
                        }
                    </div>
                }
            </div>
        );
    }
}

最後，我們的無狀態功能元件 List，用於顯示註冊使用者列表和搜尋結果，但不保留任何狀態本身。

list.js：

import React from 'react';
var colors = ['#6A1B9A', '#76FF03', '#4527A0'];

var List = (props) => {
    return(
        <div>
            {
                props.users.map((user, i)=>{
                    return(
                        <div key={i} style={{color: colors[i%3]}}>
                            {user}
                        </div>
                    );                
                })
            }
        </div>
    );
}

export default List;

參考： https ： //facebook.github.io/react/docs/components-and-props.html