درک چرخه های عمر در React – به زبان ساده

۸۲۰
۱۴۰۲/۰۶/۱۱
۲ دقیقه
PDF
درک چرخه های عمر در React – به زبان سادهدرک چرخه های عمر در React – به زبان ساده
آموزش متنی جامع
امکان دانلود نسخه PDF

اگر تاکنون مواجهه‌ای با ری‌اکت داشته باشید، حتماً با عبارت «چرخه‌های عمر» (life cycles) نیز برخورد داشته‌اید. برای درک چرخه های عمر در React ابتدا باید با طرز کار عمومی وب‌اپلیکیشن‌ها آشنا باشیم. مراحل اجرای یک صفحه وب از ابتدا تا انتها به صورت زیر است:

997696
  • پیش از رندرینگ
  • رندرینگ
  • گوش دادن به تغییرهای حالت یا props
  • پایان رندرینگ

در نهایت زمانی که به وب‌سایت فیسبوک سر می‌زنید و تعدادی پست را مشاهده می‌کنید، وب‌اپلیکیشن در عمل یک فراخوانی api برای بازیابی آن‌ پست‌ها پیش از رندرینگ اجرا می‌کند. سپس اپلیکیشن بخش‌های مختلف اطلاعات را رندر می‌کند. در ادامه منتظر تغییرها یا رویدادهایی می‌ماند که روی حالت یا props تأثیر می‌گذارند. زمانی که حالت یا props کامپوننت‌ها تغییر یابند، اپلیکیشن دوباره رندر می‌شود.

همه این مراحل در ری‌اکت به صورت نمودار زیر نمایش می‌یابند:

چند چرخه عمر وجود دارند که روی شیوه رندر شدن کامپوننت‌ها تأثیر می‌گذارند:

  • constructor
  • componentDidUpdate
  • componentDidMount
  • render
  • getDeriveStateFromProps

constructor

ابتدا در مورد constructor صحبت می‌کنیم. constructor به صورت خودکار هر بار که یک شیء از یک کلاس ساخته شود، فراخوانی می‌شود.

اگر یک سازنده (constructor) را اعلان کنید، super(props) باید فراخوانی شود تا props را به درستی بازیابی کند. در غیر این صورت this.props به صورت undefined درمی‌آید و ممکن است منجر به انواع باگ‌های ناخواسته شود. Constructor در این مرحله به دستگیره‌های رویداد و تابع‌ها نیز اتصال می‌یابد. در ادامه مثالی از ظاهر یک سازنده را می‌بینید:

1class constructorExample extends React.Component {
2  constructor(props){
3    super(props);
4    this.state = {
5      fieldOne: ''
6    };
7    this.printFunc = this.printFunc.bind(this);
8  }
9  
10  printFunc(){
11    console.log('printing!');
12  }
13  
14  render(){
15    //returns some jsx
16    return (
17      <div>Hi My name is {this.state.fieldOne}</div>
18    );
19  }
20}
مشاهده کامل کدها

componentDidUpdate

از سوی دیگر componentDidUpdate پس از componentDidMount فراخوانی می‌شود و در صورتی که حالت درونی کامپوننت تغییری نیابد، یا کامپوننت تغییرهای prop را دریافت کند، فراخوانی نخواهد شد. برای کسب اطلاعات بیشتر به کد زیر توجه کنید:

1class ComponentUpdate extends React.Component {
2  constructor(props){
3    super(props);
4    this.state = {
5      fieldOne: ''
6    };
7    this.printFunc = this.printFunc.bind(this);
8  }
9  
10  componentDidUpdate(prevProps, prevState){
11    if(this.props.eleOne && prevProps.eleOne !== this.props.eleOne){
12      //do something 
13    }
14  }
15  
16  render(){
17    //returns some jsx
18    return (
19      <div>Hi My name is {this.state.fieldOne}</div>
20    );
21  }
22}
مشاهده کامل کدها

ComponentDidMount

ComponentDidMount یک بار و درست پیش از فراخوانی رندر، فراخوانی می‌شود. این چرخه عمری است که فراخوانی‌های api را برای بارگذاری داده‌‌های ریموت اجرا می‌کند:

1class ComponentMount extends React.Component {
2  constructor(props){
3    super(props);
4    this.state = {
5      data: []
6    }
7  }
8  componentDidMount(){
9    fetch(/*some api url*/).then(res => res.json()).then(data => this.setState({ data });
10  }  
11  render(){
12    return(
13      <React.Fragment>
14      {data.map(eachData => <div>{eachData}</div>}
15      </React.Fragment>
16    );
17    }
18  }
مشاهده کامل کدها

GetDeriveStateFromProps

همان طور که پیش‌تر گفتیم، رندر آن بخشی است که JSX را به مرورگر می‌برد. GetDeriveStateFromProps یک چرخه عمر است که حالت درونی را پس از تغییر یافتن props به‌روزرسانی می‌کند. به مثال زیر توجه کنید:

1class deriveComponent extends Component {
2  state = {
3    name: this.props.name,
4    id: this.props.userID
5  };
6
7  static getDerivedStateFromProps(props, state) {
8    // Any time the current user changes,
9    // Reset any parts of state that are tied to that user.
10    if (props.userID !== state.prevPropsUserID) {
11      return {
12        id: props.userID,
13        name: props.name
14      };
15    }
16    return null;
17  }
18
19  // ...
20}
مشاهده کامل کدها

سخن پایانی

به این ترتیب به پایان این راهنما با موضوع معرفی چرخه‌های عمر React می‌رسیم.

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

بر اساس رای ۸ نفر
آیا این مطلب برای شما مفید بود؟
اگر پرسشی درباره این مطلب دارید، آن را با ما مطرح کنید.
منابع:
swlh
PDF
مطالب مرتبط
نظر شما چیست؟

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *