بخش های اصلی

آموزش ReactJS

ReactJS –Component lifecycle

در این بخش راجع به متد هایِ component lifecycle توضیح میدیم.

متدهایِ Lifecycle

  • componentWillMount قبل از رِندِر شدن، در هر دو سمتِ سرور و کلاینت اجرا میشه.
  • componentDidMount بعد از اولین رِندِر و فقط روی کلاینت اجرا میشه. این جا همون جاییِه که درخواست هایِ AJAX و DOM یا به روز رسانیِ DOM اتفاق میفته. این متد برای ادغام با دیگر فریم ورک هایِ جاوا اسکریپت و هر تابعی که تأخیرِ اجرا داشته باشه، مثلِ setTimeOut یا setInterval، به کار میره. از این متد برای به روز رسانیِ state (وضعیت) استفاده می کنیم، بنابراین می توانیم دیگر متدهایِ lifecycle را هم اجرا کنیم.
  • componentWillReceiveProps وقتی که propها به روز رسانی میشن و قبل از این که رِندِرِ بعدی فراخوانی بشه، اجرا میشه.  از این متد، زمانی که state (وضعیت) را به روز رسانی می کنیم، استفاده می کنیم، و آن را از طریق setNewNumber اجرا می کنیم.
  • shouldComponentUpdate مقدارِ true یا false برمی گرداند. این متد تعیین می کنه که component (کامپوننت) به روز رسانی شده یا نه. بصورت پیش فرض مقدار آن true است . اگه مطمئنین که component (کامپوننت) بعد از به روز رسانیِ state یا propها نیازی به رِندِر شدن نداره، می توانید مقدار این متد را false بذارین.
  • componentWillUpdate قبل از رِندِر شدن، فراخوانی میشه.
  • componentDidUpdate بعد از رِندِر شدن، فراخوانی میشه.
  • componentWillUnmount بعد از اینکه component از dom، unmounte بشه، فراخوانی میشه. کامپوننت را در main.js، unmount می کنیم.

در مثالی که در ادامه آورده شده، state (وضعیت) اولیه را در سازنده ی تابع تعریف می کنیم. setNewnumber برای به روز رسانیِ state (وضعیت) استفاده شده. همه ی متدهایِ lifecycle در کامپوننتِ Content هستن.

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;

main.js

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

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

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

بعد از  رِندِرِ اولیه، خروجی زیر به ما نمایش داده میشه:

react component lifecycle initial screen

فقط componentWillMount و componentDidMount، در کنسول logged میشن چون هنوز چیزی را به روز رسانی نکردیم.

react component lifecycle initial log

اگه روی دکمه ی INCREMENT کلیک کنیم، به روز رسانی انجام میشه و متدهایِ lifecycle اجرا میشن.

react component lifecycle change log

بعد از 10 ثانیه، کامپوننت unmount میشه و آخرین رویداد (event) در کنسول logged میشه.

react component lifecycle unmount log

نکته

متدهایِ lifecycle همیشه با ترتیب یکسانی فراخوانی میشن بنابراین خوبه که آن ها را به همان شکلی که به شما نشان دادیم و با ترتیب درست بنویسین.

در صورتی که سوال و یا نظری دارید، از بخش نظرات با ما در میان بگذارید.

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

شما چه نظر و یا سوالی درباره این نوشته دارید؟

مبحث آموزشی

آموزش ReactJS

Learn ReactJS

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

تبلیغات

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد