تفاوت Class Component و Functional Component در React.js چیست ؟

شما ابتدا فایل package.json رو داخل پروژه React.js خودتون باز کنید و به ورژن react خودتون نگاه کنید.

  "dependencies": {
    "react": "^16.11.0",
    "react-dom": "^16.11.0",
    "react-scripts": "3.2.0"
  },

در کدهای بالا ورژن react.js من 16.11.0 هست. اگر نسخه ری اکت شما از 16.8.0 کمتر باشه کلا از functional component ها نمیتونین استفاده کنید چون از نسخه 16.8.0 به بعد این قابلیت اضافه شده.

نکته بعدی در مورد تفاوت این 2 این هست که Class components در واقع کلاس های ES6  هستند و Functional Components توابع هستند. 

Functional Component ها جدیدتر هستند و در نسخه های جدید به ری اکت اضافه شدن. در ادامه 2 مثال از Class component ها و functional component ها میزنم و توضیحاتی رو خدمتتون ارائه میدم :

class App extends Component{
    render(){
    return(
     <div className="App">
     <h1>Hello World</h1>
     </div>
     )
 }
}

 در قطعه کد بالا یک Class Component رو مثال زدیم. حالا کافیه این قطعه کد رو کپی کنید و در bable compiler پیست کنید تا تبدیل بشه به کدهای قابل فهم برای مرورگر. مشاهده می کنید که حجم بسیار زیادی از کد تولید میشه. برای این کار روی این لینک کلیک کنید و بعد کدها رو کپی کنید.

و اما ما میتونیم دقیقا همین قطعه کد رو با Functional Component ها بنویسیم

function App() {
  return (
    <div className="App">
      <div>
        <h1>Hello World !!!</h1>
      </div>
    </div>
  );

دستور بالا functional Component هست. این دستورات بسیار ساده تر و قابل فهم تر هستن. و اگر همین دستورات رو توی کامپایلر bable کپی و پیست کنید مشاهده می کنید که حجم کد تولید شده برای قابل فهم شدن برای مرورگر بسیار کم هست.

مزایای functional component ها نسبت به class component

• تولید کدهای بسیار کمتر در functional component
• کدهای بسیار ساده تر و قابل فهم تر
• و اینکه functional component ها reusable تر هستند