「React的新功能！详细介绍了Concurrent Mode和useDeferredValue」

2 年 ago

雅, 悟

1 minute

总结。

首先

最近，React的新功能 Concurrent Mode和useDeferredValue备受关注。但是，我们该如何使用这些新功能呢？本文将详细解释这些新功能，并通过实际的代码示例探讨它们的应用方法。

2. “Concurrent Mode” 是指什么？

Concurrent Mode是React的新功能，可以更有效地控制应用程序的渲染。

在传统的React中，只处理一个更新任务。在这种模式下，只有一个更新被处理，因此当新的更新发生时，其他更新将被等待直到它完成。这可能导致应用程序失去响应性，用户体验恶化的可能性。

然而，启用Concurrent Mode后，React能够同时处理多个更新任务。这样一来，React能够更加灵活地控制更新的优先级，并且能够改善对用户交互（例如输入或点击等）的响应能力。

3. useDeferredValue是什么意思？

useDeferredValue是React的新钩子，用于控制在Concurrent Mode下的渲染。

这个钩子函数告诉React一个值可能会延迟变得可用。为了等待该值变得可用，React会继续显示替代值（通常是之前的值）。

以下是一些基本使用示例：

const deferredData = useDeferredValue(someData, { timeoutMs: 2000 });

const isStale = deferredData !== someData;

return (
  <>
    <LoadingSpinner show={isStale} />
    <SomeComponent data={deferredData} />
  </>
);

用Concurrent Mode和useDeferredValue的代码示例。

以下是结合Concurrent Mode和useDeferredValue的示例代码。

首先，要启用并发模式，需要使用ReactDOM.createRoot创建根节点。

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<App />);

接下来，我们将创建一个用于异步获取数据的组件。这个组件将使用useDeferredValue钩子函数来告诉React数据可能会延迟可用。

function AsyncComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetchData().then(setData);
  }, []);

  const deferredData = useDeferredValue(data, { timeoutMs: 2000 });

  const isStale = deferredData !== data;

  return (
    <>
      <LoadingSpinner show={isStale} />
      <SomeComponent data={deferredData} />
    </>
  );
}

5. 总结

以上就是React的新功能，即Concurrent Mode和useDeferredValue的详细说明和使用方法。通过使用这些新功能，您可以大大提高React应用程序的性能和用户体验。那么，现在就让我们一起来尝试这些新功能吧！

以下是Qiita技術博客文章的示例。本文提供了有关React新功能的基本说明和使用示例。读者通过本文可以了解到如何运用Concurrent Mode和useDeferredValue。

Contents

首先

2. “Concurrent Mode” 是指什么？

3. useDeferredValue是什么意思？

用Concurrent Mode和useDeferredValue的代码示例。

5. 总结