ይህ ጽሑፍ የፕሮግራም መተግበሪያዎች በፕሮግራም መተግበሪያዎች ላይ የሚወዱት ተሞክሮዎችን ይመልከቱ - እና React 19 መጨረሻው በፕሮግራም መተግበሪያዎችን ቀጥተኛ, ይበልጥ ይታወቃል, እና ዝቅተኛ ፍለጋ-ወደ-ወደ መሣሪያዎችን እንዴት ይሰጣል. ከብዙ ዓመታት ውስጥ በ Frontend ልማት ውስጥ - ከኮምፒውተር ስርዓቶች ለመፍጠር ከ SDG ውስጥ የ AI መሣሪያዎችን መተግበሪያዎች ድረስ - ከሁሉም ጊዜ ከሁሉም ጊዜ ከሁሉም ጊዜ በላይ የኮምፒውተር ኮድ መተግበሪያዎች አግኝቷል, የኮምፒውተር ኮድ መተግበሪያዎች አግኝቷል. እና እርስዎ React ውስጥ ቅርጾች ለመፍጠር ወይም ለመጠበቅ አላቸው ከሆነ, እርስዎ በጣም ታላቅ ስሜት አለብዎት. በዚህ ጽሑፍ ውስጥ, እኔ የፕሮግራፊዎች ጋር ለመገናኘት በተለምዶ ተሞክሮዎች በኩል እርስዎ ይመልከቱ - እና እንዴት መጨረሻው, የፕሮግራም መተግበሪያዎችን ቀላል, ይበልጥ deklarative, እና ይበልጥ ዝቅተኛ error-pregnant ያደርጋል. ✨ React 19 ቅርንጫፍ ቅርንጫፍ ቅርንጫፍ እያንዳንዱ React መተግበሪያ አምራች ቢያንስ አንድ ጊዜ ተሞክሮ ተሞክሮ ጋር ይጀምራል. የኮድ አግኝቷል - Everywhere በ React ውስጥ ቅርጸት ሁኔታ ለመቆጣጠር አብዛኛውን ጊዜ እንደዚህ ይጀምራል: const [name, setName] = useState('');
const [surname, setSurname] = useState('');
const [error, setError] = useState(null);

