React: Компонент Singleton React

Это похоже на вопрос использования, а не на ошибку в ядре React. На вопросы об использовании лучше ответить на таких сайтах, как StackOverflow, поскольку мы пытаемся использовать проблемы с github для отслеживания ошибок в ядре React. По этой причине я собираюсь закрыть эту проблему, но не стесняйтесь продолжить разговор здесь или переместить его в StackOverflow.

Что касается вашего вопроса, я лично рекомендую вам избегать одиночных игр.
http://stackoverflow.com/questions/137975/what-is-so-bad-about-singletons

Спасибо за ответ.
Есть ли уже способ создавать компоненты React как одиночные экземпляры, о которых я не знаю? (Я не доверяю JSfiddle, пока он не будет оценен одним из вас, старших). Если есть, поделитесь им со мной, так как я ничего не нашел об этом в документации.

На странице документации «Обмен данными между компонентами» :

Для связи между двумя компонентами, не имеющими отношения родитель-потомок, вы можете настроить свою собственную глобальную систему событий.
...
Шаблон потока - один из возможных способов сделать это.

Как видите, синглтоны не упоминаются. В приведенной вами ссылке на StackOverflow многие люди фактически сказали, что использование синглтонов полезно в некоторых случаях. Из второго ответа:

Синглтоны решают одну (и только одну) проблему.
Разногласия за ресурсы.
Если у вас есть ресурс,
(1) может иметь только один экземпляр, и
(2) вам нужно управлять этим единственным экземпляром,
вам нужен синглтон.

Это похоже на мой вариант использования (и еще немало в мире React).

Я считаю, что это все еще актуально как проблема для GitHub, поскольку кажется подходящим способом использования компонентов, и я думаю, что документы должны содержать ссылку на него.

Экземпляры компонентов React имеют внутреннее состояние, которое необходимо, чтобы знать, где находится этот экземпляр внутри дерева. Вы не можете визуализировать один и тот же экземпляр в нескольких местах. Поэтому идея синглтон-экземпляров не имеет смысла в мире React.

То, что показано в этой скрипке, на самом деле не является тем, что я бы назвал синглтоном в основном из-за аргумента единственного экземпляра - это больше похоже на модуль с собственным состоянием. Затем, когда экземпляр визуализируется, он использует закрытое (но действительно «глобальное») состояние. Он обманывает и сохраняет ссылку на подключенный экземпляр в его глобальном состоянии и принудительно обновляет подключенный экземпляр. Теперь ничто не мешает вам отрендерить больше из них, что приведет к тому, что первый не будет обновлен. Вы могли бы легко сделать что-то подобное и поддерживать рендеринг более 1.

Что касается ссылки на это в наших документах, мы этого делать не будем. Существует множество шаблонов, которые можно реализовать с помощью React, но мы не будем говорить обо всех из них.

Спасибо, что нашли время ответить, Джеймс.
Во-первых, я полностью понимаю вашу точку зрения и ценю тот факт, что вы ознакомились с JSfiddle. Позвольте мне сделать последнее заявление.

1. То, что я имел в виду под «синглтоном», - это экземпляр компонента React, который отображается только один раз во всем приложении. Это было моей отправной точкой. Следовательно, проблема, о которой вы упомянули о том, что первая не обновляется, если рендеринг более 1 не так актуальна.
2. Я знаю, что «загрязнение» глобального пространства имен не одобряется, но, как и любой другой подход к кодированию, он имеет свое место и свое использование. Использование Flux для такого рода вещей проблематично по разным причинам (я боролся с этим в течение хорошего дня или около того), и даже сейчас решение, которое я придумал, не очень хорошее (компонент «выбирает» между реквизитом или хранить). Использование синглтона, как я описал, может сделать это намного проще . Я думаю, что преимущества перевешивают недостатки.
3. Вы знаете, что касается документации. Я использую React около 2 месяцев, и не секрет, что в некоторых моментах сильно не хватает документации. Для меня обучение использованию React было трудным и запутанным.
   В настоящее время документы содержат 3 предложения о связи между компонентами, не имеющими «семейных» отношений. Я понимаю, что для вас очевидно разнообразие доступных шаблонов, но пока я встречался только с Flux.
   Новички в значительной степени полагаются на документацию, и, возможно, перечисление возможных шаблонов, доступных для решения всевозможных проблем, - это именно то, что вам следует сделать. Мы можем самостоятельно изучить шаблоны, узнать, какой инструмент подходит для данной задачи, - самая сложная часть.

Я хочу облегчить то, что мне было тяжело. Я думаю, что это будет вопрос нескольких строк и может помочь новичкам в будущем.

Я всегда заканчиваю тем, что пишу огромные комментарии ... Спасибо, что поддержали меня и прочитали. :улыбка:

Привет @all ,

Я хотел бы оживить этот разговор, добавив еще одну точку зрения. Wir response @ 16 позволяет монтировать компоненты в определенные точки DOM с помощью порталов . Для этого варианта использования я создаю различные компоненты, такие как модальные окна или уведомления, которые должны быть отображены в определенном другом компоненте, который монтируется в моем App.jsx как это.

App.jsx

[...]
render() {
  return (<SingletonOverlay></SingletonOverlay>)
}
[...]

Notification.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import NotificationComponent from './Notification.js';
import SingletonOverlay from '../general/Overlay.js';

export default class Notification extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      element: null
    };
  }

  componentDidMount() {
    this.setState({ element: ReactDOM.findDOMNode(SingletonOverlay) });
  }

  render() {
    return this.state.element
      ? ReactDOM.createPortal(
        <NotificationComponent>That is a notification</NotificationComponent>,
        this.state.element,
      )
      : null;
  }
}

Другой вариант - найти domNode с document.findElementById или подобными функциями и передать их ReactDOM.findDOMNode , что меня очень не устраивает, так как я вынужден покинуть «React-Cosmos».

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

@jimfb стоит ли предлагать эту функцию?