问题标签 [react-concurrent]

我一直在关注 Ben Awad 的视频，并试图扩展这个想法以响应SuspenseList，但当我更改revealOrder. 在所有情况下，端点都被一个接一个地调用，并以forwards模式加载。

演示回购

我正在 React 中尝试并发模式和悬念，当我尝试从父组件钻取一些模拟数据到子组件时遇到类型错误，因为我的 promise 包装器本身并不知道正在读取的类型。我收到的错误消息是：

TS2739：类型'{数据：任何；}' 缺少“MockData”类型的以下属性：标题、名称、地址、城市

我如何让我的承诺包装器知道返回给它的类型而不明确说明，export const promiseWrapper = (promise: Promise<MockData>): PromiseWrapper => {...因为我想将此承诺包装器用于可能返回其他接口的其他提取？谢谢！

示例组件.tsx：

api.ts：

promiseWrapper.ts：

我正在检查 react docs 中的新并发模式并遇到了这个例子。

如果我们试图加载的数据还没有准备好，组件就会被挂起。

一旦加载数据，组件 ProfileDetails 就会被渲染。

加载数据时导致 ProfileDetails 组件重新呈现的原因。React 是否在挂起状态下不断尝试渲染组件？完整的例子可以在链接中找到

编辑：由于抛出的 Promise，组件首先被挂起，并且 react 等待 promise 被解决，一旦解决，组件就会被渲染。

更新：好的，我误解了useDeferredValue，我认为它更像是一个去抖值，但事实并非如此，您可以将超时定义为显示旧结果的时间。

所以

const search = useDeferredValue(value, { timeoutMs: 10000 })

给了我想要的效果，只有它仍然显示警告权才知道。

原来的

我想搜索下面的结果，搜索结果应该根据文本字段的输入立即过滤。然后查询应该被去抖动并且旧的结果也应该在它花费少于例如 3000 毫秒时显示

我正在使用 React 和 Relay 实验中的新并发模式。我使用了新的 useDeferredValue，记录在此页面上：https ://reactjs.org/docs/concurrent-mode-reference.html#usetransition

但我收到了这个警告：

我没有得到这个，因为它有效，但它仍然给我一个警告。

我的代码：

今天，如果需要，我们可以在 React Hooks/函数组件的渲染阶段getDerivedStateFromProps使用类组件和状态更新来创建派生状态。

我对 React Hook 变体特别好奇：这在 React 并发模式下是否允许？

如果我使用StrictModeScrollView包装常见问题解答中的组件，则不会有任何警告。但是，我还是有一点胃疼的感觉，这种模式在并发模式下可能会出现问题。 <React.StrictMode>...</React.StrictMode>

所以问题是：

关于 Hooks FAQ 链接，在 React 并发模式下是否仍然可以派生状态？

例子：

下面是一个可变 ref 示例，它存储来自Overreacted 博客的当前回调：

但是 React Hook FAQ 声明不推荐使用该模式：

另请注意，这种模式可能会导致并发模式出现问题。[...]

无论哪种情况，我们都不推荐这种模式，只是为了完整性而在此处显示。

我发现这种模式特别适用于回调，但我不明白为什么它会在常见问题解答中出现危险信号。例如，客户端组件可以使用useInterval而无需环绕useCallback回调（更简单的 API）。

在并发模式下也不应该有问题，因为我们更新了里面的 ref useEffect。从我的角度来看，FAQ 条目在这里可能有一个错误的点（或者我误解了它）。

所以，总结一下：

1. 有什么从根本上反对将回调存储在可变引用中的吗？
2. 像上面的代码那样在并发模式下是否安全，如果不是，为什么不呢？

如果我理解（并欣赏）useTransition正确的目的，那就是避免中间的“加载”状态，如文档中的示例所示：

“正在加载配置文件...”文本不会出现useTransition

useEffect但是当混合中有一个钩子时，这似乎不起作用。

这是从这个 github 问题中获取的关于同一主题的示例（尽管关注点略有不同）

此处显示“加载问候语”文本。

useEffect 与 useTransition 不兼容吗？

是否可以取消第二个示例中出现的“加载问候”文本？

我已经安装了“yarn add react@experimental react-dom@experimental”，并使用了不稳定的createRoot，但启动时出现错误。

这是我的 index.js：

结果 ：

所以帮助它工作

在下面的代码中，Sample使用一个async函数来获取一些数据。我将使用这些数据来更新 Redux 存储，以便任何组件都可以username在应用程序中访问它们。

在这里，让我们假设没有用户名我的应用程序无法继续。好吧，<Suspense>在父级别实现这一点，直到从资源中获取数据。但是，从 Redux 事件调度到<Sample>组件重新渲染之间存在细微差距，其中显示User:而不是loading....（事件不强制立即重新渲染，因此username为空）。所以我会以相同的顺序在网页中看到以下内容

loading....--> User:-->User: Srinesh

所以我的要求是在loading....商店更新之前显示。在网页上，我期待看到，

loading....-->User: Srinesh

有没有办法在不使用<Sample>组件级别的另一个条件来显示loading....用户名是否为的情况下实现这一点null？

如何检测应用程序中当前使用的 React（稳定/发布）版本是否支持并发模式？假设您正在编写一个库，该库应针对多个反应版本，并且仅在相关时才添加并发功能。

我正在做，return typeof React.useTransition === "function"但我对此犹豫不决。

提前致谢。