در این وبلاگ، می‌خواهم دو تا از محبوب‌ترین راه‌های توسعه UI با استفاده از جاوا اسکریپت را مقایسه و مقایسه کنم: React و Angular. من توسعه وب را با استفاده از React سه سال پیش شروع کردم و این فریمورک من برای ساخت برنامه های وب بود. با این حال، مجبور شدم با استفاده از Angular برای کار، برنامه‌هایی را یاد بگیرم و بسازم. در حالی که مقالات زیادی برای انتخاب یکی از این دو مورد مناسب برای ساخت برنامه‌های شما وجود دارد، من می‌خواهم آنها را از نظر نحوی با هم مقایسه کنم، که برای توسعه‌دهندگانی که پس از یادگیری React به Angular تغییر می‌دهند و بالعکس، مفید خواهد بود. در این وبلاگ پارادایم های کلیدی زیر را مورد بحث قرار خواهیم داد.
- نوشتن نشانه گذاری
- نشانه گذاری های پویا
- به اشتراک گذاری داده ها بین والدین و فرزند
- مدیریت چرخه حیات
- رسیدگی به رویداد
نوشتن نشانه گذاری
یکی از تفاوت های اصلی بین React و Angular نحوه نگارش نشانه گذاری HTML است. در React، نشانه گذاری و منطق در واحدهایی به نام Component با هم جفت می شوند. React از JSX استفاده می‌کند، یک افزونه برای جاوا اسکریپت، که می‌تواند شامل نشانه‌گذاری HTML و منطق رندر مرتبط با هم باشد.
export default function HelloWorld(){
let name = "Arthur";
return(
<h1 className="heading">Welcome, {name}</h1>
)
}
//Home.jsx
در Angular، نشانه‌گذاری و منطق در فایل‌های جداگانه نوشته می‌شوند و یک جدایی واضح از نگرانی وجود دارد. Angular از Typescript به جای جاوا اسکریپت استفاده می کند، جایی که Typescript یک ابر مجموعه جاوا اسکریپت با تایپ استاتیک اختیاری است.
export class HelloWorldComponent {
name:string="Arthur";
constructor() { }
}
//home.component.ts
<h1 class="heading">Welcome, {{name}}</h1>
<!--home.component.html-->
نشانه گذاری های پویا
توانایی ارائه نشانه‌گذاری‌ها به صورت مشروط برای نشان دادن عناصر مورد نظر در طرح‌بندی HTML و پنهان کردن بقیه بر اساس معیارهای تعریف شده در کد جاوا اسکریپت برای ایجاد برنامه‌های کاربردی وب مدرن ضروری است. نشانه گذاری ها نیز باید به صورت پویا در یک حلقه ایجاد شوند تا کد html خشک بماند. ممکن است راه‌های مختلفی برای ایجاد نشانه‌گذاری دلخواه در هر چارچوبی وجود داشته باشد، و من فقط یکی از این راه‌ها را در مثال زیر بررسی کرده‌ام.
در React، برای رندر شرطی، نشانه گذاری مورد نظر ممکن است به صورت jsx در یک متغیر با استفاده از عملگر سه تایی ذخیره شود. همچنین می‌توان تابعی برای برگرداندن jsx مورد نظر با استفاده از شرط If…else نوشت. برای حلقه زدن روی یک آرایه و ایجاد نشانه گذاری، معمولاً از تابع نقشه استفاده می شود.
export default function Home(){
let name = "Arthur";
let isSignedIn=true;
let products=['Macbook Air','Ipad Air','Iphone SE'];
const homeJSX=isSignedIn?(
<div>
<h1>Welcome, {name}</h1>
<h2>Products</h2>
<ul>
{products.map((product)=><li key={product}>{product}</li>)}
</ul>
</div>
):(
<h1>You are not signed in</h1>
);
return(
<div>
{homeJSX}
</div>
);
}
//Home.jsx
Angular در مورد رندر پویا رویکرد متفاوتی دارد و دستورالعمل‌های ساختاری داخلی مانند NgIf و NgFor دارد. در Angular، نشانه‌گذاری ایجاد شده توسط React به صورت زیر قابل تولید است.
export class HomeComponent {
name:string="Arthur";
isSignedIn:boolean=true;
products:Array<string>=['Macbook Air','Ipad Air','Iphone SE']
constructor() { }
}
//home.component.ts
<div>
<div *ngIf="isSignedIn; else elseBlock">
<h1>Welcome to the application</h1>
<h2>Products</h2>
<ul>
<li *ngFor="let product of products">{{product}}</li>
</ul>
</div>
<ng-template #elseBlock><h1>You are not signed in</h1></ng-template>
</div>
<!--home.component.html-->
به اشتراک گذاری داده ها بین والدین و فرزند
در React و Angular، والدین و فرزندان می توانند با استفاده از props داده ها را با یکدیگر به اشتراک بگذارند. در حالی که جریان داده از والد به فرزند با ارسال props به مؤلفه فرزند ساده است، جریان داده از فرزند به والد با انتقال یک تابع والد که داده ها را به عنوان پشتوانه برای کودک ذخیره می کند، به دست می آید. یکی از این پیاده سازی ها در React دنبال خواهد شد.
export default function Home(){
const [count, setCount]=useState(0);
return(
<Child count={count} setCount={setCount}/>
);
}
//Home.jsx
export default function Child({count,setCount}){
return(
<div>
<input type="number" value={count} onChange={(e)=>setCount(e.target.value)} />
</div>
);
}
//Child.jsx
Angular دکوراتورهای ورودی و خروجی را فراهم می کند که به یک جزء فرزند امکان می دهد با والد خود تعامل داشته باشد. جریان داده فوق در React را می توان در Angular به صورت زیر پیاده سازی کرد.
export class HomeComponent {
count!:number;
constructor() { }
setCount(newCount:number){
this.count=newCount;
}
}
//home.component.ts
<div>
<app-child [count]="count" (setCount)="setCount($event)"></app-child>
</div>
<!--home.component.html-->
export class HomeComponent {
@Input() count!:number;
@Output() setCount= new EventEmitter<number>();
constructor() { }
}
//child.component.ts
<div>
<input type="number" [value]="count" (change)="this.setCount.emit($event.target.value)" />
</div>
<!--child.component.html-->
مدیریت چرخه حیات
مدیریت چرخه حیات به توسعه دهندگان کنترل روی کد را می دهد تا در طول ایجاد، به روز رسانی و حذف یک جزء اجرا شوند. React از چندین قلاب برای مدیریت چرخه حیات استفاده می‌کند که قلاب useEffect روش ترجیحی برای رسیدگی به سناریوهای رایج است.
export default function Home({count}){
useEffect(()=>{
console.log("Component created");
return () => {
console.log('Component deleted');
};
},[]);
useEffect(()=>{
console.log("Count changed");
},[count]);
}
//Home.jsx
Angular قلاب های مختلفی را برای مدیریت چرخه حیات فراهم می کند. ngOnInit، ngOnChanges و ngOnDestroy رایج ترین قلاب هایی هستند که استفاده می شوند. رفتار چرخه حیات بالا در React را می توان به صورت زیر در Angular پیاده سازی کرد.
export class HomeComponent {
@Input() count!:number;
constructor() { }
ngOnInit(){
console.log("Component created");
}
ngOnChanges(change:SimpleChanges){
if(change["count"]){
console.log("Count changed");
}
}
ngOnDestroy(){
console.log("Component deleted");
}
}
//home.component.ts
رسیدگی به رویداد
تعامل کاربر برای هر برنامه وب حیاتی است و رویدادهای مرتبط مانند کلیک، فشار دادن کلید باید توسط برنامه مدیریت شود. React رویدادهای مصنوعی خود را دارد که عملکردهای پوشاننده روی رویدادهای بومی هستند که توسط مرورگرها برای ایجاد یکنواختی بین مرورگرها پیاده‌سازی می‌شوند. یکی از این سناریوهای رسیدگی به رویداد در اینجا مورد بحث قرار می گیرد.
export default function Home(){
handleKeyDown=(event)=>{
console.log("You pressed: ",event.key);
}
return(
<div>
<input onKeyDown={handleKeyDown}/>
</div>
)
}
//Home.jsx
در Angular، برای گوش دادن و پاسخگویی به رویدادها باید پیوندهای رویداد را به شرح زیر ایجاد کنیم.
export class HomeComponent {
constructor() { }
handleKeyDown(event){
console.log('You pressed: ',event.key);
}
}
//home.component.ts
<div>
<input (keydown)='handleKeyDown($event)'/>
</div>
<!--home.component.html-->
ما یک مقایسه کد از رایج ترین موارد استفاده React و Angular انجام دادیم. هر دو کتابخانه/چارچوب شگفت‌انگیزی برای ایجاد یک برنامه کاربردی هستند. تفاوت های دیگری نیز بین آنها وجود دارد که بخشی از موارد ذکر شده در اینجا است که می توانیم در وبلاگ دیگری به آن ها بپردازیم. ممنون که خواندید. به سلامتی!
