React: Singleton React 구성 요소

이것은 React 코어의 버그 라기보다는 사용법 질문처럼 보입니다. StackOverflow와 같은 사이트에서는 React 코어에서 버그를 추적하기 위해 github 문제를 사용하려고하므로 사용 질문에 대한 답변이 더 좋습니다. 이러한 이유로이 문제를 해결하려고하지만 여기에서 대화를 계속하거나 StackOverflow로 이동하십시오.

귀하의 질문과 관련하여 저의 개인적인 권장 사항은 싱글 톤을 피하는 것입니다.
http://stackoverflow.com/questions/137975/what-is-so-bad-about-singletons

답장을 보내 주셔서 감사합니다.
내가 알지 못하는 싱글 톤으로 React 컴포넌트를 생성하는 방법이 이미 있습니까? (나는 선배 중 한 명이 평가할 때까지 JSfiddle을 신뢰하지 않습니다). 있는 경우 문서에서 찾을 수 없으므로 나와 공유하십시오.

"구성 요소 간 통신"문서 페이지에서 :

부모-자식 관계가없는 두 구성 요소 간의 통신을 위해 자체 글로벌 이벤트 시스템을 설정할 수 있습니다.
...
플럭스 패턴은 이것을 배열하는 가능한 방법 중 하나입니다.

보시다시피 싱글 톤은 언급되지 않았습니다. 당신이 준 StackOverflow 링크에서 많은 사람들이 실제로 싱글 톤을 사용하는 것이 어떤 경우에 유용하다고 말했습니다. 두 번째 답변에서 :

싱글 톤은 하나의 문제를 해결합니다.
자원 경합.
자원이 있다면
(1) 단일 인스턴스 만 가질 수 있습니다.
(2) 단일 인스턴스를 관리해야합니다.
싱글 톤이 필요합니다.

이것은 내 유스 케이스처럼 들립니다 (그리고 React 세계에서는 꽤 많이).

구성 요소를 사용하는 관련 방법처럼 보이므로 GitHub의 문제로 여전히 관련이 있다고 생각하며 문서에 이에 대한 참조가 포함되어야한다고 생각합니다.

React 구성 요소 인스턴스에는 해당 인스턴스가 트리 내부에있는 위치를 파악하는 데 필요한 내부 상태가 있습니다. 동일한 인스턴스를 여러 위치에서 렌더링 할 수 없습니다. 따라서 싱글 톤 인스턴스의 개념은 React 세계에서 의미가 없습니다.

그 바이올린에 표시된 것은 실제로 단일 인스턴스 인수로 인해 싱글 톤이라고 부르는 것이 아닙니다. 자체 상태를 가진 모듈과 비슷합니다. 그런 다음 인스턴스가 렌더링 될 때 포함 된 (그러나 실제로는 "전역") 상태를 사용합니다. 글로벌 상태에서 마운트 된 인스턴스에 대한 참조를 속이고 저장하고 마운트 된 인스턴스에 대한 업데이트를 강제합니다. 이제 실제로 더 많은 것을 렌더링하는 것을 막을 수는 없습니다. 이로 인해 첫 번째 항목이 업데이트되지 않습니다. 유사한 작업을 쉽게 수행하고 1 개 이상의 렌더링을 지원할 수 있습니다.

우리 문서에서 이것을 참조하는 것에 관해서는 그렇게하지 않을 것입니다. React로 달성 할 수있는 많은 패턴이 있지만 모두에 대해 이야기하지는 않겠습니다.

시간을내어 답장 해 주셔서 감사합니다, James.
첫째, 귀하의 요점을 완전히 이해하고 JSfiddle을 살펴본 사실에 감사드립니다. 마지막으로 말씀 드리겠습니다.

1. 내가 "싱글 톤"이란 의미는 앱 전체에서 한 번만 렌더링되는 React 구성 요소의 인스턴스입니다. 그것이 나의 출발점이었습니다. 따라서 1 개 이상 렌더링하는 경우 업데이트되지 않는 첫 번째 문제에 대해 언급 한 문제는 그다지 적절하지 않습니다.
2. 나는 글로벌 네임 스페이스를 "오염시키는"것이 눈살을 찌푸리고 있다는 것을 알고 있지만, 어떤 코딩 접근법과 마찬가지로 그것은 장소와 용도가 있습니다. 이런 종류의 일에 Flux를 사용하는 것은 여러 가지 이유로 문제가 있습니다 (좋은 하루 동안 어려움을 겪었습니다). 그리고 지금도 제가 생각 해낸 솔루션은 그다지 좋지 않습니다 (컴포넌트가 소품 또는 저장). 내가 설명한 방식으로 싱글 톤을 사용하면 이것을 훨씬 쉽게 만들 수 있습니다. 장점이 단점보다 크다고 생각합니다.
3. 문서와 관련하여 알다시피. 저는 약 2 개월 동안 React를 사용해 왔으며 어떤 시점에서 문서가 심각하게 부족한 것은 비밀이 아닙니다. 저에게 React 사용법을 배우는 것은 어렵고 혼란 스러웠습니다.
   문서에는 현재 "가족"관계가없는 구성 요소 간의 통신에 대한 3 개의 문장이 포함되어 있습니다. 나는 이런 종류의 일에 사용 가능한 다양한 패턴이 당신에게 명백하다는 것을 이해하지만 지금까지 Flux를 만났습니다.
   초보자는 문서에 크게 의존하며, 모든 종류의 문제를 해결하는 데 사용할 수있는 가능한 패턴을 나열하는 것이 정확한 작업 일 수 있습니다. 우리는 스스로 패턴을 심도있게 배울 수 있으며, 어떤 도구가 작업에 적합한 지 배우는 것이 어려운 부분입니다.

나에게 힘들었던 일을 더 쉽게 만들고 싶다. 몇 줄의 문제가 될 것이며 앞으로 초보자에게 도움이 될 것이라고 생각합니다.

나는 항상 엄청난 댓글을 쓰게되는데 .. 함께 읽어 주셔서 감사합니다. :미소:

안녕하세요 @all ,

다른 관점을 추가하여이 대화를 되 살리고 싶습니다. Wir react @ 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;
  }
}

다른 옵션은 document.findElementById 또는 유사한 기능이있는 domNode를 찾아서 ReactDOM.findDOMNode 에 전달하는 것입니다. 그러면 "React-Cosmos"를 강제로 종료해야하므로 기분이 매우 좋지 않습니다.

따라서 위에서 언급 한 기능에 대해 인스턴스 자체를 전달하는 대신 함수에 전달하는 특정 구성 요소의 인스턴스를 검색 할 수 있기를 바랍니다. 이 문제를 해결하는 방법에 대한 다른 접근 방식에도 관심이 있습니다.

@jimfb 이 기능 제안의 가치가 있습니까?