React
무국적 기능 구성 요소
수색…
비고
React의 무국적 기능 구성 요소는 전달 된 props
의 순수한 기능입니다. 이러한 구성 요소는 상태에 의존하지 않고 구성 요소 수명주기 메서드를 사용하지 않습니다. 그러나 propTypes
및 defaultPropts
여전히 정의 할 수 있습니다.
상태없는 기능 구성 요소에 대한 자세한 내용은 https://facebook.github.io/react/docs/reusable-components.html#stateless-functions 를 참조 하십시오 .
무국적 기능 구성 요소
구성 요소를 사용하면 UI를 독립적 인 재사용 가능한 부분으로 분할 할 수 있습니다. 이것은 React의 아름다움입니다. 페이지를 여러 개의 작은 재사용 가능한 구성 요소 로 분리 할 수 있습니다.
React v14 이전에는 React.Component
(ES6) 또는 React.createClass
(ES5)를 사용하여 상태를 필요로하는지 여부에 관계없이 Stateful React 구성 요소를 만들 수있었습니다.
React v14에서는 일반적으로 무국적 기능 구성 요소 라고하는 구성 요소를 정의하는 더 간단한 방법을 소개했습니다. 이러한 구성 요소는 일반 JavaScript 함수를 사용합니다.
예 :
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
이 함수는 하나의 props
객체 인수를 데이터와 함께 받아들이고 React 요소를 반환하기 때문에 유효한 React 구성 요소입니다. 이러한 컴포넌트는 말 그대로 JavaScript 함수 이기 때문에 기능적 이라고 부릅니다.
상태 비 저장 기능 구성 요소는 일반적으로 UI에 중점을 둡니다. 상태는 더 높은 수준의 "컨테이너"구성 요소 나 Flux / Redux 등을 통해 관리되어야합니다. Stateless 기능 구성 요소는 상태 또는 라이프 사이클 방법을 지원하지 않습니다.
은혜:
- 클래스 오버 헤드 없음
-
this
키워드에 대해 걱정할 필요가 없습니다. - 쓰기 쉽고 이해하기 쉽습니다.
- 상태 값 관리에 대해 걱정할 필요가 없습니다.
- 성능 향상
요약 : 상태가 필요없는 React 구성 요소를 작성하고 재사용 가능한 UI를 만들고 싶다면 표준 React 구성 요소를 작성하는 대신 Stateless 기능 구성 요소 로 작성할 수 있습니다.
간단한 예를 들어 봅시다.
사용자를 등록하거나 등록 된 사용자를 검색하거나 등록 된 모든 사용자의 목록을 표시 할 수있는 페이지가 있다고 가정 해 보겠습니다.
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