原文地址 再见了useState和useEffect：彻底改变React开发！ 2023.5.16， by Emmanuel Odii

许多开发人员继续使用useState和useEffect Hook来更新状态，但是我不喜欢这种访问。问题是，它会导致组件同时挂载、重新挂载和卸载，从而导致意外行为。因此，在控制台输出日志时，你可能会看到结果重复三次。

介绍 useLoaderData Hook

hook是React中的一个自定义hook，可以帮助你将数据加载到组件中。它简化了从API获取数据或执行任何异步操作的过程

当你使用useLoaderData钩子时，你需要为它提供一个返回Promise的函数。这个Promise表示一个获取你需要的数据的异步操作。一旦Promise resolve，数据就可以被组件访问了。

hook为你处理加载状态，因此你不需要手动跟踪数据是否仍在加载或是否已完成加载。它提供了一种方便的方式来访问数据，还可以处理数据加载过程中可能发生的任何潜在错误

通过使用hook，你可以保持组件代码的整洁和有组织，将数据加载逻辑与组件的其他职责分离。它允许你以一种对初学者更友好的方式轻松获取和管理数据

为什么使用useLoaderHook?

react-router中的useLoaderHook帮助我们以最少的工作量实现相同的功能。这些是你应该使用它的一些例子。

• 加载状态管理：加载器为你处理加载状态，提供数据何时获取的明确指示。这有助于管理加载微调框、进度指示器或与数据加载相关的任何其他UI元素。
• 错误处理：加载器通常包含错误处理机制，允许你处理和显示数据加载过程中发生的错误。它们提供了一种标准的错误处理方式，使得在应用程序中实现一致的错误处理变得更容易。
• 关注点分离：加载器允许你将数据加载逻辑与组件的其他方面分离。这可以促进更好的代码组织和可维护性，因为你可以专注于特定的职责而不会混淆它们。

还有更多。

让我们看看这是如何工作的。

假设你对react-router6的工作原理有很好的了解。如果你不知道，请随时查看这里的文档

首先，我们必须在我们的应用程序中设置路由系统以与Loader API一起工作。在此之前，我们一直在使用BrowserRouter设置来处理我们应用程序的各种路由。

我们花点时间讨论一下。

import { BrowserRouter, Routes, Route, Outlet } from "react-router-dom"  
import HomeComponent from "./home"  
import AboutCompoent from "./about"  
function App () {  
    <BrowserRouter>  
        <Routes>  
            <Route path='/' element={<Outlet />}>  
                <Route index element={<HomeComponent /> } />  
                <Route path='about' element={<AboutComponent/> } />  
            </Route>  
        </Routes>  
    </BrowserRouter>  
};  
export default App;

在这里，我们已经使用传统的方法从react-router中导入的内容建立了一个路由系统。

思考一下发生了什么。

是的。react-router中的BrowserRouter创建了一个children对象的数组。下面的代码片段清楚地说明了这是如何工作的Routes

BrowserRouter([  
{  
    path: '/',  
    element: <HomeComponent />,  
    children: []  
},  
{  
    path: '/about',  
    element: <AboutComponent/>,  
    children: []  
}  
])

如果它们是嵌套路由，那么它会将子路由附加到父路由中子路由的键上。

是的，它就是这样递归的。

然而，此方法不能用于使用loaderData钩子。我们需要做一点重构。别急，我知道你很急，但是你先别急。和这个有点像。我强烈建议你查看react-router文档以获取更多信息。

import {  
    createBrowserRouter,  
    createRoutesFromElements,  
    RouterProvider,  
    Route,  
    Outlet  
} from "react-router-dom"  
  
import HomeComponent from "./home"  
import AboutComponent from "./about"  
  
function App() {  
    const browserRoutes = createBrowserRouter(createRoutesFromElements(  
        <Route path='/' element={<Outlet />}>  
            <Route index element={<HomeComponent /> } />  
            <Route path='about' element={<AboutComponent /> } />  
        </Route>  
    ))  
  
    return (  
        <RouterProvider router={browserRoutes} />  
    );  
}

我已经导入了一些对象。

然后，初始化一个变量，作为要渲染的对象。注意到我在函数内部调用了函数。这是因为我想将路由解析或转换为对象，正如其名称所示，可以帮助我实现这一点。最后返回一个新的。让我们看看如果不使用createRoutesFromElements函数，我们会做什么。createBrowserRouter``createRoutesFromElement``RouterProvider``browserRoutes``createRoutesFromElements``createBrowserRouter``createRoutesFromElements``RouterProvider``browserRouter

createBrowserRouter([  
{  
    path: '/',  
    element: <HomeComponent />,  
    children: []  
},  
{  
    path: '/about',  
    element: <AboutComponent/>,  
    children: []  
}
])

我对这种方式不是很感兴趣，因为你的路由甚至可以嵌套，在某些时候，这会变得令人困惑。你应该让事情变得非常简单。

探索加载器函数：

现在我们对如何设置应用程序以使用Loader API有了一些了解，让我们看看如何使用API。

假设你想从某个端点获取数据并将其显示在组件中。大多数开发人员会做的是:初始化一个state，然后在useEffect钩子中更新状态。下面的代码片段清楚地说明了我所说的。homecomponent

import { useState } from 'react'  
  
