Demystifying Inner Workings React: A Visual Journey Through Lifecycle React with TypeScript (نسخه 2024)

Summarize this content to 400 words in Persian Lang
سلام، علاقمندان React! 👋 آیا تا به حال احساس کرده اید که React در پشت صحنه در حال اجرای جادو است؟ خوب، شما تنها نیستید! امروز، ما قصد داریم پرده را کنار بزنیم و عملکرد درونی جذاب React را بررسی کنیم. چه یک تازه کار یا یک حرفه ای با تجربه باشید، این راهنما به شما کمک می کند تا چرخه حیات React را تجسم کنید و بفهمید که چگونه TypeScript می تواند توسعه شما را افزایش دهد. بیایید شیرجه بزنیم!

مرحله رندر اولیه: جایی که جادو آغاز می شود

این را تصور کنید: شما به تازگی یک کامپوننت جدید براق React ایجاد کرده اید. بعد چه اتفاقی می افتد؟ بیایید آن را مرحله به مرحله تجزیه کنیم.

مرحله 1: React Component شما در مرحله مرکزی قرار می گیرد

همه چیز با کامپوننت React شما شروع می شود. در اینجا یک مثال ساده با استفاده از TypeScript آورده شده است:

import React from ‘react’;

interface HelloProps {
name: string;
}

const HelloComponent: React.FCHelloProps> = ({ name }) => {
return h1>Hello, {name}!h1>;
};

export default HelloComponent;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

این جزء کوچک در شرف آغاز یک سفر هیجان انگیز است!

مرحله 2: جادوگر DOM مجازی React

هنگامی که کامپوننت شما برای اولین بار رندر می‌شود، React یک کپی سبک از DOM را ایجاد می‌کند که به DOM مجازی معروف است. این مانند صفحه طراحی شخصی خود React است.

import React from ‘react’;
import ReactDOM from ‘react-dom’;
import HelloComponent from ‘./HelloComponent’;

ReactDOM.render(HelloComponent name=”World” />, document.getElementById(‘root’));

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

نکته حرفه ای: در حالی که این کد هنوز کار می کند، React 18 کد جدید را معرفی کرد createRoot API برای عملکرد بهتر. به روز رسانی کد خود را در نظر بگیرید:

import { createRoot } from ‘react-dom/client’;

const root = createRoot(document.getElementById(‘root’));
root.render(HelloComponent name=”World” />);

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

مرحله 3: از مجازی به واقعیت

سپس React این DOM مجازی را می گیرد و آن را به DOM واقعی که مرورگر شما نمایش می دهد تبدیل می کند. مثل زنده کردن یک طرح اولیه است!

مرحله 4: زمان کمی عمل است!

اکنون برنامه شما فعال است و کاربران می توانند با آن تعامل داشته باشند. روی یک دکمه کلیک کنید، یک فرم را تایپ کنید یا اسکرول کنید – سرگرمی شروع می شود!

مرحله به روز رسانی ایالت: زمان درخشش React است

بسیار خوب، پس برنامه شما آماده و اجرا می شود. اما وقتی چیزی تغییر می کند چه اتفاقی می افتد؟ اینجاست که مرحله به‌روزرسانی حالت وارد می‌شود و React واقعاً عضلات خود را منعطف می‌کند.

مرحله 1: تغییر در هوا است

فرض کنید یک کاربر روی دکمه ای در برنامه شما کلیک می کند. این باعث تغییر حالت می شود. در اینجا یک مثال ضد ساده آورده شده است:

import React, { useState } from ‘react’;

const Counter: React.FC = () => {
const [count, setCount] = useState(0);

return (
div>
p>You clicked {count} timesp>
button onClick={() => setCount(count + 1)}>Click mebutton>
div>
);
};

export default Counter;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

مرحله 2: React Springs را وارد عمل کنید

چه زمانی setCount نامیده می شود، React روند به روز رسانی خود را آغاز می کند. اما بخش جالب اینجاست – DOM بلافاصله به روز نمی شود. React هوشمندتر از این است!

مرحله 3: آشتی بزرگ

