React: シングルトン反応コンポーネント

作成日 2015年11月27日  ·  5コメント  ·  ソース: facebook/react

やあみんな!
したがって、このアプリケーションでは、「ヘルプセクション」と呼ばれるコンポーネントを作成しています。 これは基本的に、ユーザーがいじっているコンポーネントに関する事前定義されたテキストを表示するボックスです。

「ヘルプセクション」コンポーネントに、どのコンポーネントのヘルプを表示するかを指示できるようにしたい。 今のところ、私はいくつかのアクションとストアでFluxを使用しています。 これはそれほど悪くはなく、非常にうまく機能しますが、この目的のために特別に定義された2つのファイルがある、非常に大きなセットアップです。 他のアクションが原因で「ヘルプセクション」アクションがディスパッチされる(「ディスパッチの途中でディスパッチできません」エラーが発生する)など、私が経験した他の多くの問題もあります。

ただし、「ヘルプセクション」をシングルトンとして定義できれば、「ヘルプセクション」のインスタンスを取得するので、 import helpSection from './HelpSectionだけで完了できます。 私がしなければならないのは、変更したいプロパティを設定して呼び出すメソッドをhelpSection公開することだけです。

コンポーネントが別のコンポーネントを変更することで、Reactの一方向のデータフローを壊すことは知っていますが、それだけの価値がある場合もあります。 私の考えでは、ストア、いくつかのアクション、およびコンポーネントを1つのオブジェクトに組み合わせたようなものです。 多くのコンポーネントは実行時に一度だけインスタンス化されるため、場合によっては非常に役立つことがあります。

このJSfiddle以外では、

私はJavaScriptとReactの初心者なので、いくつかの明らかなポイントを見逃しているかもしれませんが、そうでないことを願っています。
これについてあなたはどう思いますか?
読んでくれてありがとう。

(PSあいまいさで申し訳ありませんが、英語は私の母国語ではありません...:smile :)

Question

最も参考になるコメント

こんにちは@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;
  }
}

もう1つのオプションは、 document.findElementByIdまたは同様の関数を使用してdomNodeを見つけ、それらをReactDOM.findDOMNodeに渡すことです。これにより、「React-Cosmos」を離れることを余儀なくされるため、非常に不快に感じます。

したがって、上記の機能については、インスタンス自体を渡すのではなく、関数に渡す特定のコンポーネントのインスタンスを検索できるようにしたいと思います。 この問題を解決する方法に関する他のアプローチにも興味があります。

@jimfbこれは機能提案の価値がありますか?

全てのコメント5件

これは、Reactコアのバグというよりは、使用法に関する質問のように見えます。 Reactコアのバグを追跡するためにgithubの問題を使用しようとしているため、StackOverflowなどのサイトでは使用法に関する質問への回答が適切です。 このため、この問題を解決しますが、ここで会話を続けるか、StackOverflowに移動してください。

あなたの質問に関して、私の個人的な推奨は、シングルトンを避けることです。
http://stackoverflow.com/questions/137975/what-is-so-bad-about-singletons

返信いただきありがとうございます。
Reactコンポーネントを私が知らないシングルトンとして作成する方法はすでにありますか? (JSfiddleは、先輩の1人によって評価されるまで信頼しません)。 ある場合は、ドキュメントで何も見つからなかったので、私と共有してください。

「コンポーネント間の通信」ドキュメントページから

親子関係を持たない2つのコンポーネント間の通信のために、独自のグローバルイベントシステムを設定できます。
..。
フラックスパターンは、これを調整するための可能な方法の1つです。

ご覧のとおり、シングルトンについては言及されていません。 あなたが提供したStackOverflowリンクでは、多くの人が実際にシングルトンを使用すると便利な場合があると言っていました。 2番目の答えから:

シングルトンは1つ(そして1つだけ)の問題を解決します。
リソースの競合。
あなたがそのリソースを持っている場合
(1)インスタンスは1つだけで、
(2)その単一のインスタンスを管理する必要があります。
シングルトンが必要です。

