Как я могу реализовать реальное частичное обновление с ReactJS? - PullRequest
Новая
       4

Как я могу реализовать реальное частичное обновление с ReactJS?

0 голосов
/ 02 июня 2018

У меня было собеседование, и рекрутер спросил меня о «обработке частичных обновлений и управлении размером приложения».

Например, он объяснил и показал SPA размером 8 МБ, и он сказал, что он не идеален и не совершенен.!?!?

И он сказал, что мы должны управлять размером приложения разными способами!?

Для теста, после сеанса собеседования, я проверил веб-сайт linkedin с Google Chrome DevTools.после любых запросов я видел ответ, кто это был html web page (Html, Css, JS) и, очевидно, linkedin после каждого запроса добавляет html ответ к странице, который является идеей для контроля размера SPA!

Итак, у меня есть вопроспо умолчанию в пакете create-реагировать-приложение у нас есть веб-пакет для создания веб-модулей, который загружает все компоненты в один bundle.js, и этот файл js будет тяжелым для 40 или более компонентов.может быть, 10 МБ или больше ...

Как реализовать реальную и оптимизированную структуру SPA с совершенным и точным методом частичного обновления?

К сожалению, я немного знаю английский, пожалуйста, простимне, если я ошибся, чтобы написать по-английски :-); -)

Спасибо

1 Ответ

0 голосов
/ 02 июня 2018

Я думаю, что вы ищете динамический импорт или асинхронную загрузку компонентов (или больше кода) при необходимости.Это можно сделать разными способами, например

  • Загрузка, когда пользователь прокручивает вниз к компонентам
  • Загружать компонент только тогда, когда пользователь нажимает кнопку (например, модальное)
  • Загрузить компонент после того, как начальные критические данные уже отрисованы (например, только загрузить код для компонента после того, как его родительский компонент уже загружен и обработан в dom).

последний пример может быть сделан следующим образом: 

class Dynamic extends Component {
  constructor(props) {
    super(props);
    this.state = { module: null };
  }
  componentDidMount() {
    const { path } = this.props;
    import(`${path}`)
      .then(module => this.setState({ module: module.default }))
  }
  render() {
    const { module: Component } = this.state; // Assigning to new variable names @see: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
    return(
      <div>
        {Component && <Component />}
      </div>
    )
  }
}

То, что делает приведенный выше код, загружает код компонента после того, как его родительский компонент уже загружен, импортируя его в компоненте, который монтировал.

Этот метод разделения кода в настоящее время

поддерживается приложением create-реагировать.

Подробнее здесь

Также проверьте это реактивно-загружаемый

...