Есть ли способы применить концепции vue в react?

Question

[SherbakovFirst]

Привет. Решил покапаться в React, до этого большуя часть времени сидел на Vue

Главные вопросы
- Есть ли какой то способ применять onClick на готовые компоненты, ведь они оборачиваются div, почти всегда
- Можно применить className на сам компонент?
В общем можно ли как то обойти работу через props или упростить его использование?

И есть Вы тоже работали с Vue, а перешли на React, может есть какие то советы, библиотеки?

Comments

[WbICHA]

В общем можно ли как то обойти работу через props

Это как? Добавив подкапотную "магию"? Допустим.
Как тогда обрабатывать случаи, когда кастомный компонент возвращает не дом элемент? А эти случаи тезис "почти всегда" сводят на нет.
А если разные элементы по условию возвращаются?
Короче, вопросов море. Но главный вопрос: зачем? Чем пропсы неугодили?

[Aetae]

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

Если очень хочется: можно навертеть любую магию через cloneElement и ручную допилку vdom. Но не стоит, никто не оценит.:)

[SherbakovFirst]

WbICHA, дублирование простейшего кода. Зачем мне везде передавать className внутрь, а если это несколько наследуемых компонентов? Тоже самое что передавать props каких то данных, вместо использования глобального хранилища

А какие кейсы бывают, когда компонент может возвращать не DOM? Чтобы я знал что такие практики используются и где. Буду благодарен

[WbICHA]

SherbakovFirst,

Зачем мне везде передавать className внутрь

Хороший вопрос. А зачем тебе передавать класс внутрь? В 99% случаев в этом просто нет необходимости. Разве что для юи либ это почти везде надо.

а если это несколько наследуемых компонентов?

Context.

А какие кейсы бывают, когда компонент может возвращать не DOM?

Из банального возвращение строки/числа как значение. Из менее банального возвращение нулл/андефайнд/фрагмент.
Кейсы разные. Со строками/числами понятно, а нулл/андефайнд может по условию идти, если нет данных. Или отдельный компонент, который, к примеру, с глобальным стейтом работает и с данными с сервера, а отдельный, чтобы не думать о ререндере детей.
Ну а во фрагменте, как правило, несколько детей, на кого эвент вешать?

[szQocks]

WbICHA,

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

пример бы ему

SherbakovFirst,
немного подумал и состряпал в полне +- реальный пример
представь что ты сидишь на сайте ( то есть ты онлайн ), и другой юзер по отношению к тебе сделал какое-то действие и тебе должно прийти какое-либо уведомление ( неважно )

можно написать компонент который возвращает null и вся его задача будет в том - что он принимает эти уведомления через сокеты и заносит их в глобальный стейт, так как через глобальный стейт они в другом компоненте рендерятся ( который возможно не всегда отображается, к примеру он постоянно не находиться в шапке или в футере, либо на отдельной странице что логично, но знать о том что пришло какое-либо уведомление ты должен заранее без перехода на ту страницу )

import io from '...';

const NotificationObserver = () => {
  const update_notification_in_global_store = useStore('...'); // пример

  useEffect(() => {

    const fn = msg => {
      update_notification_in_global_store(msg.data);
    }

    io.on('notification',fn);

    return () => {
      io.off('notification', fn)
    }
  }, [])

  return null;
}

остается всего лишь монтировать его где-то, для того что бы он работал

[WbICHA]

szQocks, мне было лень писать.)
Я бы ещё добавил, что такая имплементация позволяет разместить несколько аналогичных обсерверов на одном уровне, а не прокидывать каждый обсервер в виде ребёнка к предыдущему.

const Comp = ({ children }) => {
  return (
    <>
      <NotificationObserver />
      <MessageObserver />
      <TopicObserver />
      <UserObserver />

      {children}
    </>
  );
};

Вместо:

const Comp = ({ children }) => {
  return (
      <NotificationObserver>
        <MessageObserver>
          <TopicObserver>
            <UserObserver>{children}</UserObserver>
          </TopicObserver>
        </MessageObserver>
      </NotificationObserver>
  );
};