无状态功能组件

组件让你分割成 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