آموزش ReactJS – فصل هشتم: چرخه زندگی کامپوننت ها

متود های چرخه زندگی کامپوننت ها در ReactJS

• componentWillMount قبل از اینکه اطلاعات بر روی سرور یا صفحه کلاینت چاپ شود، این متود اجرا خواهد شد. این اولین متود اجرا شده از چرخه زندگی کامپوننت هاست.
• componentDidMount بعد از اولین چاپ بر روی صفحه کلاینت اجرا می شود. اینجا زمانی است که بهتر است تغییرات جاوا اسکریپتی و HTML بر روی صفحه اتفاق بیوفتد. این متود همچنین برای ادغام دیگر فریم های جاوا اسکریپت مورد استفاده قرار می گیرد. می توانید برای استفاده از فانکشن هایی مانند setTimeout و setInterval از این متود استفاده کنید. ما از این متود برای بروزرسانی استیت استفاده می کنیم تا بتوانیم بقیه متود های چرخه را نیز به اجرا دراوریم.
• componentWillReceiveProps در صورت بروزرسانی پراپ ها، قبل از چاپ هر اطلاعات دیگری این متود به اجرا در خواهد آمد. بعد از آپدیت State ما با استفاده از متود setNewNumber این فانکشن را به اجرا وادار می کنیم.
• shouldComponentUpdate این متود بهتر است مقدار true یا false را بازگرداند. این متود مشخص می کند که آیا یک کامپوننت قرار است بروزرسانی شود یا نه. به صورت پیشفرض مقدار این متود برابر true است. اگر شما مطمئن هستید که این کامپوننت قرار نیست بعد از بروزرسانی استیت ها یا پراپ ها بروزرسانی شود، می توانید مقدار آن را برابر false قرار دهید.
• componentWillUpdate قبل از چاپ اطلاعات این متود به اجرا در خواهد آمد.
• componentDidUpdate دقیقا بعد از چاپ اطلاعات این متود به اجرا در خواهد آمد.
• componentWillUnmount بعد از اینکه کامپوننت از DOM حذف می شود، اجرا خواهد شد.

در مثال زیر، در متود سازنده constructor ما استیت ها را ست کرده ایم و سپس در متود setNewNumber اطلاعات استیت را آپدیت کرده ایم.

کد زیر را درون فایل App.jsx قرار دهید:

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;

کد زیر را درون فایل index.js قرار دهید:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('root'));

setTimeout(() => {
   ReactDOM.unmountComponentAtNode(document.getElementById('root'));}, 10000);

پس از اجرای پروژه با کد های مثال بالا، صفحه ای مانند تصویر زیر می بینید. 10 ثانیه فرصت دارید بر روی دکمه کلیک کنید تا اعداد اضافه شود، پس از 30 ثانیه کامپوننت از صفحه حذف می شود. پس از حذف شدن محیط کنسول مرورگر را نگاه کنید تا Log نوشته شده را در هر فانکشن ببینید.