‘use server’;

export default async function requestUsername(formData) {
 const username = formData.get(‘username’);
 if (canRequest(username)) {
   // …
   return ‘successful’;
 }
 return ‘failed’;
}

<form onSubmit={search}>
 <input name=“query” />
 <button type=“submit”>Search</button>
</form>

“use server”

const submitData = async (userData) => {
   const newUser = {
       username: userData.get(‘username’),
       email: userData.get(‘email’)
   }
   console.log(newUser)
}
const Form = () => {
   return <form action={submitData}>
       <div>
           <label>Name</label>
           <input type=“text” name=‘username’/>
       </div>
       <div>
           <label>Name</label>
           <input type=“text” name=“email” />
       </div>
     
<button type=‘submit’>Submit</button>
   </form>
}

export default Form;

import React, { useEffect } from ‘react’;

const HeadDocument = ({ title }) => {
 useEffect(() => {
   document.title = title;

 const metaDescriptionTag = document.querySelector(‘meta[name=“description”]’);
   if (metaDescriptionTag) {
   metaDescriptionTag.setAttribute(‘content’, ‘New description’);
   }
 }, [title]);

 return null;
};

export default HeadDocument;

Const HomePage = () => {
 return (
   <>
     <title>Freecodecamp</title>
     <meta name=“description” content=“Freecode camp blogs” />
     // 页面内容
   </>
 );
}

import React, { useState, useMemo } from ‘react’;

function ExampleComponent() {
 const [inputValue, setInputValue] = useState(‘’);

 // 缓存检查输入值是否为空的结果
 const isInputEmpty = useMemo(() => {
   console.log(‘检查输入是否为空…’);
   return inputValue.trim() === ‘’;
 }, [inputValue]);

 return (
   <div>
     <input
       type=“text”
       value={inputValue}
       onChange={(e) => setInputValue(e.target.value)}
       placeholder=“输入一些内容…”
     />
     <p>{isInputEmpty ? ‘输入为空’ : ‘输入不为空’}</p>
   </div>
 );
}

export default ExampleComponent;

import React, { useState } from ‘react’;

function ExampleComponent() {
 const [inputValue, setInputValue] = useState(‘’);

 const isInputEmpty = () => {
   console.log(‘检查输入是否为空…’);
   return inputValue.trim() === ‘’;
 });

 return (
   <div>
     <input
       type=“text”
       value={inputValue}
       onChange={(e) => setInputValue(e.target.value)}
       placeholder=“输入一些内容…”
     />
     <p>{isInputEmpty ? ‘输入为空’ : ‘输入不为空’}</p>
   </div>
 );
}

export default ExampleComponent;

import React, { forwardRef } from ‘react’;

const ExampleButton = forwardRef((props, ref) => (
 <button ref={ref}>
   {props.children}
 </button>
));

讯享网

import React from ‘react’;

const ExampleButton = ({ ref, children }) => (
 <button ref={ref}>
   {children}
 </button>
);

const value = use(resource);

import { use } from “react”;

