Javascript 需要帮助了解此代码如何使用ReactJS从RedditAPI访问数据吗

好的，我这里有这个代码

  componentDidMount() {
    var _this = this;
    var cbname = `fn${Date.now()}`;
    var script = document.createElement("script");
    script.src = `https://www.reddit.com/reddits.json?jsonp=${cbname}`;

    window[cbname] = function(jsonData) {
      _this.setState({
        navigationItems: jsonData.data.children
      });
      delete window[cbname];
      document.head.removeChild(script);
    };

    document.head.appendChild(script);
  }

我完全搞不清楚它是如何访问reddit.json调用来检索数据的，对于刚刚了解ReactJS工作原理的人来说，这看起来非常混乱。 此外，这是状态+组件构造函数，如果需要：

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      activeNavigationUrl: "",
      navigationItems: [],
      storyItems: [],
      title: "Please select a sub"
    };
  }

对于参考的其余代码，代码段位于src/app.js

通过查看上面的代码，我了解了实例化script.src的所有内容

---

在那之后，我不明白发生了什么，甚至连窗口[cbname]部分也不明白。我试着用谷歌搜索它的各个部分，但它太让人困惑了，特别是window[cbname]到底做了什么，以及为什么代码块在删除它之后会在文档的头部附加一个子（脚本）。

这是使用JSONP API，它本质上要求API将JSON包装到函数回调中

例如

{“foo”：“bar”}

with

callback=foo

将调用名为

foo

的全局函数，并将JSON作为对象传递

在本例中，它将

window['fn'+Date.now（）]

注册为回调。一旦API调用它，它就会设置状态并删除全局函数

看

---

TLDR:JSONP需要在窗口对象上使用全局函数。调用时，它设置状态并删除自身和脚本标记。JSONP有助于绕过CORS

这是在使用JSONPAPI，它本质上需要API将JSON包装到函数回调中

例如

{“foo”：“bar”}

with

callback=foo

将调用名为

foo

的全局函数，并将JSON作为对象传递

在本例中，它将

window['fn'+Date.now（）]

注册为回调。一旦API调用它，它就会设置状态并删除全局函数

看

---

TLDR:JSONP需要在窗口对象上使用全局函数。调用时，它设置状态并删除自身和脚本标记。JSONP有助于规避CORS

谢谢！这解释得很好，谢谢！这很好地解释了这一点