Реагировать на портале в памяти - PullRequest
Новая
       7

Реагировать на портале в памяти

1 голос
/ 01 октября 2019

Я хочу создать дерево компонентов React в памяти (не в DOM) с тем же поведением, что и у портала React, то есть он должен использовать контексты из дерева родительских компонентов.

можно создать что-то вроде Portal, но вместо того, чтобы рендерить его на узле DOM, «рендерить» его в памяти (вне DOM)?

Обратите внимание, что мне нужен жизненный цикл компонентов некоторых компонентов вдерево, в то время как визуальная часть будет скрыта, но в моем случае, если я помещу дерево компонентов в DOM в скрытый div, производительность не будет хорошей, и тогда я хочу протестировать другой подход.

1 Ответ

1 голос
/ 01 октября 2019

Мне на ум приходят две возможности:

1) создать портал для DocumentFragment

Когда вы используете ReactDOM.createPortal, вы можете указать его на documentFragment в памяти, а не на элементна странице. Затем созданные узлы должны быть добавлены к этому фрагменту в памяти. Соответствует ли это вашим критериям или нет, я не уверен, но это выглядело бы примерно так: 

class Example extends Component {
  constructor (props) {
    super(props);
    this.fragment = document.createDocumentFragment();
  }

  render() {
    return ReactDOM.createPortal(
      this.children,
      this.fragment
    );

  }
}

2) Создайте пользовательский согласователь.

Если вам нужны данныечтобы быть выведенным в каком-то определенном формате, вместо того, чтобы быть узлами DOM, вы могли бы создать собственный согласователь. Это нетривиальная вещь, которую нужно сделать, и она использует пакет Reaction-Reconciler, который группа реагирования описывает как «экспериментальный», но это даст вам очень точный контроль над тем, что делать с результатами рендеринга.

Если это то, что вы хотите сделать, вы можете прочитать его в readme *1013* Reaction-Reconciler, и это может быть полезно, чтобы посмотреть файлы конфигурации, которые используются для других согласователей (см. "Host config")ссылки в нижней части файла)

...