React
ステートレス機能コンポーネント
サーチ…
備考
Reactのステートレス機能コンポーネントは、渡されたprops
純粋な機能です。これらのコンポーネントは状態に依存せず、コンポーネントのライフサイクルメソッドの使用を破棄します。ただし、 propTypes
とdefaultPropts
定義することはできます。
ステートレス機能コンポーネントの詳細については、 https://facebook.github.io/react/docs/reusable-components.html#stateless-functionsを参照してください 。
ステートレス機能コンポーネント
コンポーネントを使用すると、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などを介して管理する必要があります。ステートレス機能コンポーネントは、状態メソッドまたはライフサイクルメソッドをサポートしていません。
利点:
- クラスオーバーヘッドなし
-
this
キーワードについて心配する必要はありません - 書きやすく、理解しやすい
- 状態値の管理について心配する必要はありません
- パフォーマンスの向上
要約 :状態を必要とせず、再利用可能な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