React19 新增Hooks中useOptimistic的使用

const [optimisticState, addOptimistic] = useOptimistic(
    state,
    // 更新函数
    (currentState, optimisticValue) => {
      // 使用乐观值
      // 合并并返回新 state
    }
  );

//App.js
import { useOptimistic, useState, useRef, startTransition } from "react";

// 模拟异步请求函数
const mockCommentRequest = async (message) => {
  await new Promise((resolve, reject) => {
    setTimeout(() => {
      // 模拟请求成功或失败
      const isSuccess = Math.random() > 0.5;
      if (isSuccess) {
        resolve({ success: true, message: '成功' });
      } else {
        reject({ success: false, message: '失败' });
      }
    }, 1000);
  });
  return message;
};

function Thread({ messages, sendMessageAction }) {
  const formRef = useRef();

  const [optimisticMessages, addOptimisticMessage] = useOptimistic(
    messages,
    (state, newMessage) => {
      // console.log(state, newMessage,'-------------')
      return [
        {
          text: newMessage,
          sending: true
        },
        ...state,
      ]
    }
  );

  function formAction(formData) {
    const message = formData.get("message");
    // 不管异步结果，先进行乐观更新
    addOptimisticMessage(message);
    formRef.current.reset();
    //执行异步操作
    startTransition(async () => {
      await sendMessageAction(message);
    });
  }

  return (
    <>
      <form action={formAction} ref={formRef}>
        <input type="text" name="message" placeholder="发送评论" />
        <button type="submit">发送</button>
      </form>
      {optimisticMessages.map((message, index) => (
        <div key={index}>
          {message.text}
          {message.sending && <small>（发送中……）</small>}
        </div>
      ))}
    </>
  );
}

export default function App() {
  const [messages, setMessages] = useState([
    { text: "评论1", sending: false, key: 1 },
    { text: "评论2", sending: false, key: 2 },
  ]);

  async function sendMessageAction(message) {
    try {
      const sentMessage = await mockCommentRequest(message);
      startTransition(() => {
        setMessages((messages) => [
          { text: sentMessage, sending: false },
          ...messages
        ]);
      });
    } catch (error) {
      console.error('发送失败:', error.message);
      // 可以在这里处理发送失败的情况，例如显示错误提示
    }
  }

  return <Thread messages={messages} sendMessageAction={sendMessageAction} />;
}

function Thread({ messages, sendMessageAction }) {
  const formRef = useRef();
  const [displayMessages, setDisplayMessages] = useState(messages);

  async function formAction(formData) {
    const message = formData.get("message");
    const tempId = Date.now();
    
    // 1. 乐观更新
    setDisplayMessages(prev => [
      { id: tempId, text: message, sending: true },
      ...prev
    ]);
    formRef.current.reset();

    try {
      // 2. 实际发送
      const sentMessage = await sendMessageAction(message);
      
      // 3. 替换乐观消息为实际消息
      setDisplayMessages(prev => [
        { text: sentMessage, sending: false },
        ...prev.filter(msg => msg.id !== tempId)
      ]);
    } catch (error) {
      // 4. 失败时移除乐观消息
      setDisplayMessages(prev => prev.filter(msg => msg.id !== tempId));
      console.error('发送失败:', error.message);
    }
  }

  return (
    <>
      <form action={formAction} ref={formRef}>
        <input type="text" name="message" placeholder="发送评论" />
        <button type="submit">发送</button>
      </form>
      {displayMessages.map((message,index) => (
        <div key={index}>
          {message.text}
          {message.sending && <small>（发送中……）</small>}
        </div>
      ))}
    </>
  );
}