react Suspense是干嘛的

React Suspense 是一个用于处理异步组件加载的 React 组件。它可以使得在异步加载组件时，组件的渲染被暂停，直到该组件及其所需的数据在加载完成后再继续渲染。这样可以避免在数据未加载完成时组件渲染的错误和不必要的用户界面卡顿。同时，它也可以使得在加载过程中展示一个自定义的加载指示器，来提高用户体验。

相关问题

react中reconcile是干嘛的

在React中，reconcile是指将新的虚拟DOM树与旧的虚拟DOM树进行比较，并尽可能地复用旧的DOM节点来更新视图，从而避免不必要的DOM操作和重新渲染，提高性能。

具体来说，reconcile会遍历新旧虚拟DOM树，将它们进行匹配，找到需要更新的节点，并进行更新操作。如果在新旧虚拟DOM树中找到相同的节点，React会复用这个节点及其子节点，只更新节点的属性。如果在新虚拟DOM树中找不到对应的节点，则说明这是一个新节点，需要在DOM树中创建一个新节点来渲染。

总的来说，reconcile是React中一个非常重要的过程，它可以最大程度地减少DOM操作，提高应用的性能。

react路由跳转动画Suspense

React Router v5.1.0 引入了一个新的组件 `Suspense`，它可以用来包裹异步加载的组件或者路由，当异步加载的组件还没有加载完成时，`Suspense` 可以展示一些占位符，当加载完成时再渲染实际的组件。

在路由跳转时，我们可以将异步加载的组件包裹在 `Suspense` 中，并设置一个 `fallback` 属性，用来展示路由跳转动画或者占位符。

例如，我们可以创建一个 `FadeIn` 组件用来展示路由跳转动画，并将异步加载的路由组件包裹在 `Suspense` 中：

import React, { Suspense } from 'react';
import { Switch, Route } from 'react-router-dom';
import FadeIn from './FadeIn';
import Home from './Home';
const About = React.lazy(() => import('./About'));

function App() {
  return (
    <div>
      <Switch>
        <Route exact path="/" component={Home} />
        <Suspense fallback={<FadeIn>加载中...</FadeIn>}>
          <Route path="/about" component={About} />
        </Suspense>
      </Switch>
    </div>
  );
}

在上面的代码中，我们使用 `React.lazy` 来异步加载 `About` 组件，并将其包裹在 `Suspense` 中。当 `About` 组件还没有加载完成时，`Suspense` 会展示一个 `fallback` 属性中的占位符，即 `FadeIn` 组件展示的路由跳转动画。

需要注意的是，`Suspense` 组件只能包裹直接渲染的组件或者路由，不能包裹函数式组件或者其他非直接渲染的组件。另外，React Router v5.1.0 引入的 `Suspense` 组件只能用于异步加载的组件，不能用于同步加载的组件。