React
Функциональные компоненты без учета состояния

замечания

Функциональный компонент без учета состояния

Компоненты позволяют разделить пользовательский интерфейс на самостоятельные , многоразовые элементы. Это красота Реакта; мы можем разделить страницу на многие мелкие повторно используемые компоненты .

До того, как React v14 мы могли создать компонент React.Component (в ES6), который может быть создан с React.Component состояния, или React.createClass (в ES5), независимо от того, требуется ли какое-либо состояние для управления данными или нет.

React v14 представил более простой способ определения компонентов, обычно называемых функциональными компонентами без состояния . Эти компоненты используют простые функции JavaScript.

Например:

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

Эта функция является действительной компонентой React, потому что она принимает один аргумент объекта props с данными и возвращает элемент React. Функциональные элементы называются функциональными, поскольку они являются буквально функциями JavaScript.

Функциональные компоненты без учета состояния обычно фокусируются на пользовательском интерфейсе; состояние должно управляться компонентами «контейнера» более высокого уровня или через Flux / Redux и т. д. Функциональные компоненты без состояния не поддерживают методы состояния или жизненного цикла.

Выгоды:

1. Нет накладных расходов класса
2. Не нужно беспокоиться об this ключевом слове
3. Легко писать и легко понять
4. Не нужно беспокоиться об управлении государственными ценностями
5. Улучшение производительности

Резюме . Если вы пишете компонент React, который не требует состояния и хотел бы создать пользовательский интерфейс многократного использования, вместо создания стандартного компонента React вы можете записать его как функциональный компонент без состояния .

Возьмем простой пример:

Предположим, у нас есть страница, которая может регистрировать пользователя, искать зарегистрированных пользователей или отображать список всех зарегистрированных пользователей.

Это точка входа приложения, index.js :

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

import HomePage from './homepage'

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

Компонент HomePage предоставляет пользовательский интерфейс для регистрации и поиска пользователей. Обратите внимание, что это типичный компонент React, включающий состояние, пользовательский интерфейс и поведенческий код. Данные для списка зарегистрированных пользователей хранятся в переменной state , но наш List многократного использования (показан ниже) инкапсулирует код пользовательского интерфейса для списка.

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