新版React官方文档解读（尾章）- 实验性功能

const theme = use(ThemeContext);

// 根组件通过 fetchMessage 获取流，包装为 promise 给到 Message组件
export default function App() {
  const messagePromise = fetchMessage();
  return (
    <Suspense fallback={<p>waiting for message...</p>}>
      <Message messagePromise={messagePromise} />
    </Suspense>
  );
}

// message.js
'use client';

import { use } from 'react';

export function Message({ messagePromise }) {
  const messageContent = use(messagePromise);
  return <p>Here is the message: {messageContent}</p>;
}

import { ErrorBoundary } from "react-error-boundary";

<ErrorBoundary fallback={<p>⚠️Something went wrong</p>}>
  <Suspense fallback={<p>⌛Downloading message...</p>}>
    <Message messagePromise={messagePromise} />
  </Suspense>
</ErrorBoundary>

  const messagePromise = new Promise((resolve, reject) => {
    reject();
  }).catch(() => {
    return "no new message found.";
  });

<form action={formAction} ref={formRef}>
  <input type="text" name="message" placeholder="Hello!" />
  <button type="submit">Send</button>
</form>

async function formAction(formData) {
  // 这一条现在没有，下面引入乐观消息时加入
  addOptimisticMessage(formData.get("message"));
  formRef.current.reset();
  await sendMessage(formData);
}

async function sendMessage(formData) {
  // deliverMessage 是 API 的调用
  const sentMessage = await deliverMessage(formData.get("message"));
  setMessages([...messages, { text: sentMessage }]);
}

 const [optimisticMessages, addOptimisticMessage] = useOptimistic(
    messages,
    (state, newMessage) => [
      ...state,
      {
        text: newMessage,
        sending: true
      }
    ]
  );

{optimisticMessages.map((message, index) => (
    <div key={index}>
      {message.text}
      {!!message.sending && <small> (Sending...)</small>}
    </div>
))}

function AddToCartForm({itemID, itemTitle}) {
  const [message, formAction] = useFormState(addToCart, null);
  return (
    <form action={formAction}>
      <h2>{itemTitle}</h2>
      <input type="hidden" name="itemID" value={itemID} />
      <button type="submit">Add to Cart</button>
      {message}
    </form>
  );
}

"use server";

// 模拟服务端入库响应
export async function addToCart(prevState, queryData) {
  const itemID = queryData.get('itemID');
  if (itemID === "1") {
    return "Added to cart";
  } else {
    return "Couldn't add to cart: the item is sold out.";
  }
}

<form action={submitForm}>
  <UsernameForm />
</form>

...

export async function submitForm(query) {
  await new Promise((res) => setTimeout(res, 1000));
}

const {pending, data} = useFormStatus();

...
<button type="submit" disabled={pending}>
  {pending ? '提交中……' : '提交'}
</button>
{showSubmitted ? (
  <p>提交请求用户名：{submittedUsername.current}</p>
) : null}

import calculateUserMetrics from 'lib/user';

const getUserMetrics = cache(calculateUserMetrics);

function TeamReport({users}) {
  for (let user in users) {
    const metrics = getUserMetrics(user);
    // ...
  }
  // ...
}

const getTemperature = cache(async (city) => {
	return await fetchTemperature(city);
});

// 使用
async function AnimatedWeatherCard({city}) {
	const temperature = await getTemperature(city);
	// ...
}

const getUser = cache(async (id) => {
  return await db.user.query(id);
})
...
function Home({id}) {
  // ✅ 正确示例：开始获取用户数据。
  getUser(id);
  // ……一些计算工作
  return (
    <>
      <Profile id={id} />
    </>
  );
}

const user = await getUser(id);

import {experimental_taintObjectReference} from 'react';

export async function getUser(id) {
  const user = await db`SELECT * FROM users WHERE id = ${id}`;
  experimental_taintObjectReference(
    'Do not pass the entire user object to the client. ' +
      'Instead, pick off the specific properties you need for this use case.',
    user,
  );
  return user;
}

import {experimental_taintUniqueValue} from 'react';

export async function getUser(id) {
  const user = await db`SELECT * FROM users WHERE id = ${id}`;
  experimental_taintUniqueValue(
    'Do not pass a user session token to the client.',
    user,
    user.session.token
  );
  return user;
}

'use client';

import { useState } from 'react';
import inspirations from './inspirations'; // 字库，这里可忽略
import FancyText from './FancyText';  // 展示文字的组件

export default function InspirationGenerator({children}) {
  const [index, setIndex] = useState(0);
  const quote = inspirations[index];
  const next = () => setIndex((index + 1) % inspirations.length);

  return (
    <>
      <p>Your inspirational quote is:</p>
      <FancyText text={quote} />
      <button onClick={next}>Inspire me again</button>
      {children}
    </>
  );
}

import FancyText from './FancyText';
import InspirationGenerator from './InspirationGenerator';
import Copyright from './Copyright';

export default function App() {
  return (
    <>
      <FancyText title text="Get Inspired App" />
      <InspirationGenerator>
        <Copyright year={2004} />
      </InspirationGenerator>
    </>
  );
}

// App.js

async function requestUsername(formData) {
  'use server';
  const username = formData.get('username');
  // ...
}

export default App() {
  <form action={requestUsername}>
    <input type="text" name="username" />
    <button type="submit">Request</button>
  </form>
}

// actions.js
'use server';

let likeCount = 0;
export default async incrementLike() {
  likeCount++;
  return likeCount;
}

startTransition(async () => {
  const currentCount = await incrementLike();
});