Ответы пользователя по тегу React
  • React render Link or?

    TchernyavskD
    @TchernyavskD
    Formoshlep
    Менять a на Link? Я бы в links сделал boolean значение у каждого объекта, которое бы и переключало. А на саму ссылку, либо на врапер клик хендлер.
    Ответ написан
  • Стоит ли переходить на Хуки?

    TchernyavskD
    @TchernyavskD
    Formoshlep
    Стоит, но так же стоит перестать их сравнивать в дальнейшем, иначе это вызовет больше ошибок
    https://overreacted.io/react-as-a-ui-runtime/

    Одно из очевидных - невозможность нормального красивого переюзания stateful-логики. Хуки ты можешь заталкивать друг в друга, комбинировать куски логики и потом всё это юзать в любом количестве компонентов. На классах так просто это не сделать.
    Ответ написан
    Комментировать
  • Используете ли вы React-подход components/containers в проектах?

    TchernyavskD
    @TchernyavskD
    Formoshlep
    Если мы говорим про понятие контейнера в виде реакт - компонента:
    Почитайте Атомик дизайн под Реакт, либо Feature Sliced
    Если совсем проще, то можно достичь, что Реакт будет только для рендера вью, а вся логика уйдет из уровня реакта, либо ее большая часть. Это идеально можно реализовать, например, с effector. Последние полгода нигде нет контейнеров.

    Почему AtomicDesign спасет вашу душу.

    Некоторые считают, что этот подход слишком заморочен. Заставляет много думать о расположении элементов, а при усложнении - перемещать его в другие директории. Если спросить Родионова - найдется ещё несколько причин, почему не надо использовать Atomic Design. В этом посте я хочу рассказать об обратном: как использовать подход Брэда Фроста в React.

    В самом начале необходимо понять - нужен ли вашей команде этот архитектурный дизайн. Достаточно ответить на следующие вопросы:
    - сколько человек будут разрабатывать фронтенд?
    - сколько команд будут использовать ваш код?
    - сколько проектов используют один UI дизайн?
    Если у вас один небольшой проект, в котором всего два фронтендера - вам не нужен AtomicDesign. Если в вашем проекте около 10 фронтендеров и намечается второй проект - нужно задуматься о внедрении AtomicDesign. Тем более если в вашей компании проекты используют общую библиотеку компонентов или планируется внедрение.

    Многие задают мне один и тот же вопрос: "Куда положить компонент X?". Отвечаю сразу для всех компонентов: AtomicDesign - это подход, обеспечивающий вам архитектуру UI компонентов - не более. То есть контейнеры/коннекторы/роутеры вы можете класть в любую директорию, кроме ui. Я всегда рекомендую начать изучение с прочтения книги автора atomicdesign.bradfrost.com, но ниже немного опишу составные части.

    Сразу следует понять, что компоненты AtomicDesign — это бизнес-сущности, это то, чем могут оперировать дизайнеры и разработчики вместе. Не надо включать сюда различные таймеры появления блоков или логику переключения вкладок. Пусть даже они у вас описаны в виде компонентов или HOC'ов.

    Так почему это все спасает души? Чтобы понять ответ, обратимся к ещё одной теме фронтенда: типизированный javascript. Typescript/Flowtype придумали для наложения определенных ограничений на код, чтобы в дальнейшем его было проще поддерживать и читать. AtomicDesign накладывает ограничения на дизайнеров и фронтендеров, обязывая их общаться на одном языке бизнес-сущностей.

    Но необходимо добавить несколько слов о поддержке библиотеки компонентов AtomicKit. В какой-то момент возникает проблема усложнения компонентов, и многие задаются вопросом: "Как же быть, неужели теперь нужно перемещать компонент из атомов в молекулы?" — Нет.
    Перед стартом разработки необходимо тщательно проектировать набор компонентов и не менять его предназначения, пока он существует под таким названием. Если же вам необходимо усложнить компонент, добавить в него какие-то элементы - просто создайте ещё один компонент, который будет добавлять то, что вам нужно. Так вы не сломаете совместимость со всей библиотекой и реализуете необходимую вам фун
    Ответ написан
    1 комментарий
  • Как менять домен для отправки запросов на бэк в зависимости от деплоя?

    TchernyavskD
    @TchernyavskD
    Formoshlep
    Есть множество вариантов. Ты можешь например в вебпаке в сборке дев и прод использовать define plugin. По факту у тебя в зависимости от env будет свой конфиг под нужную версию
    Ответ написан
    Комментировать
  • React Hooks, Twilio-video, как установить экран dominantSpeaker лишь через 2 секунды после того как state меняется?

    TchernyavskD
    @TchernyavskD
    Formoshlep
    В юзэффекте с таймаутом нужным, при этом с зависимостью твоего стейта который необходимо учитывать в изменении, при этом учитывать анмаунт и если что чистить таймаут
    Ответ написан
    2 комментария
  • Как правильно использовать useCallback в React?

    TchernyavskD
    @TchernyavskD
    Formoshlep
    Конкретно в твоем примере - useCallback не нужен. Перечитай это в документации.
    Ты на каждый рендер вызываешь функцию `useCallback`и передаешь в неё свой хендлер. Когда ты так делаешь, жс вынужден создать функцию прежде чем передать её в useCallback
    Мемоизация работает тут так, что если у тебя депсы не изменились, useCallback игнорит новый аргумент и возвращает тебе старый хендлер
    Ответ написан
    Комментировать
  • React. В setState новое значение сохраняется только при втором нажатии. При первом даёт предыдущее значение. Как можно исправить?

    TchernyavskD
    @TchernyavskD
    Formoshlep
    setState асинхронен, в документации это 3 абзац https://ru.reactjs.org/docs/react-component.html#s... Ты можешь удостовериться сделав в 2 параметре setState проверку с консоль логом, либо в самом рендере на то, что значение поменялось и еще несколько вариантов проверок
    Ответ написан
    2 комментария