suspense

未完.......

1、作用

异步获取数据，不稳定的 react-cache ，还是用传统的方式比较好

import {unstable_createResource as createResource} from 'react-cache';

const resource = createResource(functionReturnAPromise);

const Foo = () => {

  const result = resource.read();

  return (

    <div>{result}</div>

  );

};

<Suspense><Foo /></Suskpense>

懒加载的 api

// Clock.js

import React from "react";

import moment from "moment";

console.log("init Clock");

const Clock = () => <h1>{moment().format("MMMM Do YYYY, h:mm:ss a")}</h1>;

export default Clock;

// Usage of Clock

const Clock = React.lazy(() => {

  console.log("start importing Clock");

  return import("./Clock");

});

<Suspense fallback={<div>Loading...</div>}>

  { show ? <Clock/> : null}

</Suspense>

2、原理

用了 异常捕获，捕获到的异常，如果是个 promise，在 promise 结果返回后，重新渲染子组件

getDerivedStateFromError(error) {

  if (isPromise(error)) {

      error.then(reRender);

  }

}