چرخه حیات react

این اولین مطلب  react هست که مینویسم دوست دارم اروم اروم جلو برم و با مباحث اولیه شروع کنم

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

LifeCycle (چرخه حیات) یک فریم ورک ری اکت از زمانی که اولین درخواست برای آن ارسال می‌شود شروع و تا .... که در عکس زیر میبنید.

 . معمولا در مصاحبه های کاری ، از شما درخواست می‌شود که چرخه حیات یک برنامه react js از زمان اولین درخواست تا زمان نمایش صفحه  را شرح دهید

، هدف از این مقاله ، پوشش دادن و ارائه مطالبی در همین مورد است .

چرخه حیات react life cycle

 

componentWillMount

قبل از رندر شدن صفحه در هر دو سمت کلاینت و سرور اجرا می شود.

 

componentDidMount

پس از اولین رندر و تنها در سمت کلاینت اجرا می شود. اگه یه درخواست  get یا  post داریم  یا  DOM رو میخوایم به روز رسانی کنیم از این متد استفاده میکنیم. این متد در یکپارچه شدن با فریمورک های جاوا اسکریپت دیگر و هر تابعی که اجرای آن با تأخیر همراه است، مثل setTimeout و setInterval کاربرد دارد. ما برای به روز کردن حالت از این متد استفاده می کنیم تا بتوانیم متدهای چرخه ی عمر دیگر را فعال کنیم.

 

componentWillReceiveProps

هنگامی که کامپوننت یک props جدیدی دریافت کند، ری اکت یک متد را فراخوانی می کند.

 

shouldComponentUpdate

مقدار true یا false را برگشت می دهد. این متد به روز بودن یا نبودن جزء را مشخص می کند و به صورت پیش فرض بر روی true قرار دارد. اگر مطمئن هستید که جزء مورد نظر شما پس از به روز شدن حالت یا ویژگی ها نیازی به رندر ندارد، می توانید مقدار false را برگشت دهید.

 

componentWillUpdate

درست قبل از رندر شدن فراخوانی می شود.

 

componentDidUpdate

درست بعد از رندر شدن فراخوانی می شود.

 

componentWillUnmount

پس از جدا شدن جزء از DOM فراخوانی می شود. ما جزء خود را در main.js از DOM جدا می کنیم.

 

import React from 'react';
class App extends React.Component {
   constructor(props) {
      super(props); 
      this.state = {
         data: 0
      }
      this.setNewNumber = this.setNewNumber.bind(this)
   };
   setNewNumber() {
      this.setState({data: this.state.data + 1})
   }
   render() {
      return (
         < div >
            < button onClick = {this.setNewNumber} >INCREMENT< /button >
            < Content myNumber = {this.state.data} >< /Content >
         < /div >
      );
   }
}
class Content extends React.Component {
   componentWillMount() {
      console.log('Component WILL MOUNT!')
   }
   componentDidMount() {
      console.log('Component DID MOUNT!')
   }
   componentWillReceiveProps(newProps) {    
      console.log('Component WILL RECIEVE PROPS!')
   }
   shouldComponentUpdate(newProps, newState) {
      return true;
   }
   componentWillUpdate(nextProps, nextState) {
      console.log('Component WILL UPDATE!');
   }
   componentDidUpdate(prevProps, prevState) {
      console.log('Component DID UPDATE!')
   }
   componentWillUnmount() {
      console.log('Component WILL UNMOUNT!')
   }
   render() {
      return (
         < div >
            < h3 >{this.props.myNumber}< /h3 >
         < /div >
      );
   }
}
export default App;

 

نویسنده
پوریا سبحانلو

پوریا سبحانلو

سلام من پوریا هستم

چند سالی هست تو وب فعال هستم و برنامه نویسی میکنم

اوایل با php کار میکردم بعد ها سریع به پلتفرم های جاوا اسکریپت علاقه مند شدم و الان در حال یادگیری React هستم