Question

React悬念是唯一将其用于延迟加载和代码拆分的用例，还是其他一些用例，例如异步数据获取，这是最合适的呢？

Answer 1

在当前版本的React 16.7中，延迟加载是唯一的悬念用例。

React的未来版本（可能从下一个主要版本17开始）将允许将其用于异步数据获取。

另请参阅：

Video of Dan Abramov's talk at React Iceland 2018，他介绍了悬念
article on React suspense。

Answer 2

使用Suspense的好处包括消除了这样的表示获取数据状态的布尔标志的需要。

class Something extends Component {
    state = {loading: true}
    componentDidMount() {        
        fetch('https://example.com')
           .then(() => this.setState({loading: false})
    }

    render() {
       if (this.state.loading) return <Loading />
       return <RealData />
    }
}

通过简单的提取，就可以了。但是，当在UI的不同位置获取大量异步数据时，管理加载布尔值将变得一团糟，并且UI可能会有点混乱（您可以从以下链接观看更多信息：https://www.youtube.com/watch?v=6g3g0Q_XVb4）。使用Suspense，您只需提供一个声明性组件即可在加载期间进行渲染，并且所有Suspense的子代都将遵循上面的示例的加载控件。

反应悬念还将添加对异步数据提取的支持（当前处于实验模式：https://medium.com/@jonatan_salas/a-walk-through-react-experimental-features-562baeb8a63a）

但是，通过本文https://medium.com/@Charles_Stover/react-suspense-with-the-fetch-api-a1b7369b0469的一些改动，您可以将Suspense与异步数据提取一起使用

Answer 3

当前Suspense仅支持lazy组件。将来可能会更改。

如this answer所示，lazy可以与import()之外的其他Promise一起使用，只要惰性组件返回具有default属性的预期模块对象：

const Test = lazy(async () => {
  const data = await fetch('https://jsonplaceholder.typicode.com/posts/42');
  const json = await data.json();  
  const id = json.id;

  return { default: (props) => <div>{id}</div> };
});

...

<Suspense fallback={<LoadingMessage />}>
  <Test />
</Suspense>

除了代码拆分之外，React suspense是否还有其他用例？

3 个答案: