コンポーネント間で必要な変数、オブジェクト、プロパティ、メソッドのグローバル オブジェクトをウィンドウ上に作成してもよいですか?
私には、これはシンプルで簡単かつ直接的なアプローチのように思えます。プロジェクトに取り組んでいる全員がこのグローバル オブジェクトを認識している限り、安全です。
コンポーネント間のアクセスについては、次のことを確認しました。
プロペラ穴あけ [1]。退屈で間違いが起こりやすい。一部の人には悪い習慣と考えられています。
リダックス[2]。大規模なプロジェクトに適していますが、参加することもできます。
コンテキスト[3]。若干の痛みもあります。一見すると、よりオーバーヘッドのある、グローバルを作成する別の方法のように見えます。
グローバルは米国のメートル法、つまり「悪」と「悪魔から」のようにみなされることが多いことを私は知っています。その理由は、プログラマーがお互いを踏みにじる可能性があるからです...古典的な foo bar の例を思い出してください。以前は、誰もがこれらの変数をグローバル スコープで使用するのが大好きで、その値は上書きされてしまいます。ただし、グローバル クラスの名前が競合を最小限に抑え、プロジェクトの他の開発者がその使用を認識している限り、安全だと思います。
他のグローバルな状態システムによる歪みを考慮すると、これは有効な使用例である可能性があると思います。
完全で最小限の検証可能な例
いくつかの変数、配列、プロパティとゲッター/セッター メソッドを備えた Cheese オブジェクトをどのようにハングするかに注目してください。
class Cheese {
constructor(brand, type) {
this.brand = brand;
this.type = type
}
getBrand() { return this.brand; }
setBrand(b) { this.brand =b; return 0; }
}
window.myGlobal = {}
window.myGlobal["swiss"] = new Cheese("Jarlsberg", "Swiss")
window.myGlobal["cheese"] = ["Swiss", "Cheddar", "Brie"]
window.myGlobal["version"] = "0.1.5"
...コンポーネントから何かが必要な場合:
console.log(window.myGlobal.swiss.getBrand()) //-> "Swiss"
console.log(window.myGlobal.cheese[1]) //-> "Cheddar"
console.log(window.myGlobal.version) //-> "0.1.5"
参考文献:
https://kentcdodds.com/blog/prop-drilling
https://redux.js.org/
https://reactjs.org/docs/context.html
1
この場合の主な問題は、値が変更されたときにコンポーネントを (簡単に) 再レンダリングできないことです。 Redux が複雑すぎると思われる場合は、MobX が軽量な代替手段となります。
– シークレット ガイ
2020 年 9 月 3 日 15:56
2
この場合、何かが変更されたときにコンポーネントを再レンダリングすることはできません。再レンダリングする必要がない場合は、追加のヘルパーを作成するだけで済みます。必要なときに必要なものを ile してインポートします) しかし、小規模な場合には、Context はシンプルであり、必要なことを行うことができます。
– ホバキミャン
2020 年 9 月 3 日 16:01
------------------------
ウィンドウ グローバル変数を使用すると、変数の状態を追跡できず、リアクティブではありません (コンポーネントはその変更をリッスンしません)。また、これらの変数は安全ではなく、コンポーネントの外側で変更される可能性があります。たとえば、ユーザーがブラウザ コンソールを開き、変数に他の値を設定します。
Vuex 公式ドキュメント (Vue.js の Redux に相当) より彼らは言います:
それでは、コンポーネントから共有状態を抽出して、それをグローバル シングルトンで管理してはどうでしょうか?これにより、コンポーネント ツリーが大きな「ビュー」になり、コンポーネントがツリー内のどこにあるかに関係なく、すべてのコンポーネントが状態にアクセスしたり、アクションをトリガーしたりできるようになります。
状態管理に関連する概念を定義および分離し、ビューと状態間の独立性を維持するルールを適用することで、コードの構造と保守性が向上します。
グローバル シングルトンとは、一度インスタンス化されたクラスを意味し、 window などのアプリ全体からフィールドやメソッドにアクセスします。
