悬念反应 - Javascript

什么是悬念反应？

悬念反应 (Suspense) 是 React 16.6 中引入的新特性，它提供了一种优雅的方式来处理异步数据的加载状态以及错误处理。悬念反应的核心是 suspense 组件，这是一个异步边界，它可以将异步数据加载过程中可能出现的状态切换视为一种“暂停”。

如何使用悬念反应？

在 React 16.6 之前，我们通常通过显示空占位符或者 loading 动画来处理异步数据的加载状态。React 16.6 引入的悬念反应更加优雅的处理数据加载状态。以下是悬念反应的使用方法：

1. 导入React和ReactDOM：

   import React from 'react';
   import ReactDOM from 'react-dom';
   

2. 创建需要异步加载的组件：

   function AsyncComponent() {
       // 返回一个promise对象，该promise对象会resolve为需要异步加载的数据
       const promise = fetchData();
   
       //通过throw语句将promise抛出，使它触发suspense组件
       throw promise;
   
       // 达到效果的关键在于组件的返回值只有promise对象，而不是JSX元素
   }
   

3. 在父组件中使用suspense组件将异步组件包装：

   function App() {
       return (
           <div>
               <h1>悬念反应演示</h1>
               <React.Suspense fallback={<div>Loading...</div>}>
                   <AsyncComponent />
               </React.Suspense>
           </div>
       );
   }
   

   在父组件的render方法中，通过返回一个 React.Suspense 组件，并在 fallback 属性中指定一个加载状态的 JSX 元素。React.Suspense 组件会将包裹的异步组件“暂停”，直到异步组件 resolve 成功或错误。

   如果异步组件 resolve 成功，React 会渲染异步组件的结果。如果异步组件 resolve 失败，React 会将错误传递给父组件处理。

悬念反应的注意事项

• 悬念反应只适用于异步组件的加载状态和错误处理，不适用于异步事件处理等其他场景。
• 悬念反应使用的是一种全新的组件渲染方式，需要 React 16.6 或更高版本的支持。