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

پاسخ هوش مصنوعی

در React.js، دو نوع اصلی کامپوننت وجود دارد: Class Component و Functional Component. در زیر به تفاوت های اصلی آنها و مثال هایی برای هر یک می پردازیم.

1. Class Component:

کامپوننت های کلاس به وسیلهٔ کلاس ها تعریف می شوند و از React.Component وراثت می برند. این نوع کامپوننت ها معمولاً برای مدیریت حالت (state) و چرخه حیات (lifecycle) کامپوننت ها استفاده می شوند.

import React, { Component } from 'react';

class MyClassComponent extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      

        
Count: {this.state.count}
        Increment
      
    );
  }
}

2. Functional Component:

کامپوننت های تابعی به وسیلهٔ توابع جاوااسکریپت تعریف می شوند و معمولاً برای کامپوننت هایی ساده که نیاز به حالت یا چرخه حیات خاصی ندارند، استفاده می شوند. اما با معرفی "Hooks"، این نوع کامپوننت ها نیز می توانند حالت و دیگر قابلیت ها را مدیریت کنند.

import React, { useState } from 'react';

const MyFunctionalComponent = () => {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    

      
Count: {count}
      Increment
    
  );
};

تفاوت های کلیدی:

• نحوه تعریف: کامپوننت کلاس با کلاس و کامپوننت تابعی با تابع تعریف می شود.
• مدیریت حالت: کامپوننت های کلاس با this.state و this.setState مدیریت حالت می کنند، در حالی که کامپوننت های تابعی می توانند از useState برای مدیریت حالت استفاده کنند.
• چرخه حیات: کامپوننت های کلاس دارای متدهای چرخه حیات هستند، در حالی که کامپوننت های تابعی می توانند از Hook هایی مثل useEffect برای مدیریت چرخه حیات استفاده کنند.

به طور کلی، اگر شما نیاز به استفاده از ویژگی های پیچیده تری مانند چرخه حیات و مدیریت حالت دارید، می توانید از کامپوننت های کلاس استفاده کنید. اما اگر کامپوننت شما ساده است و می خواهید کد تمیزتر و کوتاه تری داشته باشید، کامپوننت های تابعی پیشنهاد می شوند.

شما ابتدا فایل 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 تر هستند