React 18 过渡

React 18 提供了一个新的钩子 useTransition() 用于在新的状态准备就绪之前控制渲染内容，以便过渡到新的状态。Recoil 应该与这种方法兼容，并提供与 React 状态一致的视图。但是，React 18 可能会从并发更新中回退，并且尚未正式支持基于外部存储状态更改启动过渡。这是 React 团队正在研究支持的内容，但在那之前，我们已经通过以下钩子添加了实验性支持；其他钩子应该已经完全支持过渡，因此只有这些变体是必要的。此 API 被认为是实验性的，因为可能存在我们尚未发现的未处理的用例。

• useRecoilState_TRANSITION_SUPPORT_UNSTABLE()
• useRecoilValue_TRANSITION_SUPPORT_UNSTABLE()
• useRecoilValueLoadable_TRANSITION_SUPPORT_UNSTABLE()

以下是一个示例，它在加载新结果时显示查询的当前结果

function QueryResults() {
  const queryParams = useRecoilValue_TRANSITION_SUPPORT_UNSTABLE(queryParamsAtom);
  const results = useRecoilValue_TRANSITION_SUPPORT_UNSTABLE(myQuerySelector(queryParams));
  return results;
}

function MyApp() {
  const [queryParams, setQueryParams] = useRecoilState_TRANSITION_SUPPORT_UNSTABLE(queryParamsAtom);
  const [inTransition, startTransition] = useTransition();
  return (
    <div>
      {inTransition ? <div>[Loading new results...]</div> : null}

      Results: <React.Suspense><QueryResults /></React.Suspense>

      <button
        onClick={() => {
          startTransition(() => {
            setQueryParams(...new params...);
          });
        }
      >
        Start New Query
      </button>
    </div>
  );
}