const fetchUsers = async () => {
   const res = await fetch(‘https://jsonplaceholder.typicode.com/users');
   return res.json();
 };
 
 const UsersItems = () => {
   const users = use(fetchUsers());
 
   return (
     <ul>
       {users.map((user) => (
         <div key={user.id} className=’bg-blue-50 shadow-md p-4 my-6 rounded-lg‘>
           <h2 className=’text-xl font-bold‘>{user.name}</h2>
           <p>{user.email}</p>
         </div>
       ))}
     </ul>
   );
 };
export default UsersItems;

import { createContext, useState, use } from ’react‘;

const ThemeContext = createContext();

const ThemeProvider = ({ children }) => {
 const [theme, setTheme] = useState(’light‘);

 const toggleTheme = () => {
   setTheme((prevTheme) => (prevTheme === ’light‘ ? ’dark‘ : ’light‘));
 };

 return (
   <ThemeContext.Provider value={{ theme, toggleTheme }}>
     {children}
   </ThemeContext.Provider>
 );
};

const Card = () => {
 // use Hook()
 const { theme, toggleTheme } = use(ThemeContext);

 return (
   <div
     className={p-4 rounded-md ${<br>        theme === &#39;light&#39; ? &#39;bg-white&#39; : &#39;bg-gray-800&#39;<br>      }}
   >
     <h1
       className={my-4 text-xl ${<br>          theme === &#39;light&#39; ? &#39;text-gray-800&#39; : &#39;text-white&#39;<br>        }}
     >
       Theme Card
     </h1>
     <p className={theme === ’light‘ ? ’text-gray-800‘ : ’text-white‘}>
      Hello!! use() hook
     </p>
     <button
       onClick={toggleTheme}
       className=’bg-blue-500 hover:bg-blue-600 text-white rounded-md mt-4 p-4‘
     >
       {theme === ’light‘ ? ’Switch to Dark Mode‘ : ’Switch to Light Mode‘}
     </button>
   </div>
 );
};

const Theme = () => {
 return (
   <ThemeProvider>
     <Card />
   </ThemeProvider>
 );
};

export default Theme

const { pending, data, method, action } = useFormStatus();

const { status } = useFormStatus()

import { useFormStatus } from “react-dom”;

function Submit() {
 const status = useFormStatus();
 return <button disabled={status.pending}>{status.pending ? ’正在提交…‘ : ’提交‘}</button>;
}

const formAction = async () => {
 // 模拟延迟 2 秒
 await new Promise((resolve) => setTimeout(resolve, 3000));
}

const FormStatus = () => {
 return (
   <form action={formAction}>
     <Submit />
   </form>
 );
};

export default FormStatus;

const [state, formAction] = useFormState(fn, initialState, permalink?);

import { useFormState} from ’react-dom‘;

const FormState = () => {
   const submitForm = (prevState, queryData) => {
       const name =  queryData.get(“username”);
       console.log(prevState); // 表单之前的状态
       if(name === ’john‘){
           return {
               success: true,
               text: “欢迎”
           }
       }
       else{
           return {
               success: false,
               text: “错误”
           }
       }
   }
   const [ message, formAction ] = useFormState(submitForm, null)
   return <form action={formAction}>
       <label>姓名</label>
       <input type=“text” name=“username” />
       <button>提交</button>
       {message && <h1>{message.text}</h1>}
   </form>
}

export default FormState;

const [ optimisticMessage, addOptimisticMessage] = useOptimistic(state, updatefn)

import { useOptimistic, useState } from “react”;

const Optimistic = () => {
 const [messages, setMessages] = useState([
   { text: “嘿，我是初始的！”, sending: false, key: 1 },
 ]);
 const [optimisticMessages, addOptimisticMessage] = useOptimistic(
   messages,
   (state, newMessage) => [
     …state,
     {
       text: newMessage,
       sending: true,
     },
   ]
 );

 async function sendFormData(formData) {
   const sentMessage = await fakeDelayAction(formData.get(“message”));
   setMessages((messages) => […messages, { text: sentMessage }]);
 }

 async function fakeDelayAction(message) {
   await new Promise((res) => setTimeout(res, 1000));
   return message;
 }

 const submitData = async (userData) => {
   addOptimisticMessage(userData.get(“username”));

   await sendFormData(userData);
 };

 return (
   <>
     {optimisticMessages.map((message, index) => (
       <div key={index}>
         {message.text}
         {!!message.sending && <small> (正在发送…)</small>}
       </div>
     ))}
     <form action={submitData}>
       <h1>OptimisticState 钩子</h1>
       <div>
         <label>用户名</label>
         <input type=“text” name=“username” />
       </div>
       <button type=“submit”>提交</button>
     </form>
   </>
 );
};

export default Optimistic;

const [messages, setMessages] = useState([{ text: “嘿，我是初始的！”, sending: false, key: 1 },]);

{optimisticMessages.map((message, index) => (
       <div key={index}>
         {message.text}
         {!!message.sending && <small> (正在发送…)</small>}
       </div>
     ))}