آموزش componentDidMount و componentDidUpdate در ریکت

منتشر شده در | | بدون نظر
آموزش componentDidMount و componentDidUpdate
نویسنده: علیرضا کشاورز زمان خواندن: ۵ دقیقه

componentDidMount و componentDidUpdate دو تابع مهم از lifecycle method کلاس کامپوننت در ریکت هستند. در این پست آموزشی میخوام در مورد کاربرد و نحوه استفادشون توضیح بدم، پس لطفا با من همراه باشید.

طبقه بندی lifecycle

چرخه حیات ریکت به ۳ دسته update ، mount و unmount تقسیم میشه. همونطور که از اسمشون مشخصه میتونید تا حدودی حدس بزنید هر کدوم چه موقعیتی رو تشریح می کنن.

mount

وقتی ریکت عملیات رندر رو شروع میکنه و کامپوننت رو میسازه و توی dom قرار میده ما به اصطلاح میگیم که عملیات mount شکل گرفته.

mount شامل متدهای constructor ، componentWillMount  و componentDidMount هست.

update

وقتی که state یا props در کامپوننت تغییر بکنن، کامپوننت وارد فاز update میشه. در واقع با آپدیت شدن کامپوننت دوباره اجرا میشه.

update شامل متدهای componentWillReceiveProps ، shouldComponentUpdate ، componentWillUpdate و componentDidUpdate است.

unmount

وقتی عمر کامپوننت به پایان میرسه و قراره کامپوننت از داخل dom پاک بشه چرخه وارد فاز unmount میشه.

unmount شامل متدهای componentWillMount ، componentDidMount ، shouldComponentUpdate  و.. است.

componentDidMount چیست؟

همانطور که از اسم این متد پیداست وقتی که کامپوننت رندر شد و dom در صفحه قرار گرفت این متد بلافاصله اجرا میشه. ما معمولا در شرایطی از این متد استفاده می کنیم که نیاز داریم یک api را کال کنیم و دیتا رو نمایش بدیم. از طرفی این متد محل مناسبی برای setState کردن داده های دریافتی به شمار میاد.

با مطالعه دو مثال زیر تا حدودی با نحوه استفاده از اون آشنا میشید.

import React, { Component } from 'react';

class App extends Component {

  constructor(props){
    super(props);
    this.state = {
      data: 'Jordan Belfort'
    }
  }

  getData(){
    setTimeout(() => {
      console.log('Our data is fetched');
      this.setState({
        data: 'Hello WallStreet'
      })
    }, 1000)
  }

  componentDidMount(){
    this.getData();
  }

  render() {
    return(
      <div>
      {this.state.data}
    </div>
    )
  }
}

export default App;
import React, { Component } from 'react';
class App extends Component {
    componentDidMount() {
      // Runs after the first render() lifecycle
      console.log("Did mount called");
    }
    render() {
      console.log('Render lifecycle')
      return <h1>Hello World!</h1>;
    }
}
export default App;

componentDidUpdate چیست؟

همانطور که در ابتدای مطلب خوندین این متد مربوط به چرخه update هست و هنگامی که ما state رو تغییر بدیم،(setState صدا زده بشه) props تغییر کنه یا forceupdate انجام بشه این متد اجرا میشه. همونطور که متوجه شدید این متد برای تنظیم حالت ها بر اساس تغییرات خیلی مفیده، همچنین برای واکشی داده از api هم میتونیم استفاده کنیم.

بهتره با سینتکس اون آشنا بشیم، لطفا مثال زیر رو ببینید.

componentDidUpdate(prevProps, prevState) {
  if (prevState.pokemons !== this.state.pokemons) {
    console.log('pokemons state has changed.')
  }
};

این متد دو ورودی به نام prevState و prevProps دریافت میکنه، این ورودی ها مروبط به مقدار قبلی استیت و پراپس هست، شما قبل از اینکه عملیاتی در این متد انجام بدید باید حتما شرط بالا رو پیاده سازی و چک کنید اگر مقدار استیت قدیمی با استیت جدید برابر نبود، دستورات اجرا بشن! حالا میپرسی چرا؟ بهت گفتم که! وقتی setState صدا زده بشه این متد از خود بی خود میشه و اجرا میشه… پس باید حتما قبلش چک کنیم.

 

همانطور که میدونید این متدها به چرخه حیات کلاس کامپوننت ها تعلق دارن. در فانکشن کامپوننت ها بجای این متدها از هوک useEffect استفاده میشه.

 

مطالب پیشنهادی

آشنایی با Conditional Rendering | رندر شرطی در ریکت

دیدگاهتان را بنویسید