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 чтобы получать уведомления о свежих статьях.