React DOM مجازی جدید را با قبلی مقایسه می کند. این فرآیند آشتی نامیده می شود و مانند بازی تشخیص تفاوت است.

الگوریتم تفاوت: React از یک الگوریتم فوق کارآمد استفاده می کند تا بفهمد چه چیزی تغییر کرده است.

حداقل به روز رسانی: سپس کوچکترین تغییرات مورد نیاز برای به روز رسانی DOM واقعی را محاسبه می کند.

مرحله 4: فقط موارد ضروری

React فقط بخش‌هایی از DOM را که واقعاً تغییر کرده‌اند به‌روزرسانی می‌کند. به همین دلیل است که React بسیار سریع است – زمان را برای به روز رسانی چیزهایی که تغییر نکرده اند تلف نمی کند.

مرحله 5: افشای بزرگ

مرورگر DOM به روز می شود و voila! کاربر وضعیت جدید برنامه شما را می بیند.

ارتقاء سطح با TypeScript

حالا بیایید در مورد اضافه کردن TypeScript به ترکیب صحبت کنیم. مثل این است که به برنامه React خود قدرت های فوق العاده بدهید!

نوع ایمنی: گرفتن اشکالات قبل از وقوع

TypeScript به شما کمک می کند تا خطاها را قبل از اینکه مخفیانه وارد تولید شوند، شناسایی کنید. در اینجا نحوه استفاده از آن با React آورده شده است:

interface CounterProps {
initialCount: number;
}

const Counter: React.FCCounterProps> = ({ initialCount }) => {
const [count, setCount] = useState(initialCount);

return (
div>
p>You clicked {count} timesp>
button onClick={() => setCount(count + 1)}>Click mebutton>
div>
);
};

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

ابرقدرت های IDE

با TypeScript، IDE شما به یک جادوگر کدنویسی تبدیل می شود. شما دریافت می کنید:

تکمیل خودکار که در واقع کار می کند
Refactoring ابزارهایی که کد شما را درک می کنند
مستندات درون خطی برای اجزا و لوازم شما

پایان: سفر React شما ادامه دارد

درک عملکرد درونی React مانند یادگیری دست دادن مخفی یک باشگاه انحصاری است. اکنون می دانید که React چگونه DOM را به طور موثر به روز می کند و برنامه های شما را سریع و روان نگه می دارد.

به یاد داشته باشید، React دائما در حال تکامل است. تیم React همیشه روی ویژگی‌های جدید کار می‌کند تا زندگی ما را آسان‌تر کند. مراقب به روز رسانی ها و ویژگی های جدید در نسخه های بعدی React باشید!

بنابراین، بخش مورد علاقه شما از چرخه حیات React چیست؟ آیا تا به حال “آها!” لحظاتی در حین کار با React و TypeScript؟ نظر خود را در زیر بنویسید و بیایید با هم سری بزنیم!

کد نویسی مبارک، باشد که اجزای شما همیشه بی عیب و نقص ارائه شوند! 🚀💻

import React from 'react';

interface HelloProps {
  name: string;
}

const HelloComponent: React.FCHelloProps> = ({ name }) => {
  return h1>Hello, {name}!h1>;
};

export default HelloComponent;

import React from 'react';
import ReactDOM from 'react-dom';
import HelloComponent from './HelloComponent';

ReactDOM.render(HelloComponent name="World" />, document.getElementById('root'));

import { createRoot } from 'react-dom/client';

const root = createRoot(document.getElementById('root'));
root.render(HelloComponent name="World" />);

import React, { useState } from 'react';

const Counter: React.FC = () => {
  const [count, setCount] = useState(0);

  return (
    div>
      p>You clicked {count} timesp>
      button onClick={() => setCount(count + 1)}>Click mebutton>
    div>
  );
};

export default Counter;

interface CounterProps {
  initialCount: number;
}

const Counter: React.FCCounterProps> = ({ initialCount }) => {
  const [count, setCount] = useState(initialCount);

  return (
    div>
      p>You clicked {count} timesp>
      button onClick={() => setCount(count + 1)}>Click mebutton>
    div>
  );
};