React
ステートレス機能コンポーネント

備考

ステートレス機能コンポーネント

コンポーネントを使用すると、UIを独立した再利用可能な部分に分割できます。これはリアクトの美しさです。ページを複数の小さな再利用可能なコンポーネントに分けることができます 。

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を提供します。これは、状態、UI、および動作コードを含む典型的なReactコンポーネントであることに注意してください。登録ユーザーのリストのデータは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