Love Frontend
Сообщество
фронтенд разработчиков
EN

Аналог VUE computed свойства в React

Автор: mrlozchka
Дата публикации: 23.01.2020

Сегодня мы расскажем как повторить Vue функционал computed свойства в React компоненте.

Кратко о computed свойстве (вычисляемом свойстве). Для чего оно? С виду это обычная переменная, которая динамически меняет свое значение, в зависимости от данных, используемых для ее вычисления.

Например нам нужно динамически выстраивать url вида /DATETIME/TITLE.html, причем дату и заголовок мы получаем откуда-то извне.

Как бы мы сделали это на Vue без computed свойства:

data () {
datetime: ‘получено_из_datepicker’,
title: ‘получено_из_инпута’
},
methods: {
getUrl () {
return `/${this.datetime}/${this.title}.html`
}
}

Теперь, каждый раз, при изменении datetime или title, нужно заново вызывать метод getUrl.

Неудобно. Улучшим.

Как бы мы сделали это на Vue используя computed свойство:

data () {
datetime: ‘получено_из_datepicker’,
title: ‘получено_из_инпута’
},
computed: {
url () {
return `/${this.datetime}/${this.title}.html`
}
}

Теперь при изменении datetime или title, свойство url будет автоматически меняться.

Как бы мы реализовали функционал computed свойства на React, используя хук useState:

Смысл в том, чтобы в одной переменной использовать значения заданных state

function ReactComputedDemo () {
// Нам необходимо создать
// две переменных state в функциональном компоненте
const [datetime, setDatetime] = useState(123456)
const [title, setTitle] = useState(‘привет lovefrontend’)
// А теперь создаем третью переменную,
// которая и будет являться нашим computed свойством
const url = `/${datetime}/${title}.html`
return (
<div>
{url}
</div>
)
}

При изменении state через методы setDatetime и setTitle, переменная url будет так же динамически меняться.

На этом все, хорошего кодинга, друзья!

Оставьте свой e-mail чтобы получать уведомления о свежих статьях.