Suspense

Suspense lets components “wait” for an asynchronous operation until it finishes rendering.

Suspense is not a library for data requests, but a mechanism. This mechanism is used to communicate to the React library that a component is reading data that is not currently available. After communicating, React can continue to wait for the data to return and update the UI.

const Index=props= >{
  return <div>
    <Row gutter={} [12, 14]>
      <Col span={12}>
        <Suspense fallback={<Spinner />} ><UserInfo userinfo={sus1} title="sus-test1" />
        </Suspense>
      </Col>
      <Col span={12}>
        <Suspense fallback={<Spinner />} ><Allusers users={sus2} title="sus-test2" />
        </Suspense>
      </Col>
    </Row>
    <Row gutter={} [12, 14]>
      <Col span={12}>
        <Suspense fallback={<Spinner />} ><UserInfo userinfo={userinfo} />
        </Suspense>
      </Col>
      <Col span={12}>
        <Suspense fallback={<Spinner />} ><Allusers users={users} />
        </Suspense>
      </Col>
    </Row>
  </div>;
};

Copy the code

Start getting data as early as possible, before rendering.

const UserInfo=({userinfo,title}) = >{
  const {result}=userinfo.read();
  const info=Object.keys(result).map(v= >({key:v,value:result[v]}));
  return <div style={containerStyles}>
    <h2>{title | | 'personal information'}</h2>
    {
      info.map(({key,value})=><div><span>{key} :</span><span>{value}</span></div>)}</div>;
};
const Allusers=({users,title}) = >{
  const {result}=users.read();
  return <div style={containerStyles}>
    <h2>{title | | 'users' information'}</h2>
    <Table dataSource={result} columns={columns} />
  </div>;
};

Copy the code

In useRouter, loadData and resolve also start fetching data before rendering. The differences between suspense and Resolve are: LoadData and Resolve update interfaces through setState, while Suspense calls read and catch asynchronous states to select render content.

UseRouter implements asynchronous rendering:

router.jsx

{
  path:'/suspense'.name:'suspense'.icon:<LayoutOutlined />,
  loadData:{
    userinfo:findFn,
    users:findAllFn,
  },
  component:() = >import('.. /app/tools/suspense'),}Copy the code

suspense/index.jsx

const Index=props= >{
  let{userinfo,users}=props; userinfo=userinfo? .result; users=userinfo? .users;return <div>
    <Row gutter={} [12, 14]>
      <Col span={12}>
        {userinfo?<UserInfo userinfo={userinfo} />:<Spinner />}
      </Col>
      <Col span={12}>
        {users?<UserInfo users={users} />:<Spinner />}
      </Col>
    </Row>
  </div>;
};

Copy the code

Suspense is the same as using Suspense.

ErrorBoundary

The error boundary is a React component that catches and prints JavaScript errors that occur anywhere in its child tree, and instead of rendering the broken child tree, it renders the alternate UI. Error bounds catch errors during rendering, in lifecycle methods, and in constructors throughout the component tree.

The granularity of the error boundary is up to you, and you can wrap it around the topmost routing component and present the user with an “Something went wrong” error message, just as server-side frameworks often handle crashes. You can also wrap individual parts around error boundaries to protect the rest of your application from crashing.

UseRouter by default adds an ErrorBoundary to the route to display the current error message, but you can also customize the display interface.

import React from 'react';

export default class ErrorBoundary extends React.Component{
  state={
    error:null};static getDerivedStateFromError(error){
    return {error};
  }
  render(){
    const {error}=this.state;
    const {fallback,children}=this.props;
    if(error){
      return fallback(error);
    }
    returnchildren; }}Copy the code

loadError

Customize error display content.

loadError(new Error('loadError'))

Copy the code

ErrorBoundary

Fallback is what is displayed when an error occurs.

<ErrorBoundary fallback={(error,info) = >loadError(error,info)}>
  <Comp />
</ErrorBoundary>

Copy the code

HandleError

<HandleError>
  <Comps />
</HandleError>

Copy the code