Ответы пользователя по тегу React
  • Как избавиться от дублей запросов к серверу на react + php и server-side rendering?

    @twoone
    Для это необходимо сетевую логику вынести на отдельный слой с которым и будут работать реакт-компоненты. Простыми словами, определение загрузки должно выполняться не в комопнентах, а в отдельных сервисах. На сервере эти сервисы всегда выполняют запросы, а на клиенте только в случаях, если данные уже не были в них кешированы. То есть, на сервере вы сделали запрос и эти данные вместе с первоначальным рендереом отправили на клиент. Клиент эти данные использует при инициализации тех же сервисов и проэтому они запросы не делают. Нужно лишь подловить момент и не забыть удалить эти данные.
    Ответ написан
    Комментировать
  • Использовать ли hoc если в трех местах используются одинаковый state?

    @twoone
    Вот смотрите. Класс, это шаблон по которому создаются объекты. Состояние класса, то есть его поля, уникальны для каждого экземпляра. Независимо от количества экземпляров класса, его методы всегда будут работать именно с его состоянием, так как они связанны контекстом. Другими словами логика находящаяся в методах связанна с объектом класса.

    Так вот хуки это попытка реализовать поведение методов в функциях. То есть определяя хук вы привязываете его к жизненному циклу функционального компонента и его состоянию. Проще говоря для каждой копии функционального компонента создается отдельная копия хука.

    Из этого следует что обращатся за данными на сервер в хуке нельзя, поскольку каждый компонент использующий ваш хук будет выполнять отдельный запрос к БД. Хук это не сервис. Хук это попытка реализации поведения методов в функциональных компонентах.

    Когда разные компоненты нуждаются в одних и тех же данных их получение и хранение выносят на отдельный соответствующий слой(слои). Для реакта это redux/mobx.
    Ответ написан
    1 комментарий
  • Какой подход к реализации более правилен?

    @twoone
    Лично мне кажется что в spa приложении передавать значения с помощью query стоит только в случаи публичной ссылки. К примеру кастомная сборка компа которой я хочу поделится на тематическом форуме. В остальных случаях лучше создавать модель корзины (store/localeStorage).
    Ответ написан
    Комментировать
  • Как отдать на клиент страницу с данными из бд [2020 React SSR with Hook]?

    @twoone
    ssr должен отдавать законченную разметку содержащую всю необходимую информацию. Иначе в нем попросту нет смысла. Запросы к БД это асинхронные операции, а рендер реакта нет. Вызов рендера сравним с вызовом обычной функции, которая вернет результат по выполнению. Она конечно запустит асинхронные обращения к БД, но дожидатся их окончания не будет. Поэтому хуки, которые не являются сервисами, а предназначены для иметации тела класса, не способны разрешить вашу проблему. Хуки созданы для разделения логики работы непосредственно с шаблоном между компонентами. Вы должны строить приложение таким образом чтобы рендер был выполнен со всеми необходимыми данными. Простыми словами работа с данными должа быть вынесена на сервисный слой, который по завершению инициализации используется реактом для получения необходимых данных.
    Ответ написан
    Комментировать
  • Как рекурсивно отрендерить вложенные массивы?

    @twoone
    Лучше рекурсию прямо на компонентах реализовать -

    https://codesandbox.io/s/silly-ramanujan-3giij?fil...

    import React from "react";
    import "./styles.css";
    
    const data = [{
            "id": "market-executive-summary",
            "title": "Executive Summary",
            "interactivity": false,
            "priceFactor": 2,
            "children": [{
                "id": "market-executive-summary-overview",
                "title": "Overview",
                "interactivity": false,
                "priceFactor": 0,
                "children": []
            }, {
                "id": "market-executive-summary-key-findings",
                "title": "Key Findings",
                "interactivity": false,
                "priceFactor": 0,
                "children": []
            }, {
                "id": "market-executive-summary-conclusions-implications",
                "title": "Conclusions & Implications",
                "interactivity": false,
                "priceFactor": 0,
                "children": []
            }]
        },
        {
            "id": "market-definitions-segmentation",
            "title": "Definitions & Segmentation",
            "interactivity": false,
            "priceFactor": 2,
            "children": [{
                "id": "market-definitions-segmentation-definitions",
                "title": "Definitions",
                "interactivity": false,
                "priceFactor": 0,
                "children": []
            }]
        }
    ]
    
    const List = ({data}) => {
      let children = data.map(data => <Item {...data}/>)
      
      return (
        <ul id>
          {children}
        </ul>
      );
    }
    const Item = ({id, title, children}) => {
      let list = children.length ? <List data={children}/> : null;
      
      return (
        <li>
          <span>{title}</span>
          {list}
        </li>
      );
    }
    
    export default function App() {
      return (
        <List data={data}/>
      );
    }
    Ответ написан
    Комментировать
  • Не найдены значения из json, как исправить?

    @twoone
    fetch, в отличии от рендера react, это асинхронная операция, поэтому к моменту первого рендера items имеют значение undefined, а следовательно и метода .map также не существует. Проще всего сделать items опциональным -
    function Activity({ items = []}) {}
    Ответ написан
    Комментировать
  • Верный способ инвалидации данных в redux store при работе с API?

    @twoone
    Первым делом стоит уяснить что логика должна быть распределенна по отдельным функциям\экшенам. Вторым делом необходимо запомнить что компоненты должны быть максимально простые. Они должны выполнять роль посредника между логикой приложения и шаблоном. Отсюда следует что обязанность компонента page заключается лишь в уведомлении приложения о изменении состояния непосредственно страницы (зашли\вышли\может_что-то_ещё_наподобие_прокидования_данных_конкретного_роута). Когнетивной нагрузки совсем мало.

    Но современные приложения зачастую очень сложные и требуют множества логики, речь о которой шла в "вопервых" и которая и должна быть сосредоточена в экшенах (зашел\вышел). То есть экшены должны представлять из себя древовидную структуру вызовов.

    Ситуация с сообщением об ошибки которую вы обозначили как проблему вполне нормальная для spa + single app state. Вот если бы у вас была событийная модель, то вы бы с подобным не столкнулись, но точно также пришлось городить несуразицу если бы потребовалось сохранить последнее состояние. Поэтому пока при построении приложения используется только один архитектурный подход подобное не избежно.

    Решение вы озвучили - необходимо завести экшены сбрасывающие состояние ошибок. Все остальные решения будут лишь излишними абстракциями над этим.
    Ответ написан
    Комментировать
  • Не работает роутинг на github pages. Как исправить?

    @twoone
    Роутинг spa приложений предполагает что сервер на любые аадреса будет отдавать index.html запускающего приложение роутинг которого уже будет рендерить страницу соответствующую маршруту. gh-pages такое не умеет поскольку является хостингом статики. Для разрешения проблемыd в корне вашего приложения создайте файл с именем 404.html и поместите в него следующий код -
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Single Page Apps for GitHub Pages</title>
        <script type="text/javascript">
            // Single Page Apps for GitHub Pages
            // https://github.com/rafrex/spa-github-pages
            // Copyright (c) 2016 Rafael Pedicini, licensed under the MIT License
            // ----------------------------------------------------------------------
            // This script takes the current url and converts the path and query
            // string into just a query string, and then redirects the browser
            // to the new url with only a query string and hash fragment,
            // e.g. http://www.foo.tld/one/two?a=b&c=d#qwe, becomes
            // http://www.foo.tld/?p=/one/two&q=a=b~and~c=d#qwe
            // Note: this 404.html file must be at least 512 bytes for it to work
            // with Internet Explorer (it is currently > 512 bytes)
            // If you're creating a Project Pages site and NOT using a custom domain,
            // then set segmentCount to 1 (enterprise users may need to set it to > 1).
            // This way the code will only replace the route part of the path, and not
            // the real directory in which the app resides, for example:
            // https://username.github.io/repo-name/one/two?a=b&c=d#qwe becomes
            // https://username.github.io/repo-name/?p=/one/two&q=a=b~and~c=d#qwe
            // Otherwise, leave segmentCount as 0.
            var segmentCount = 1;
            var l = window.location;
            l.replace(
                l.protocol + '//' + l.hostname + ( l.port ? ':' + l.port : '' ) +
                l.pathname.split( '/' ).slice( 0, 1 + segmentCount ).join( '/' ) + '/?p=/' +
                l.pathname.slice( 1 ).split( '/' ).slice( segmentCount ).join( '/' ).replace( /&/g, '~and~' ) +
                ( l.search ? '&q=' + l.search.slice( 1 ).replace( /&/g, '~and~' ) : '' ) +
                l.hash
            );
        </script>
    </head>
    <body>
    </body>
    </html>


    Кроме того помнине что в случаи отсутствия домена все внутренние ссылки (переходы\картинки и т.п.) должны включать имя вашего репозитория.
    Ответ написан
    1 комментарий
  • Деплой full stack проекта на node js и react?

    @twoone
    Существует два лагеря первый из которых проповедует разделение репозиториев на клиент и сервер, а вторая за объединенный моно-репозиторий. И обе категории правы, поскольку у удних проект состоит из клиента и сервера, а у других один сервер может быть как на множество клиентов, так и на оборот.

    В вашем случае, скорее всего нужно склонятся к монорепозиторию (может потребоватся использование lerna) которые будут состоять из директорий client\server и тому подобное. С дев разработкой можно поступить несколькими путями. Либо запускать реальный сервер (могут возникнуть проблемы с приватными ключами у сторонних разработчиков), либо использовать моки (трбуется постоянная синхронизация которая может быть решена расшариванием моков необходимых для тестирования сервера).

    И для прод сборки и развертывания обязательно используйти ci\cd (github actions например) с помощью которых настроете сборку проекта так как только пожелаете.
    Ответ написан
    Комментировать