為可重用的 React 組件存儲全局變量的最佳方法是什么？

Question

我正在構建一個 React 組件（想想一個按鈕），它在點擊時發出網絡請求。 這個組件可以在同一個頁面上多次渲染，但是網絡請求只需要發生一次。 因此，我想存儲一個變量networkRequestWasMade ，以便在發出請求之前進行檢查。

通常，我會找到一個共同的父級並將其包裝在 React 的上下文機制中。 但是，這個組件將成為一個可重用組件庫的一部分，該庫將在許多應用程序（想想數百個）中使用，所以我希望它不依賴於特定的父組件或上下文來存儲這個值。 我正在集思廣益什么是實現這一目標的最佳方式。

一個非常簡單的解決方案是將布爾值附加到window對象：

function Button() {

  const handleClick = () => {
    if (!window.networkRequestWasMade) {
      // ...make request...
      window.networkRequestWasMade = true
    }
  }

  return <button onClick={handleClick}>Click me!</button>
}

但是，我想知道是否有更好的模式。

Answer 1

盡量不要使用全局變量，這是一個不好的做法。 您只需要將承諾存儲到一個變量中並僅在第一次初始化它。

這是一個使用axios進行 http 調用的示例

// util.js
let p;

function loadData() {
  if (!p) {
    p = axios.get('uri')
      .then(response => result = response.data);
  }

  return p;
}

那么你的組件可以多次調用loadData函數，http 調用只會執行一次

// Button.jsx
import { loadData } from './util'

function Button() {

  const handleClick = () => {
    loadData()
      .then(data => {
        // do what you want with the data
      })
   }

   return <button onClick={handleClick}>Click me!</button>
}

也許 http 請求不是GET ，您不關心結果，但您明白了。