这个特定的 ReactJs 代码如何执行初学者问题?

PlaceholderImages().then(images => {...

首先进入你的堆栈的是方法PlaceholderImages.因此，您应该查看它的代码.

您将看到它返回一个带有两个参数的新 Promise:2 个回调函数，一个用于成功(解决)，另一个用于 API 请求失败(拒绝).当您使用 axios(第 3 方库)使用 GET 方法执行 HTTP 请求时，会发生 API 请求.

同样，您有一个异步函数，并且 .then() 方法仅在 axos.get() 返回时调用.如果它从不返回任何内容，您将永远不会执行 then() 函数.

此时，您的堆栈(LIFO 服务规则)将有以下方法来执行:

PlaceholderImages() ->匿名函数()* ->新的承诺()->axios.get();

PlaceholderImages() 直到所有其他方法都执行完毕后才会执行.如果 axios.get() 方法未能收集到所需的数据，一旦您返回到代码的 PlaceholderImages().then() 部分，您将不会没有要渲染的图像.因此，无论如何都不会渲染任何内容.

I'm a beginner and are reading lots of code and now I wonder about the below code
I understand what this code is doing what I need clarification on is the code flow.

I see images loading when I run it:

1. Is React executing the code from top to bottom?
2. The PlaceholderImages async get's the images right but will App Component start to render with out images if it takes time? If so I dont see any setState that will notify App. I probably get it wrong!

This code is from this Sandbox.

This is index.js

import React from "react";
import ReactDOM from "react-dom";
import Masonry from "./Masonry";
import VerticalMasonry from "./VerticalMasonry";
import { sample, uniqueId } from "lodash";
import PlaceholderImages from "./PlaceholderImages";
import ItemRenderer from "./ItemRenderer";

PlaceholderImages().then(images => {
  function addItems(amount = 10) {
    return new Array(amount).fill("").map(i => {
      const id = uniqueId();
      const image = sample(images);

      const width = 480;
      const height = Math.round((480 / image.width) * image.height);
      const imageUrl = `https://picsum.photos/${width}/${height}?image=${
        image.id
      }`;

      return {
        id,
        key: id,
        ratio: 1 / (image.width / image.height),
        backgroundImage: `url(${imageUrl})`,
        background: `rgb(${Math.ceil(Math.random() * 256)}, ${Math.ceil(
          Math.random() * 256
        )}, ${Math.ceil(Math.random() * 256)})`,
        title: "Lorem ipsum dolor sit amet",
        description:
          "At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."
      };
    });
  }

  let Items = addItems();

  class App extends React.Component {
    state = {
      columns: 3,
      items: Items,
      gutter: 16,
      outerGutter: true,
      debug: true,
      vertical: true
    };

    addItems() {
      this.setState({
        items: this.state.items.concat(addItems(20))
      });
    }

    render() {
      const {
        items,
        width,
        gutter,
        outerGutter,
        debug,
        vertical,
        fullscreen
      } = this.state;

      const LeComponent = vertical ? Masonry : VerticalMasonry;

      return (
        <div>
          <div
            style={{
              position: fullscreen && "absolute",
              zIndex: 2
            }}
          >
            <label htmlFor="gutter">Gutter</label>
            <input
              id="gutter"
              type="number"
              step={1}
              min={0}
              max={32}
              value={gutter}
              onChange={e => {
                this.setState({
                  gutter: parseInt(e.target.value)
                });
              }}
            />
            <button
              onClick={() => this.setState({ outerGutter: !outerGutter })}
            >
              Outer Gutter: {outerGutter ? "On" : "Off"}
            </button>
            <button onClick={() => this.setState({ debug: !debug })}>
              debug
            </button>
            <button onClick={() => this.setState({ vertical: !vertical })}>
              {vertical ? "Vertical" : "Horizontal"}
            </button>
            <button onClick={() => this.setState({ width: 360 })}>360</button>
            <button onClick={() => this.setState({ width: 480 })}>480</button>
            <button onClick={() => this.setState({ width: 640 })}>640</button>
            <button onClick={() => this.setState({ width: 728 })}>728</button>
            <button onClick={() => this.setState({ width: 960 })}>960</button>
            <button onClick={() => this.setState({ width: "100%" })}>
              100%
            </button>
            <button onClick={() => this.setState({ fullscreen: !fullscreen })}>
              {fullscreen ? "Fullscreen off" : "Fullscreen on"}
            </button>
          </div>
          <div
            style={{
              width,
              height: !fullscreen && 600,
              position: fullscreen ? "initial" : "relative",
              margin: "0 auto"
            }}
          >
            <LeComponent
              infinite
              items={items}
              itemRenderer={ItemRenderer}
              gutter={gutter}
              outerGutter={outerGutter}
              extraPx={0}
              debug={debug}
              rows={{
                0: 1,
                320: 2,
                480: 3,
                640: 4
              }}
              cols={{
                0: 1,
                360: 2,
                640: 2,
                960: 3,
                1280: 4,
                1400: 5,
                1720: 6,
                2040: 7,
                2360: 8
              }}
              onEnd={() => {
                this.addItems();
              }}
            />
            <style>
              {`body {
                background-color:  white;
              }`}
            </style>
          </div>
        </div>
      );
    }
  }

  const rootElement = document.getElementById("root");
  ReactDOM.render(<App />, rootElement);
});

This is the PlaceholderImages.js

import axios from "axios";
import { sampleSize } from "lodash";

export default async () => {
  return new Promise((resolve, reject) => {
    axios.get("https://picsum.photos/list").then(res => {
      console.log(res.data[0]);
      return resolve(sampleSize(res.data, 50));
    });
  });
};

PlaceholderImages().then(images => {...

The first thing entering your stack here is the method PlaceholderImages. Thus, you should look at its code.

You will see it returns a new Promise that takes two arguments: 2 callback functions, one in case of success (resolve) and the other in case of failure (reject) of your API request. The API request happens when your perform a HTTP Request with the method GET using axios (a 3rd party library).

Again, you have an asynchronous function and the .then() method is only invoked once axos.get() returns something. If it never returns anything, you will never execute the then() function.

At this point, your stack (LIFO service discipline) will have the following methods to execute:

PlaceholderImages() -> anonymous function()* -> new Promise() -> axios.get();

PlaceholderImages() won't be executed until all the other methods are executed. If the axios.get() method fails to gather the desired data, once you are back to the PlaceholderImages().then() part of the code, you won't have any images to render. Thus, nothing will be rendered anyway.