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

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

通常，我会找到一个公共父对象并将其包装在React的上下文机制中。但是，该组件将成为可重用组件库的一部分，该组件库将在许多应用程序中使用（考虑数百种），因此，我希望它不依赖特定的父组件或上下文来存储此值。我正在集思广益，这将是实现此目标的最佳方法。

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

function Button() {

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

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

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

最佳答案

尽量不要使用全局变量，这是一个坏习惯。您只需要将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，并且您并不关心结果，但是您知道了。

关于javascript - 为可重用的React组件存储全局变量的最佳方法是什么？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/60420051/