为什么React的startTransition的行为与useDeferredValue有很大不同？

Question

我的代码库中有一堆

useDeferredValue()

，我认为这对于并发模式来说已经足够了。然而，它并没有将渲染分割成小块。由

setState

包裹在

startTransition

中触发的渲染将渲染分成 5 毫秒的块。

在 React devtools 中，我看到由

setState

触发的渲染有

priority: immediate

。由

useDeferredValue

或

startTransition

+

setState

引起的渲染具有

priority: normal

。因此，很长一段时间，我都认为后两者是同一件事。

我尝试将所有

useDeferredValue

通话替换为以下内容：

function useDeferredValue2(val) {
  const [deferred, setDeferred] = useState(val);

  useEffect(() => {
    React.startTransition(() => {
      setDeferred(val);
    });
  }, [val]);

  return deferred;
}

在此更改之后，由

useDeferredValue2

引起的所有渲染现在都被分成 5 毫秒的块。事实证明它们非常不同。

useDeferredValue

和这个基本一样吗？:

function useDeferredValue3(val) {
  const [deferred, setDeferred] = useState(val);

  useEffect(() => {
    setDeferred(val);
  }, [val]);

  return deferred;
}

在React内部，

useDeferredValue

、

useDeferredValue2

、

useDeferredValue3

触发的渲染有什么区别？

Answer 1

参见此处https://github.com/reactwg/react-18/discussions/129在此处输入图像描述