const HomeComponent = () => {  
    const [data, setData] = useState([]);  

    useEffect(async () => {  
        const request = await fetch('http://localhost:3004/file');  
        if(!request.ok) throw new Error('Failed to fetch data')  
        const item= await request.json()  
        setData(item)  
    }, [])  
  
    return (  
        <section>  
            { data.length > 0 ? data.map((foundData) => (  
                <div key={foundData.id}>  
                    <strong>{foundData.name}</strong>  
                </div>  
                )) : <p>Data currently unavailable</p>
            }  
        </section>  
    )  
}  
export default HomeComponent

这有很多行，因为我们可能想简化一下，并重用相同的函数。

要使用加载器（Loaders），必须定义一个加载器函数。加载器函数类似于自定义钩子（Custom Hooks）。

此外，函数的命名约定并不重要，因为你可以给它取任何名字。在下面的代码片段中，我将创建一个基本的加载器函数，它从API中获取数据，就像上面代码片段中所示的那样

export async function LoaderFunction () {  
    const request = await fetch('http://localhost:3004/file');  
    if (!request.ok) throw new Error ('Failed to fetch item')  
    const item = await response.json();  
    return item;
};

现在，我们必须将加载器函数导入到正在处理路由的组件中。 使用设置路线系统后，您应该使用props属性loader传入你创建的加载器函数。

下面的代码片段清楚地说明这个createBrowserRouter、createRouteFromElements、loader、LoaderFunction

import {  
createBrowserRouter,  
createRoutesFromElements,  
RouterProvider,  
Route,  
Outlet  
} from "react-router-dom"  
import HomeComponent from "./home"  
import AboutComponent from "./about"  
import { LoaderFunction as HomeLoader} from "./loader"  
  
function App() {  
    const browserRoutes = createBrowserRouter(createRoutesFromElements(  
        <Route path='/' element={<Outlet />}>  
            <Route index element={<HomeComponent /> }  
                loader={HomeLoader}/>  
            <Route path='about' element={<AboutComponent /> } />  
        </Route>  
    ))  
  
    return (  
        <RouterProvider router={browserRoutes} />  
    );  
}

之后，我们可以使用home组件中的react-router中的useLoaderData钩子访问loader函数返回的数据。

下面的代码片段最好地解释了刚刚阅读的内容。

import { useLoaderData } from "react-router-dom"  
  
const HomeComponent = () => {  
    const data = useLoaderData();  

    return (  
        <section>  
            {data.map((foundData) => (  
                <div key={foundData.id}>  
                    <strong>{foundData.name}</strong>  
                </div>  
            ))}  
        </section>  
    )  
}  
export default HomeComponent

Wow! 😲..

现在看看我们是如何清理home组件的:)

注意到我们去掉了检查数据是否为null的逻辑。

这是因为react-router会让它在url/路径激活时就加载数据。因此，它甚至在组件挂载之前就发出了必要的请求。是的!

我们只是在为幸福之路做准备。如果我们传递一个不存在的url请求呢？如果是这种情况，不要惊慌，因为react-router也允许我们将组件传递给另一个被调用的prop参数errorElement。

这是专门针对我们使用时发生错误的。让我们通过下面的代码片段中看看它是如何工作的。

import {  
    createBrowserRouter,  
    createRoutesFromElements,  
    RouterProvider,  
    Route,  
    Outlet  
} from "react-router-dom"  
import HomeComponent from "./home"  
import AboutComponent from "./about"  
import { LoaderFunction as HomeLoader} from "./loader"  
  
function App() {  
    const browserRoutes = createBrowserRouter(createRoutesFromElements(  
        <Route path='/' element={<Outlet />}>  
            <Route
                index
                element={<HomeComponent />}  
                loader={HomeLoader}
                errorElement={<h1>An Error occured</h1>}
            />  
            <Route path='about' element={<AboutComponent /> } />  
        </Route>  
    ))  
  
    return (  
        <RouterProvider router={browserRoutes} />  
    );  
}

我只是使用了一个h1标签来显示错误。建议你使用一个组件，这样你就可以访问钩子。我将在我即将发布的一篇博客文章中展示如何使用useRouteError钩子。如果你想了解它，请使用这个链接。

由于它在挂载组件之前预取数据，加载状态变得无关紧要，因为它可能会获取数据或返回错误消息，你将其作为值传递给errorElement。

这就是使用Data Layer API（数据层API）发出请求所需要知道的所有基础知识。

如果你觉得这篇文章对你有帮助，请考虑在Twitter上关注我，回复这篇文章，留下评论，或者通过这个链接请我喝咖啡来支持我。

---

译者注：恭喜你看到这里，原作者的标题其实是过于标题党了。 我在学习react-router的时候，通过react-router官网的文档的联系人管理的例子学习了useLoaderData用法，useLoaderData需要把查询数据、更改数据的逻辑拆分出去，并注册到路由上，虽然降低了组件内的心智负担，但是增强了路由配置的心智负担。

因为有了hook，组件内的代码逻辑其实已经降低很多了，我个人更喜欢把逻辑放到组件中、哪怕拆分到hook中，也是非常便于理解和维护的。

而react-router的useLoaderdata加载数据、使用react-router的Form实现编辑数据，它更像一种模式，感觉react-router想做更多事情，其实不利于react-router的使用。

useLoaderdata可以在一些业务简单的页面使用、比如公告、简单的表单里使用。

我更倾向于把react-router当一个纯粹的路由来使用。