Компонент функции React с примером

Функциональные компоненты похожи на функции Javascript, которые могут получать реквизиты и возвращать элементы реакции. Они не могут иметь состояния, поэтому называются компонентами без состояния.

Функциональные компоненты аналогичны функциям JavaScript. Они также могут получать props, но не могут иметь состояние. Следовательно, они называются компонентами без состояния. Однако состояние может быть достигнуто с помощью ловушки с именем useState(). Подробнее о крючках мы прочтем позже.

Давайте создадим тот же компонент Book, используя компонент функции реагирования.

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

export default function Book() {
    return <h1>This is a book</h1>
}

ReactDOM.render(<Book/>, document.getElementById('root'));

Выход

Передача реквизита функциональному компоненту

props в функциональные компоненты передаются так же, как компоненты класса, но для доступа к props вы должны получить объект props через аргумент и получить доступ к реквизиту по его имени. См. пример ниже.

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

export default function Book(props) {
    return <div>
        <h1>This is a book with index: {props.index}</h1>
        <h2>Author: {props.author}</h2>
    </div>
}

ReactDOM.render(<Book index={1} author={'Michael'}/>, document.getElementById('root'));

Выход

Вы также можете получать отдельные реквизиты по имени и обращаться к ним только по имени. Приведенный выше пример можно записать и таким образом.

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

export default function Book({index, author}) {
    return <div>
        <h1>This is a book with index: {index}</h1>
        <h2>Author: {author}</h2>
    </div>
}

ReactDOM.render(<Book index={1} author={'Michael'}/>, document.getElementById('root'));

Если ваш компонент заключает в себе другой компонент(ы), то эти дочерние компоненты могут быть получены с помощью специального реквизита, который называется children. Вы можете получить к ним доступ так же, как и к индексу и автору в приведенном выше примере.

Использование состояния в функциональном компоненте

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

Поскольку функциональные компоненты по умолчанию не имеют состояния, они не имеют состояния, но этого можно добиться с помощью хука с именем useState()..

См. приведенный ниже пример, в котором мы визуализировали компонент Book. Этот компонент создает 2 переменные состояния, называемые index и автор, и присваивает им начальные значения «2» и «Радость». ' соответственно, и обращаться к ним по имени.

import React, {useState} from 'react';
import ReactDOM from 'react-dom';

export default function Book() {
  const [index, setIndex] = useState('2');
  const [author, setAuthor] = useState('Joy');
  return <div>
    <h1>This is a book with index: {index}</h1>
    <h2>Author: {author}</h2>
  </div>
}

ReactDOM.render(<Book/>, document.getElementById('root'));

Выход

Хук useState() также дает нам обратный вызов для обновления значений переменных состояния. В приведенном выше примере setIndex и setAuthor являются обратными вызовами для index. и авторсоответственно. Вы можете вызывать эти методы для обновления их значений. После обновления компонент Book будет повторно отображаться.