javascript - 为可重用的 React 组件存储全局变量的最佳方法是什么？

Question

我正在构建一个 React 组件(想象一个按钮)，单击时会发出网络请求。该组件可能会在同一页面上多次渲染，但网络请求只需要发生一次。因此，我想存储一个变量 networkRequestWasMade，以便在发出请求之前进行检查。

通常，我会找到一个共同的父级并将其包装在 React 的上下文机制中。但是，该组件将成为可重用组件库的一部分，该组件库将在许多应用程序(可能有数百个)中使用，因此我希望它不依赖于特定的父组件或上下文来存储这个值。我正在集体讨论实现这一目标的最佳方法。

一个非常简单的解决方案是将 bool 值附加到 window 对象:

function Button() {

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

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

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

Answer 1

尽量不要使用全局变量，这是一个不好的做法。您只需将 promise 存储到一个变量中，并仅在第一次时对其进行初始化。

这是一个使用 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 并且您不关心结果，但您明白了。