ReactJS - use Hook

上一页
下一页

正如我们在 React 中所知，“钩子”是一种特殊函数，它让我们可以向功能组件添加状态和其他 React 特性。因此，“use”是一个 React Hook，它读取资源的值，例如 Promise 或上下文。与所有其他 React Hooks 不同，use 可以在循环和条件表达式（如 if）中调用。调用 use 的函数，就像所有其他 React Hook 一样，必须是 Component 或 Hook。

use hook 的基本语法


const data = use(asset);

参数

  • asset - 它是我们想要从中读取值的数据源。因此，这可以是一个 Promise 或一个上下文。

返回值

这个 Hook 将返回从资产中读取的值，类似于返回 Promise 或上下文的已解决值的方式。

'use' Hook 的用法


import { use } from 'react';
function TheComponent ({ thePromise }) {
	 	const msg = use(thePromise);
	 	const data = use(DataContext);
	 	// ...

带有 Promise 的 'use' 钩子

因此，通过使用带有 'use' 钩子的 promise，我们可以将数据从服务器流式传输到客户端。通过在服务器组件向客户端组件提供 Promise 作为属性，可以将数据从服务器发送到客户端。


import { Data } from './data.js';

export default function App() {
	 	const dataPromise = fetchData();
	 	return (
	 	 	 <Suspense fallback={<p>waiting for the data...</p>}>
	 	 	 	 	<Message dataPromise={dataPromise} />
	 	 	 </Suspense>
	 	);
}

然后，Client Component 将它作为 prop 给出的 Promise 传递给 use Hook。这使客户端组件能够从服务器组件首次生成的 Promise 中读取值。

data.js


'use client';

import { use } from 'react';

export function Data({ dataPromise }) {
	 	const dataContent = use(dataPromise);
	 	return <h4>Here is the data: {dataContent}</h4>;
}

由于 Data 包裹在 Suspense 中，因此在解决 Promise 之前，将显示回退。当 Promise 被解析时，该值由 Hook 读取，Data 组件将取代 Suspense 回退。

完整代码

Data.js


"use client";

import { use, Suspense } from "react";

function Data({ dataPromise }) {
	 	const dataContent = use(dataPromise);
	 	return <h4>Yup!!! Here is the Data: {dataContent}</h4>;
}

export function DataContainer({ dataPromise }) {
	 	return (
	 	 	 <Suspense fallback={<p>⌛ Downloading Data...</p>}>
	 	 	 	 	<Data dataPromise={dataPromise} />
	 	 	 </Suspense>
	 	);
}

App.js


import { useState } from "react";
import { DataContainer } from "./data.js";

function fetchData() {
	 	return new Promise((resolve) => setTimeout(resolve, 2000, "
本页
上一页
下一页