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

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

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

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

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

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

• constructor
• componentDidUpdate
• componentDidMount
• render
• getDeriveStateFromProps

constructor

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

فیلم آموزش پروژه محور ری اکت جی اس – طراحی وب اپلیکیشن پیشرو PWA با React.js در فرادرس

کلیک کنید

اگر یک سازنده (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 می‌رسیم.

فیلم مجموعه آموزش جاوا اسکریپت JavaScript – مقدماتی تا پیشرفته در فرادرس

کلیک کنید

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