React 18: 正确的数据请求姿势

React 18中，请求数据的正确姿势。

大家好，我是卡颂。一些同学喜欢在useEffect中请求初始数据，类似这样：

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

但React 18并不推荐这种方式。

这么写有什么问题？

1. useEffect会阻塞渲染。 当useEffect执行时，React会等待它完成再继续渲染。这可能会导致页面加载延迟，尤其是当请求数据需要花费很长时间时。

2. useEffect无法并行执行。 在React 18中，组件可以并行渲染。这意味着多个组件可以同时渲染，而无需等待彼此完成。但useEffect无法并行执行，这意味着它会阻塞其他组件的渲染。

如果不推荐这种方式，那么推荐的方式是什么呢？

React 18中，请求数据的推荐方式是使用Suspense。Suspense是一个新的React特性，允许组件在等待数据加载时显示一个占位符。这样可以避免页面加载延迟，并使组件能够并行渲染。

const MyComponent = () => {
  const data = useFetchData();

  return (
    <Suspense fallback={<Loading />}>
      <div>
        {data}
      </div>
    </Suspense>
  );
};

在上面的示例中，MyComponent使用Suspense包裹了一个div元素。当useFetchData()加载数据时，div元素将显示一个Loading组件。一旦数据加载完成，div元素将显示数据。

Suspense还有以下优点：

• 它可以用于任何组件。 只要组件使用Suspense包裹，就可以在等待数据加载时显示一个占位符。
• 它可以用于并行渲染。 Suspense不会阻塞其他组件的渲染。
• 它可以与其他React特性一起使用。 Suspense可以与useEffect、useReducer和其他React特性一起使用。

除了Suspense，还有其他几种请求数据的替代方案。

• SWR

SWR是一个库，允许您在React中轻松地进行数据请求。SWR使用Suspense来处理数据加载，因此它具有Suspense的所有优点。

• 客户渲染

客户渲染是一种在浏览器中渲染页面的技术。与服务器渲染不同，客户渲染不需要在服务器上预先渲染页面。这使得页面加载速度更快，并减少了服务器的负载。

• 服务渲染

服务渲染是一种在服务器上预先渲染页面的技术。与客户渲染不同，服务渲染需要在服务器上预先渲染页面。这使得页面加载速度更快，但增加了服务器的负载。

• 并行渲染

并行渲染是一种在多个线程上同时渲染页面的技术。这可以大大提高渲染速度，尤其是当页面中有大量组件时。

• 乐观更新

乐观更新是一种在数据加载完成之前更新UI的技术。乐观更新可以提高用户体验，并减少页面闪烁。

• 悲观更新

悲观更新是一种在数据加载完成之后才更新UI的技术。悲观更新可以防止出现脏数据，但可能会导致页面闪烁。

如何选择合适的请求数据方式？

以下是选择合适的请求数据方式的一些建议：

• 如果您的组件需要在等待数据加载时显示一个占位符，请使用Suspense。
• 如果您的组件需要进行并行渲染，请使用Suspense。
• 如果您的组件需要与其他React特性一起使用，请使用Suspense。
• 如果您需要在React中轻松地进行数据请求，请使用SWR。
• 如果您需要在浏览器中渲染页面，请使用客户渲染。
• 如果您需要在服务器上预先渲染页面，请使用服务渲染。
• 如果您需要在多个线程上同时渲染页面，请使用并行渲染。
• 如果您需要提高用户体验，请使用乐观更新。
• 如果您需要防止出现脏数据，请使用悲观更新。