javascript https://codesandbox.io/s/8nq4w3jj39このデモ読み解いたもの

Posted 2021-05-04

class App extends React.Component {
  state = {
    showHello: false,
    loadingIndicator: false
  };
  // ボタンおした時発火する関数
  requestData = () => {
    this.setState({
      loadingIndicator: true
    });
    // Fiberの処理を止めないように、低優先度としてロード開始のstateを渡す
    ReactDOM.unstable_deferredUpdates(() => {
      this.setState({
        loadData: true
      });
    });
  };

  render() {
    // 今までと似たような処理だ
    return (
      <div>
        {this.state.loadingIndicator && <p>Requested content:</p>}
        {/*　　loadDataされたら(＝ボタンが押されたら）非同期処理開始 */}
        {this.state.loadData && (
         {/*　AsyncTextをそのまま呼び出せないので、Loaderを渡している。（jsxのエレメント渡すの、あまりキレイじゃない気がしてるけどどうなんだろう */}
          <Loader
            ms={1000}
            fallback={<span>The content is still loading :(</span>}
          >
            <AsyncText text="Hello world" ms={2500} />
          </Loader>
        )}
        <p>
          <button onClick={this.requestData}>load data</button>
        </p>
      </div>
    );
  }
}

// すごい、Timeoutなんて生えるのか・・・？
import React, { Timeout } from "react";

// なんだかめんどくさそうな感じになってきたぞ。
const Loader = props => <Timeout ms={props.ms}>
  {/*Timeoutはchildren as function*/}
  {didTimeout => {
    return didTimeout ? props.fallback : props.children;
  }}
</Timeout>

// SFCとしてAsyncTextを実装
const AsyncText = props => {
  // try cactchはデモ用。通常はいらない
  const data = readText(cache, [props.text, props.ms]);
  return <span>{data}</span>;
};

import　React from "react";
import { createResource, createCache } from "simple-cache-provider";

const cache = createCache();
// このサンプルでは、ただtextを非同期で返しているだけ。msは遅延秒数
const readText = createResource(
  // 第一引数は非同期処理の関数。Promiseを返す
  ([text, ms = 0]) => {
    return new Promise(resolve => {
      console.log(new Date().getTime(), "Promise created, will resolve in ", ms);
      setTimeout(() => {
        resolve(text);
      }, ms);
    });
  },
 // 第二引数となるｆ関数は、キャッシュするためのハッシュのための関数らしい。↓
　　// https://github.com/facebook/react/blob/b15b165e0798dca03492e354ebd5bcf87b711184/packages/simple-cache-provider/src/SimpleCacheProvider.js#L253
 ([text, ms]) => text
);