۱-Stateful Components

این نوع از کامپوننت‌ها می‌توانند در حالت‌های مختلف خروجی‌های مختلفی تولید کنند. تفاوت این دو نوع کامپوننت در   state  است ، برای استفاده از state آن را در constructor کلاس تعریف کنیم.. هر لحظه state را بررسی و با تغییر آن تابع render مجددا فراخوانی می‌شود. درون constructor باید ()super فراخوانی کرد. کاراین تابع constructor کلاس پدر خود را فراخوانی می‌کند. اگر این کار را انجام ندهید برنامه خطا می‌دهد.

class ReactStatefulComponent extends React.Component { 
constructor() {
 super(); 
this.state = { 
data: [ {id":1,"name":"Ali","age":"20"},
 {"id":2,"name":"Reza","age":"30"},
 {"id":3,"name":"Maryam","age":"40"} 
] } } 
render() {
 return ( 
<div> 
<Header/>
 <table style={{width:'100%'}}> 
<tbody> 
{ this.state.data.map((person, i) => 
<tr> 
<td>{i}</td> 
<td>{person.id}</td>
 <td>{person.name}</td>
 <td>{person.age}</td> </tr>
 ) } 
</tbody> 
</table>
 </div> ); } } 
class Header extends React.Component {
 render() {
 return (
 <div>
 <h1>Header</h1>
 </div> 
); } } 
export default ReactStatefulComponent;

می‌خوای یه فروشگاه به وسعت اینترنت داشته باشی؟

ما حرفه‌ای‌ترین فروشگاه آنلاین رو برات طراحی می‌کنیم.

طراحی فروشگاه اینترنتی

 ۲-Stateless Components

کامپوننت‌های بدون حالت(Stateless)، کامپوننت‌هایی استاتیک هستند که خروجی آن‌ها ثابت است و به حالت (state) خاصی بستگی ندارد.

import React from 'react';
 class ReactStatelessComponent extends React.Component {
 render() { 
 return (
 <div> 
      <Header/>
      <Content/> 
 </div>
   );
  }
 }

 class Header extends React.Component {
 render() { 
 return ( 
 <div>
 <h1>Header</h1>
 </div>
   );
  }
 } 
class Content extends React.Component {
 render() {
 return (
 <div> 
 <h2>Content</h2>
 <p>The content text!!!</p>
 </div> 
  );
 } 
}

 export default ReactStatelessComponent;

درمثال بالا مشاهده می‌کنید که ۳ کامپوننت مختلف نوشته شده است. هر سه این کامپوننت‌ها Stateless یا بدون حالت هستند. کامپوننت Header و Content یک تگی دارند. این دو کامپوننت را در ReactStatelessComponent در کنار یکدیگر قرار داده و استفاده کرده‌ایم. می‌توان ReactStatelessComponent  را در سایر فایل‌ها Import کرد و از آن استفاده کرد. در خروجی این کامپوننت همان چیزهایی که در تگ‌ها وجود دارد بدون تغییر نمایش داده می‌شود همانند زیر:

Header

Content

The Content text!!!