これは私のユースケースのように聞こえます(そしてReactの世界ではもっとたくさんあります)。

コンポーネントを使用するための適切な方法のように思われるため、これはGitHubの問題として依然として関連していると思います。また、ドキュメントにはそれへの参照が含まれている必要があると思います。

Reactコンポーネントインスタンスには、そのインスタンスがツリー内のどこにあるかを知るために必要な内部状態があります。 同じインスタンスを複数の場所にレンダリングすることはできません。 したがって、シングルトンインスタンスの概念は、Reactの世界では意味がありません。

そのフィドルに示されているのは、主に単一インスタンスの引数のために、私がシングルトンと呼ぶものではありません。それは、独自の状態を持つモジュールのようなものです。 次に、インスタンスがレンダリングされると、囲まれた(ただし実際には「グローバル」)状態が使用されます。 マウントされたインスタンスへの参照を不正に使用してグローバル状態で保存し、マウントされたインスタンスを強制的に更新します。 これで、これらをさらにレンダリングすることを実際に妨げるものは何もありません。その結果、最初のレンダリングが更新されなくなります。 同様のことを簡単に実行して、1を超えるレンダリングをサポートできます。

ドキュメントでこれを参照している場合は、これを行いません。 Reactで実現できるパターンはたくさんありますが、それらすべてについて説明することはしません。

返信に時間を割いていただきありがとうございます、ジェームズ。
まず、私はあなたのポイントを完全に理解し、あなたがJSfiddleを調べたという事実に感謝します。 最後に述べさせていただきます。

  1. 私が「シングルトン」と呼んだのは、アプリ全体で1回だけレンダリングされるReactコンポーネントのインスタンスです。 それが私の出発点でした。 したがって、複数のレンダリングがあまり関連性がない場合に最初の問題が更新されないことについて言及した問題。
  2. グローバル名前空間の「汚染」が嫌われていることは知っていますが、他のコーディングアプローチと同様に、その場所と使用法があります。 この種のことのためにフラックスを使用することは、さまざまな理由で問題があり(私は良い一日かそこらでそれに苦労しました)、今でも私が思いついた解決策はそれほど良くありません(コンポーネントは小道具との間で「選択」しますお店)。 私が説明した方法でシングルトンを使用すると、これがはるかに簡単になります。 メリットはデメリットを上回っていると思います。
  3. あなたが知っている、ドキュメントに関して。 私はReactを約2か月使用していますが、いくつかの点でドキュメントが大幅に不足していることは周知の事実です。 私にとって、Reactの使い方を学ぶのは大変で混乱を招きました。
    ドキュメントには現在、「家族」関係を持たないコンポーネント間の通信に関する3つの文が含まれています。 この種のものに利用できるさまざまなパターンはあなたには明らかだと思いますが、私はこれまでフラックスにしか遭遇していません。
    初心者はドキュメントに大きく依存しており、あらゆる種類の問題を解決するために利用できる可能なパターンをリストすることは、あなたがすべき正確なことです。 私たちは自分でパターンを深く学ぶことができます。どのツールがそのタスクに適しているかを学ぶことは難しい部分です。

大変だったことがもっと楽になりたいです。 それは数行の問題であり、将来的に初心者を助けることができると思います。

私はいつも巨大なコメントを書くことになります..私に固執して読んでくれてありがとう。 :スマイル:

こんにちは@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;
  }
}

もう1つのオプションは、 document.findElementByIdまたは同様の関数を使用してdomNodeを見つけ、それらをReactDOM.findDOMNodeに渡すことです。これにより、「React-Cosmos」を離れることを余儀なくされるため、非常に不快に感じます。

したがって、上記の機能については、インスタンス自体を渡すのではなく、関数に渡す特定のコンポーネントのインスタンスを検索できるようにしたいと思います。 この問題を解決する方法に関する他のアプローチにも興味があります。

@jimfbこれは機能提案の価値がありますか?

このページは役に立ちましたか?
0 / 5 - 0 評価