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>
  );
}