function handleSubmit(event) {
  event.preventDefault();
}
 ✅ ይህ ቀላል ነው - እና ትንሽ ቅርጾች ለ በጣም ጥሩ ነው. ነገር ግን እርስዎ ማጥፋት በኋላ, በእርግጠኝነት መተግበሪያዎች, እና በእርግጠኝነት መተግበሪያዎች ውስጥ መውሰድ ይችላሉ. ይደውሉ መኖሪያ ቤት ( መኖሪያ ቤት ( እያንዳንዱ መለያ መጫወት አንድ re-render ይጠቀማል, እና ስህተቶች ወይም የሚቆጠሩ ሁኔታዎች ለመቆጣጠር ደግሞ ተጨማሪ ስህተቶች ይጠቀማል. ይህ ተግባራዊ ነው, ነገር ግን አስደናቂ አይደለም. 2 - አግኝቷል የእርስዎን ቅርጽ ብቻ አንድ ክፍሎች ብቻ አይደለም, ነገር ግን የተመሠረተ ክፍሎች ጄራክሪት ጊዜ, እርስዎ እያንዳንዱ ደረጃ ውስጥ የፕሮስ ያደርጋሉ: <Form>
  <Field error={error} value={name} onChange={setName}>
    <Input />
  </Field>
</Form>
 ስቴትስ, ስህተት, የመጫወት ፎቶዎች — ሁሉም ብዙ ፎቶዎች በኩል ይሸፍናል ይህ ኮድ ብቻ አይደለም, ነገር ግን ማከማቻ እና refactoring ከባድ ነው. 3. optimistic updates በጣም አስቸጋሪ ነው ማንኛውም ጊዜ የ optimistic updates መተግበሪያ ይጠቀማል? ይህ በ User Interface (UI) ውስጥ አንድ "እውነተኛ" ልምድ ከባድ ከባድ ከባድ ከባድ ከባድ ከባድ ከባድ ከባድ ከባድ ከባድ ከባድ ከባድ ከባድ ከባድ ከባድ ከባድ ከባድ ከባድ ከባድ ነው. ይህ ቀላል ሊሆን ይችላል, ነገር ግን አንድ ትዕዛዞች ስኬታማ ጊዜ rollback Logic መቆጣጠሪያ መቆጣጠሪያ አንድ እውነተኛ ጫማ ሊሆን ይችላል. ከባድ ስሜት ከባድ ስሜት ከባድ ስሜት ከባድ ስሜት ከባድ ስሜት ከባድ ስሜት ከባድ ስሜት ከባድ ስሜት ከባድ ስሜት ከባድ ስሜት ከባድ ስሜት ከባድ ስሜት React 19 ይህን ለማግኘት በጣም ቀላል ነገር ይሰጣል. useActionState: የፕሮግራም መተግበሪያዎችን ለመርዳት አዲስ መንገድ React 19 ውስጥ በጣም አስደናቂ መተግበሪያዎች መካከል አንዱ ነው ==*useActionState *==hook. በ Async Form Submission, State Management, and Loading Indication - ሁሉም ነገር አንድ ቦታ ላይ ያካትታል. const [state, actionFunction, isPending] = useActionState(fn, initialState);
 እዚህ ምን ይሆናል: 
 
 
 
 
 
  — your async function that handles the form submission fn 
 
  — the initial value of your form state initialState 
 
  — a built-in flag showing whether a submission is in progress isPending የአሜሪካ መጀመሪያ አግኙን እንዴት ይሰራል የ async ተግባር ወደ በቀላሉ ሁለት ጥያቄዎች ይሰጣል: አጠቃቀም አጠቃቀም const action = async (previousState, formData) => {
  const message = formData.get('message');

  try {
    await sendMessage(message);
    return { success: true, error: null };
  } catch (error) {
    return { success: false, error };
  }
};
 You then hook it into your form like this: const [state, actionFunction, isPending] = useActionState(action, {
  success: false,
  error: null,
});

return <form action={actionFunction}> ... </form>;
 አሁን, የፕሮግራም መተግበሪያ በመተግበሪያ በኋላ, ራስ-ሰር መልስ ይሆናል: 
 
 
 
 የእርስዎን Async እንቅስቃሴ ይደውሉ ማስታወቂያዎች ***status ***with the returned result በ isPending በኩል ትዕዛዞች ሂደት ይታያል እንቅስቃሴዎች እንቅስቃሴዎች አግኙን አግኙን ምንም ተጨማሪ መመሪያ ️ ️ ️ ️ ️ ️ ️ ️ መግዛት, መግዛት እና መግዛት መግዛት, መግዛት እና መግዛት መግዛት, መግዛት እና መግዛት A note about startTransition If you decide to trigger the form action manually (e.g., outside of the form’s action prop), wrap it with  : startTransition መጀመር const handleSubmit = async (formData) => {
  await doSomething();

  startTransition(() => {
    actionFunction(formData);
  });
};
 አንዳንዱ ጊዜ, React እርስዎ አንድ async ማሻሻያ ከባድ ውርዶች ውስጥ ሊሆን ይችላል ያውቃል. የተሻለ ማሻሻያ አይችልም. አግኙን አንተ እንዴት መጠቀም ይወዳሉ? 
 
 
 
 
 አጠቃቀም አጠቃቀም አጠቃቀም አጠቃቀም አጠቃቀም አጠቃቀም Automate pending state (የተግበሪያ ሁኔታ) ✅ ምንም event.preventDefault() ያስፈልጋል ✅ Auto form reset በኋላ ውጤታማ መልስ አግኙን አግኙን መኖሪያ ቤት: PreventDefault ፎርም መጋቢት ደግሞ deklarative ይሰጣል - ብቻ ክወና ይታያል, ምንም ኬብል. useFormStatus: no more props drilling አጠቃቀምFormStatus: No more props drilling ሌላ አነስተኛ አነስተኛ ኡሁ - — ከባድ ቅርጸት በባድ ቅርጸት ላይ መተግበሪያው ችግሮችን ለመፍጠር. አጠቃቀም import { useFormStatus } from 'react-dom';

const { pending, data, method, action } = useFormStatus();
 እርስዎ ይህ ኡሁ ይደውሉ , እና ይህ ራስ-ሰር ቅርጸት ሁኔታ ጋር የተገናኙ ይሆናል. inside any child component of a form Example function SubmitButton() {
  const { pending, data } = useFormStatus();
  const message = data ? data.get('message') : '';

  return (
    <button type="submit" disabled={pending}>
      {pending ? `Sending ${message}...` : 'Send'}
    </button>
  );
}

function MessageForm() {
  return (
    <form action={submitMessage}>
      <SubmitButton />
    </form>
  );
}
 
 
 የ SubmitButton በፕሮፕሮፕሮፕሮፕሮፕሮፕሮፕሮፕሮፕሮፕሮፕሮፕሮፕሮፕሮፕሮፕሮፕሮፕሮፕሮፕሮፕሮፕሮፕሮፕሮፕሮፕሮፕሮፕሮፕሮፕሮፕሮፕሮፕሮፕሮፕሮፕሮፕሮፕሮፕሮፕሮፕሮፕሮፕሮፕሮፕሮፕሮፕሮፕሮፕሮፕሮፕሮፕሮፕሮፕሮፕሮፕሮፕሮፕሮፕሮፕሮፕሮፕሮፕሮፕሮፕሮፕሮፕሮፕሮፕሮፕሮፕሮፕሮፕሮፕሮፕሮፕሮፕሮፕሮፕሮፕሮፕሮፕሮፕሮፕሮፕሮፕሮፕሮፕሮ ያውቃል የኮምፒውተርዎን እና የኮምፒውተርዎን ማግኘት ይችላሉ - ማንኛውም የኮምፒውተር ማግኘት አይችልም. አግኙን አግኙን Gotchas to remember GOTCHA ያውቃል 
 
 
 
 እርስዎ ቅርጸት ተመሳሳይ ክፍሎች ውስጥ ይደውሉ ከሆነ ይህ ይሰራል አይደለም. ይህ ክፍሎች ውስጥ መሆን አለበት. በ onSubmit መተግበሪያዎች በመጠቀም ቅርጾች ላይ መልስ አይችልም — በ ***action ***prop ጋር ቅርጾች መሆን አለበት. ⚠️ በአሁኑ ጊዜ, formMethod መተግበሪያዎች ወይም መተግበሪያዎች ውስጥ (እን.ም., formMethod=“get”) የተሰራ አይደለም – የፕሮግራም ደግሞ ዋና መተግበሪያ ይጠቀማል. እኔ በ GitHub ላይ አንድ__አውታረ መተግበሪያ ይሰጣል. አግኙን ቅርጸት ምንድን ነው “GET” የኮምፒውተር ፍላጎት እንዴት ነው ሻጋታ ቅርጸት ውስጥ ሻጋታ ሻጋታ ለመፍጠር በሴቶች ክፍሎች ውስጥ የኮንክቶቲክ አማራጮች ሊሆን ይችላል ቁሳቁሶች ይቀላቀሉ እና ይቀላቀሉ መጠቀምOptimistic: deklarative optimistic UI መጨረሻም, የእኔን ፍላጎት አግኝቷል አግኝቷል - . useOptimistic አጠቃቀም ይህ optimistic UI updates ለማግኘት የተመሠረተ ድጋፍ ያደርጋል, ተጠቃሚ መተግበሪያዎች በቀላሉ እና ቀላል ያደርጋል. ችግሮች እርስዎ በ "የተወዳዳሚዎች" ጠቅ ያድርጉ ይሆናል. እርስዎ ከባድዎን ከባድዎን ከባድዎን ከባድዎን ከባድዎን ከባድዎን ከባድዎን ከባድዎን ከባድዎን ከባድዎን ከባድዎን ከባድዎን ከባድዎን ይሆናል. Traditionally, you would juggle between local state, rollback logic, እና async requests. መፍትሔ ጋር ይህ ዝቅተኛ እና ዝቅተኛ ነው: useOptimistic አጠቃቀም አጠቃቀም const [optimisticMessages, addOptimisticMessage] = useOptimistic(
  messages,
  (state, newMessage) => [newMessage, ...state]
);

const formAction = async (formData) => {
  addOptimisticMessage(formData.get('message'));
  try {
    await sendMessage(formData);
  } catch {
    console.error('Failed to send message');
  }
};
 የ Server request ፍጹም ከሆነ, React ራስ-ሰር ወደ የቀድሞው ሁኔታ ይጀምራል. ይህ ስኬታማ ነው - የፈጠራ ልምድ ይደረጋል. ትክክለኛ ሁኔታ: መሞከር አይችልም እርስዎ ወደ useOptimistic መተግበሪያ መተግበሪያ መተግበሪያ ነው : pure አግኝቷል : (prev, newTodo) => {
  prev.push(newTodo);
  return prev;
}
 ትክክለኛ ነው: (prev, newTodo) => [...prev, newTodo];
 
 
 ሁልጊዜ አንድ አዲስ ስቴትስ ቅርንጫፍ ወይም ቅርንጫፍ ይመልከቱ! ሁልጊዜ ወደ A መኖሪያ ቤት ወይም መኖሪያ ቤት! new StartTransition ጋር ይጠቀማል የፕላስቲስቲክ ማሻሻያዎችን ከሰዓት ከሰዓት ከሰዓት ከሰዓት ከሰዓት እነርሱም ወደ : እንቅስቃሴዎች መጀመር እንቅስቃሴዎች መጀመር startTransition(() => {
  addOptimisticMessage(formData.get('message'));
  sendMessage(formData);
});
 አንዳንዱ ጊዜ, React እርስዎ አንድ አስደናቂ ማሻሻያ ከባድ ውጭ ተደርጓል ያውቃል. 💡 የአጠቃቀም ፍላጎቶች 
 
 
 
 
 ከባድ feedback Automate rollback on errors (የተግበሪያዎች ላይ ራስ-ተግበሪያ) Cleaner የኮምፒውተር Logic አነስተኛ የሽያጭ ስቴትዎችን ያስፈልጋል ይህ የ UX የተሻሻለው ተጠቃሚዎች የሚፈልጉትን ዓይነት ነው - እነርሱም የእርስዎ መተግበሪያው ከባድ ጊዜ በጣም ፈጣን ይሆናል እንዴት እንደሚታወቁም. መጨረሻዎች React 19 በዋናነት ቅርጸት መተግበሪያን ቀላል ያደርጋል - እና አንድ ጊዜ, ይህ አዲስ ቅርጸት አይሆንም, ነገር ግን እውነተኛ መተግበሪያ ልምድ ለማሻሻል. እዚህ እንዴት እንደሚጠቀሙ እና እንዴት እንደሚጠቀሙ ቀላል ጥቅል ነው: 
 
 
 
 
 
 
 
 
 
 Goal 
 React 19 Tool 
 
 
 
 Access form submission result 
 useActionState 
 
 
 
 Track pending submission 
  from   or   from  isPending useActionState pending useFormStatus 
 
 
 
 Access form state deep in children 
 useFormStatus 
 
 
 
 Handle optimistic UI updates 
 useOptimistic Access form submission result useActionState አጠቃቀም Track pending submission  from   or   from  isPending useActionState pending useFormStatus አግኙን አጠቃቀም pending አጠቃቀም Access form state deep in children useFormStatus አጠቃቀም Handle optimistic UI updates useOptimistic አጠቃቀም እነዚህን ሻጋታዎች በ React ውስጥ ቅርጸት deklarative, composable, እና ይበልጥ ዝቅተኛ ስሜት ያደርጋል. በ React ውስጥ ቅርጾች ጋር በመተግበሪያ ብቻ ነገር ለመቀበል boilerplate መጻፍ የሚፈልጉት ከሆነ - React 19 እርስዎ የሚፈልጉት ስሪት ነው. ✨ በ React 19 ጋር የድር ልምድ መኖሪያ ቤት ለመፍጠር አንድ ቡድን ያግኙ! በ , እኛ ከባድ, ከባድ, ከባድ, ከባድ, ከባድ, ከባድ, ከባድ, ከባድ, ከባድ, ከባድ, ከባድ, ከባድ, ከባድ, ከባድ, ከባድ, ከባድ, ከባድ, ከባድ, ከባድ, ከባድ, ከባድ, ከባድ, ከባድ, ከባድ, ከባድ, ከባድ, ከባድ, ከባድ, ከባድ, ከባድ, ከባድ, ከባድ, ከባድ, ከባድ, ከባድ, ከባድ. የ Social Discovery ቡድን 
 
 Sergey Levkovich በ Social Discovery Group ውስጥ የ Frontend Developer. Sergey Levkovich በ Social Discovery Group ውስጥ የ Frontend Developer. የተለጠፈው የ Frontend Developer በ . ሰርጋይ Levkovich Social Discovery Group ሰርጋይ Levkovich ሰርጋይ Levkovich የ Social Discovery ቡድን የ Social Discovery ቡድን

This story contains new, firsthand information uncovered by the writer.

See how we create Social Life 3.0 👉

Social Discovery Group Earns the Great Place To Work® Certification in the USA!

Swipe Away Loneliness: 2024 Dating Trends Forecast

ይህ ኦዲዮ የተዘጋጀው በታሪኩ የመጀመሪያ ቋንቋ ነው!

React 19: አዲስ መሣሪያዎች ጋር ሥራ ለማግኘት

About Author

አስተያየቶች

ተንጠልጣይ መለያዎች

ይህ ጽሑፍ ቀርቧል

Related Stories

Democratizing Crypto Trading with Trade Fighter

THE HARMAS

Breaking the Stigma of Mental Health with Amy Pravin Shah, Noonies Nominee 2021

HackerNoon & The Wild West of Startups

Democratizing Crypto Trading with Trade Fighter

THE HARMAS

Breaking the Stigma of Mental Health with Amy Pravin Shah, Noonies Nominee 2021

HackerNoon & The Wild West of Startups

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps