データの取得方法

データを取得したいときには、約束を取り扱っています.

約束は解決し成功だ

その約束は解決されて失敗したErrorBoundary コンポーネント

約束は保留状態にあるSuspense component )

このようにして、私たちのコードはどのように高レベルになるでしょう.

function App() {
  return (
    <>
    <ErrorBoundary>
      <Suspense fallback={<h1>Loading blog...</h1>}>
        <BlogPost resource={resource1} />
        <Share />
      </Suspense>
      </ErrorBoundary>
    </>
  );
}

BlogPost それは約束の状態を読むコンポーネントです.

function BlogPost({resource:{read}}) {
  const {title,body} = read();
  // ...

どこresource 関数によって生成されるオブジェクトですcreateResource :

const resource1=createResource(fetchPosts(0))

の定義を見てみましょうcreateResource :

function createResource(promise){
    let error,response
    promise.then(r=>response=r).catch(e=>(error=e))
    return {
        read(){
            if(error)throw error
            if(response) return response
            throw promise
        }
    }
}

ご覧の通りread 関数は、プロミス、エラー、または応答の成功を返すことができます.それは約束は、キャッチされますSuspense コンポーネントとフォールバック支柱をレンダリングします.このエラーはErrorBoundary 私たちがSECで見るつもりであるコンポーネント、そしてErrorScreen コンポーネント.約束が正常に解決されると、Suspense が表示されます.
これがErrorBoundary コンポーネント

import {Component} from 'react'

function ErrorScreen({error:{message}}){
    return <div>
        Something went wrong: {message}
        </div>
}

class ErrorBoundary extends Component{
    state={error:null}
    static getDerivedStateFromError(e){
        return {error:e}
    }
    render(){
        const {children,fallback}=this.props
        const {error}=this.state
        if(error&&!fallback)return <ErrorScreen error={error} />
        if(error)return <fallback error={error} />
        return children
    }
}

export default ErrorBoundary

ご覧のように、それはSuspense 一つは、Afallback この場合、デフォルトはErrorScreen コンポーネント.
の定義で見ましょうfetchPosts() 機能

  let blogPosts = [
    {
      id: 1,
      title: 'qui est esse',
      body: 'est rerum tempore vitae\nsequi sint nihil reprehenderit'
    },
  ];

  export function fetchPosts(id) {
    let post = blogPosts[id];
    return new Promise((resolve) => {
      setTimeout(() => {
        console.log("fetched blogs");
        resolve(post);
      }, 2000);
    });
  }

我々が見ることができるように、それは約束を返します.
完了のために、の定義で見ましょうBlogPost and Share コンポーネント

function Share() {
  useEffect(() => {
    console.log("Effect Share");

    return () => {
      console.log("Cleanup Share");
    };
  });

  console.log("Render Share");
  return (
    <div>Share:&nbsp;
      <span> twitter</span>
      <span> reddit</span>
    </div>
  )
}

function BlogPost({resource:{read}}) {
  const {title,body} = read();

  useEffect(() => {
    console.log("Effect BlogPost");
    return () => {
      console.log("Cleanup BlogPost");
    };
  });

  return (
    <div>
      <h1>Blog Post</h1>
      <h3>{title}</h3>
      <span>{body}</span>
    </div>
  );
}

そして、これはアプリケーションを実行するときのコンソール上の出力です.

あなたが見ることができるように、反応18Share コンポーネントはBlogPost 準備ができています.なぜなら、彼らはすべての子供たちに属しているからですSuspense コンポーネント.私たちが代わりに反応17を使用するならば、これはコンソールの出力です:

あなたが見ることができるように、それは最初にレンダリングShare 約束を解決する前に、そして、約束が正常に解決されたあと、それはBlogPost コンポーネント.