关于 React Suspense 和并发模式

React 路线图上的下一个重点是并发模式和Suspense。
它们相互关联且相辅相成，所以人们有时会混淆它们。但它们代表着截然不同的概念。

并发模式

要理解并发模式，请思考优先级。

如果没有并发模式，当 React 开始渲染某些内容时，它会一直渲染直到完成。

在并发模式下，React 会关注其他需要完成的任务，如果有优先级更高的任务，它会暂停正在渲染的任务，让其他任务先完成。这个“其他任务”可能是：

浏览器需要做的事情
React 需要渲染的另一个更新
其他库或应用程序代码中的任何其他任务

import {
  useState,
  takeYourTimeToRenderThisUpdate,
  iNeedThisUpdateAsSoonAsPossible
} from "fictitious-react";

function SlowButLowPriorityComponent() {
  const [someData, changeData] = useState(0);
  return (
    <div>
      <BigComponentThatTakesVeryLongToRender someProp={someData} />
      <button
        onClick={() => {
          takeYourTimeToRenderThisUpdate(() =>
            changeData(prevData => prevData + 1)
          );
        }}
      >
        Expensive but low priority change
      </button>
    </div>
  );
}

function FastAndHighPriorityComponent() {
  const [someData, changeData] = useState(0);
  return (
    <div>
      <SmallComponentThatRendersFast someProp={someData} />
      <button
        onClick={() => {
          iNeedThisUpdateAsSoonAsPossible(() =>
            changeData(prevData => prevData + 1)
          );
        }}
      >
        Fast and high priority change
      </button>
    </div>
  );
}

function App() {
  return (
    <div>
      <SlowButLowPriorityComponent />
      <FastAndHighPriorityComponent />
    </div>
  );
}

// If the user clicks first the SlowButLowPriorityComponent button
// and then the FastAndHighPriorityComponent button
// React will stop rendering SlowButLowPriorityComponent
// and finish rendering FastAndHighPriorityComponent (with its new state) first
// only then it will continue with the SlowButLowPriorityComponent update

您不需要为每个更新明确设置优先级，如果您不这样做，React 将尝试猜测正确的优先级。

悬念

对于悬念，请考虑等待。

如果没有 Suspense，如果您的组件需要等待任何依赖项（例如，如果它依赖于需要从服务器获取的某些数据），您需要添加一些状态来跟踪待处理的依赖项，在依赖项待处理时渲染某些内容，并在依赖项准备就绪时更新状态。

有了 Suspense，你的组件就能告诉 React：“嘿，React，我还没有准备好所有需要渲染的内容，但当你可以再次尝试渲染时，我会通知你。” 你的组件无需保留额外的状态，也无需在等待期间决定要渲染什么。

import {
  dontRenderMeUntilThisIsReady,
  Suspense as TryRenderTheseChildren
} from "fictitious-react";
import getMyDependency from "fictitious-dependency-fetcher";

function ComponentThatDependsOnSomething(props) {
  const dependency = dontRenderMeUntilThisIsReady(
    getMyDependency(props.dependencyId)
  );
  return <h1>{dependency.data}</h1>;
}

function App(props) {
  return (
    <TryRenderTheseChildren andIfTheyAreNotReadyRenderThis={<ImTheFallback />}>
      <ComponentThatDependsOnSomething dependencyId={1} />
      <ComponentThatDependsOnSomething dependencyId={2} />
    </TryRenderTheseChildren>
  );
}

现在来谈谈完全不同的事情

在#ReactAmsterdam 之后，我在阿姆斯特丹机场等待延误的航班，看着埃舍尔的这些画作，并写了一篇帖子，类似于我在等待延误的航班时写的帖子。

鏂囩珷鏉ユ簮锛�https://dev.to/pomber/about-react-suspense-and-concurrent-mode-21aj