Локальное состояние и хуки

Комментарии (16)

Александр Кулик

2020-11-14 10:41

Супер

Arunas

2020-11-16 19:07

Спасибо.

Кропотов Александр

2020-11-17 16:11

Спасибо! Вообще получается что классы или функциональные компоненты это разные парадигмы разработки на Реакте, и мне кажется идет уход от классов да и от Редакса. Многие вещи решаются с помощью кастомных хуков, например та же авторизация. Вот тут много примеров есть https://usehooks.com, кому интересно. Т.е глобальные данные упаковываются либо в оборачивающий компонент, ну или в компонент высшего порядка. Но конечно, это вопрос личных предпочтений, как писать. Но вообще это чем то напомнило мидлвары в бэкенде.

Дмитрий Елисеев

2020-11-24 12:31

Да, изначально были классы с методами жизненного цикла, но сейчас рекомендуют переходить на более простые функции с хуками.

А по хранению данных часто используют локальное состояние и контексты. Но многие крупные проекты всё равно делают со внешними хранилищами если им требуется выделенная централизованная модель данных.

В этом эпизоде заметно, что простой виджет Clock спокойно перешёл на локальное состояние. Но как только мы всё состояние с лотами и экшены со stream и api перенесли внутрь Lots этот компонент сразу стал монструозным и почти нетестируемым. Так что не всегда очевидно что будет удобнее.

rodigy

2020-11-21 23:26

Как по ощущениям, функциональные компоненты выглядят громоздко и не понятно в отличии от классов. Зачем это нужно было делать, какие насущные вопросы решал фейсбук....

Дмитрий Елисеев

2020-11-24 13:42

То есть этот компонент:

function ClockContainer () {
  const [time, setTime] = React.useState(new Date())

  React.useEffect(() => {
    const interval = setInterval(() => setTime(new Date()), 1000)
    return () => clearInterval(interval)
  }, [setTime])

  return <Clock time={time} />
}

Выглядит более громоздким, чем этот?

class ClockContainer extends React.Component {
  constructor () {
    super()
    this.state = {
      time: new Date()
    }
    this.tick = this.tick.bind(this)
  }

  tick () {
    this.setState({
      time: new Date() 
    })
  }

  componentDidMount () {
    this.interval = setInterval(this.tick, 1000)
  }

  componentWillUnmount () {
    clearInterval(this.interval)
  }

  render () {
    return <Clock time={this.state.time} />
  }
}

rodigy

2020-11-24 18:59

В классах кода больше, но и ясности больше что происходит

Aёct'ann

2020-11-25 15:43

Но если знать, как работают хуки, то и в функциональном компоненте все предельно ясно

Андрей

2021-01-11 19:46

Дмитрий, спасибо за уроки, подскажите что за шрифт в самой программе idea?

Дмитрий Елисеев

2021-01-12 10:38

Интерфейс шрифтом Tahoma
В редакторе DejaVu Sans Mono

Андрей

2021-01-13 15:39

Благодарю

kashamamina

2021-05-23 21:15

А если вот будет отдельная страница с лотом, куда нужно будет вывести данные о лоте, то как это правильно сделать? Получается, будет компонент LotPage и он будет с адресной строки брать айди лота? А потом нужно сделать запрос на сервер чтобы получить этот лот, но где именно мы будем это делать, это же вроде как не экшен (в плане что вместе с экшенами мы его не поместим), состояние он никак не меняет, но запрос асинхронный? Плюс что если загрузка лота будет тоже такая продвинутая, как и у лотов?

Я думал что можно этот запрос сделать эффектом, вынести в контейнерный компонент с локальным состояниям где будет также вся эта продвинутая загрузка, но а что если я захочу протестировать этот эффект, вынести его куда-то и куда тогда? Так же каким образом этот контейнерный компонент будет получать доступ к объекту api, через пропсы его передавать?

Как бы вы это сделали?

Дмитрий Елисеев

2021-06-07 11:13

Да, LotPage в плане состояния и загрузки будет работать абсолютно также как Lots. Он будет брать id из маршрутизатора и у себя подгружать текущий лот.

Если с api всё будет в одном компоненте, то тогда со всеми хуками нужно будет тестировать весь компонент через React Testing Library. И там подменять переменную global.fetch или модуль api на заглушку, как мы делали в эпизоде про регистрацию.

kashamamina

2021-06-08 10:46

спасибо

S.Polessky

2021-09-13 11:30

Несколько вопросов по реализации функции resolveDispatcher() (Тайминг: 22:16) (Скриншот)

Интересно, для чего поступили именно так:

1) Зачем такая "сложная" проверка в if с использованием инверсии? Короче, читабельный же: if (dispatcher === null).

2) Зачем выброс исключения обернули в отдельную область видимости {}?

3) Почему используют var, а не let? Для совместимости?

Дмитрий Елисеев

2021-09-28 15:10

Да, весьма странный подход. Надо спросить у авторов этого кода.

Зарегистрируйтесь или войдите чтобы оставить комментарий

Или войти через:

Google

GitHub

Yandex

MailRu