۳۰
تیر

جلسه ۰۸ : چرخه عمر کامپوننت ها در React JS

دسته‌بندی‌ها :

با عرض سلام خدمت کاربران محترم سایت پی وی لرن.
با جلسه ای دیگر از سری جلسات دوره آموزش React JS در خدمت شما عزیزان هستیم.
در این جلسه قصد داریم به آموزش چرخه عمر کامپوننت ها در React JS بپردازیم.

فهرست

چرخه عمر کامپوننت ها در React JS

هر کامپوننت در React JS دارای یک چرخه عمر است که شما می‌توانید در سه فاز بر آن ها نظارت داشته باشید و آن ها را دستکاری کنید.

این سه فاز یا بخش عبارتند از:

Mounting (استقرار)
Updating (بروزرسانی)
UnMounting (انحلال)

Mounting

Mounting به معنای گذاشتن کامپوننت ها در DOM است.

در این مرحله ۴ متد داخلی React فراخوانی می‌شود:

()constructor
()getDerivedStateFromProps
()render
()componentDidMount

در این بین متد ()render همیشه توسط خود React فراخوانی می‌شود.
سایر متد ها اختیاری هستند و در صورتی فراخوانی می‌شوند که شما آن ها را تعریف کرده باشید.

constructor

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

تابع سازنده همیشه باید شی props را به عنوان آرگومان دریافت کند.

مثال:

مثال :

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  render() {
    return (
      <h1>My Favorite Color is {this.state.favoritecolor}</h1>
    );
  }
}

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

class Header extends React.Component {

constructor(props) {

super(props);

this.state = {favoritecolor: "red"};

}

render() {

return (

<h1>My Favorite Color is {this.state.favoritecolor}</h1>

);

}

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

getDriverdStateFromProps

این تابع درست قبل از رندر المان ها توسط شی DOM اجرا می‌شود.

در این تابع می‌توان شی state را بر اساس شی props مقداردهی کرد.

این تابع اشیاء state و props را به عناون آرگومان می‌پذیرد.

مثال:

مثال :

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  static getDerivedStateFromProps(props, state) {
    return {favoritecolor: props.favcol };
  }
  render() {
    return (
      <h1>My Favorite Color is {this.state.favoritecolor}</h1>
    );
  }
}

ReactDOM.render(<Header favcol="yellow"/>, document.getElementById('root'));

class Header extends React.Component {

constructor(props) {

super(props);

this.state = {favoritecolor: "red"};

}

static getDerivedStateFromProps(props, state) {

return {favoritecolor: props.favcol };

}

render() {

return (

<h1>My Favorite Color is {this.state.favoritecolor}</h1>

);

}

ReactDOM.render(<Header favcol="yellow"/>, document.getElementById('root'));

خروجی:

مثال :

My Favorite Color is yellow

1	My Favorite Color is yellow

render

این تابع توسط خود React JS فراخوانی می‌شود. این تابع خروجی html را تحویل DOM می‌دهد.

مثال:

مثال :

class Header extends React.Component {
  render() {
    return (
      <h1>This is the content of the Header component</h1>
    );
  }
}

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

class Header extends React.Component {

render() {

return (

<h1>This is the content of the Header component</h1>

);

}

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

componentDidMount

این تابع بعد از اینکه کامپوننت رندر شد، اجرا می‌شود.

در اینجا می‌توانید دستوراتی را که لازم می‌بینید بعد از قرار داده شدن کامپوننت در DOM اجرا شود (رندر شود)، بنویسید.

در مثال زیر بعد از یک ثانیه که کامپوننت رندر شد، متن h1 تغییر می‌کند:

مثال :

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  componentDidMount() {
    setTimeout(() => {
      this.setState({favoritecolor: "yellow"})
    }, 1000)
  }
  render() {
    return (
      <h1>My Favorite Color is {this.state.favoritecolor}</h1>
    );
  }
}

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

class Header extends React.Component {

constructor(props) {

super(props);

this.state = {favoritecolor: "red"};

}

componentDidMount() {

setTimeout(() => {

this.setState({favoritecolor: "yellow"})

}, 1000)

}

render() {

return (

<h1>My Favorite Color is {this.state.favoritecolor}</h1>

);

}

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

Updating

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

یک کامپوننت وقتی آپدیت می‌شود که تغییری در state یا prop های آن رخ دهد.

۵ متد در این فاز درگیر اجرا هستند:

()getDrivedStateFromProps
()shouldComponentUpdate
()render
()getSnapshotBeforeUpdate
()componentDidUpdate

در این نیز تابع render توسط خود react اجرا و فراخوانی می‌شود. سایر توابع را اگر تعریف کرده باشیم، اجرا می‌شوند.

getDerivedStateFromProps

این تابع اولین تابعی است که پس از آپدیت یک کامپوننت اجرا می‌شود.

همانطور که گفتیم، در این تابع می‌توان شی state را بر اساس شی props مقداردهی کرد.

این تابع اشیا state و props را به عنوان آرگومان می‌پذیرد.

مثال :

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  static getDerivedStateFromProps(props, state) {
    return {favoritecolor: props.favcol };
  }
  changeColor = () => {
    this.setState({favoritecolor: "blue"});
  }
  render() {
    return (
      <div>
      <h1>My Favorite Color is {this.state.favoritecolor}</h1>
      <button type="button" onClick={this.changeColor}>Change color</button>
      </div>
    );
  }
}

ReactDOM.render(<Header favcol="yellow"/>, document.getElementById('root'));

class Header extends React.Component {

constructor(props) {

super(props);

this.state = {favoritecolor: "red"};

}

static getDerivedStateFromProps(props, state) {

return {favoritecolor: props.favcol };

}

changeColor = () => {

this.setState({favoritecolor: "blue"});

}

render() {

return (

<div>

<h1>My Favorite Color is {this.state.favoritecolor}</h1>

<button type="button" onClick={this.changeColor}>Change color</button>

</div>

);

}

ReactDOM.render(<Header favcol="yellow"/>, document.getElementById('root'));

خروجی:

مثال :

My Favorite Color is yellow

1	My Favorite Color is yellow

shouldComponentUpdate

این متد یک مقدار بولین برمی‌گرداند که مشخص می‌کند آیا کامپوننت بعد از تغییر state ها یا prop ها باید تغییر(رندر) کند یا نه.

مقدار پیش‌فرض true است.

در مثال زیر اگر ما بر روی دکمه کلیک کنیم، کامپوننت رندر نمی‌شود. (زیرا متد مقدار false برمی‌گرداند)

مثال :

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  shouldComponentUpdate() {
    return false;
  }
  changeColor = () => {
    this.setState({favoritecolor: "blue"});
  }
  render() {
    return (
      <div>
      <h1>My Favorite Color is {this.state.favoritecolor}</h1>
      <button type="button" onClick={this.changeColor}>Change color</button>
      </div>
    );
  }
}
/
ReactDOM.render(<Header />, document.getElementById('root'));

class Header extends React.Component {

constructor(props) {

super(props);

this.state = {favoritecolor: "red"};

}

shouldComponentUpdate() {

return false;

}

changeColor = () => {

this.setState({favoritecolor: "blue"});

}

render() {

return (

<div>

<h1>My Favorite Color is {this.state.favoritecolor}</h1>

<button type="button" onClick={this.changeColor}>Change color</button>

</div>

);

}

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

render

این تابع نیز خروجی html را در DOM قرار می‌دهد.

مثال :

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  changeColor = () => {
    this.setState({favoritecolor: "blue"});
  }
  render() {
    return (
      <div>
      <h1>My Favorite Color is {this.state.favoritecolor}</h1>
      <button type="button" onClick={this.changeColor}>Change color</button>
      </div>
    );
  }
}

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

class Header extends React.Component {

constructor(props) {

super(props);

this.state = {favoritecolor: "red"};

}

changeColor = () => {

this.setState({favoritecolor: "blue"});

}

render() {

return (

<div>

<h1>My Favorite Color is {this.state.favoritecolor}</h1>

<button type="button" onClick={this.changeColor}>Change color</button>

</div>

);

}

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

getSnapShotBeforeUpdate

در این متد شما به مقادیر state و props قبل از آپدیت دسترسی دارید. یعنی حتی بعد از آپدیت کامپوننت هم می‌توانید مقادیر قبلی اشیا مذکور را چک کنید.

اگر این مد را تعریف کردید، باید متد ()componentDidUpdate را نیز تعریف کنید در غیز این صورت خطا دریافت خواهید کرد.

این متد دو پارامتر به نام های prevState و prevProps دارد یک به مقادیر قبلی آن ها اشاره دارند.

در مثال زیر کامپوننت وقتی mount می‌شود، favoritecolor مقدار red را دراختیار دارد.
بعد از یک ثانیه مقدار favoritecolor به yellow تغییر می‌کند و کامپوننت آپدیت می‌شود.
همچنین در این مرحله مقدار قبلی favoritecolor را به کاربر نشان می‌دهیم.

مثال :

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  componentDidMount() {
    setTimeout(() => {
      this.setState({favoritecolor: "yellow"})
    }, 1000)
  }
  getSnapshotBeforeUpdate(prevProps, prevState) {
    document.getElementById("div1").innerHTML =
    "Before the update, the favorite was " + prevState.favoritecolor;
  }
  componentDidUpdate() {
    document.getElementById("div2").innerHTML =
    "The updated favorite is " + this.state.favoritecolor;
  }
  render() {
    return (
      <div>
        <h1>My Favorite Color is {this.state.favoritecolor}</h1>
        <div id="div1"></div>
        <div id="div2"></div>
      </div>
    );
  }
}

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

class Header extends React.Component {

constructor(props) {

super(props);

this.state = {favoritecolor: "red"};

}

componentDidMount() {

setTimeout(() => {

this.setState({favoritecolor: "yellow"})

}, 1000)

}

getSnapshotBeforeUpdate(prevProps, prevState) {

document.getElementById("div1").innerHTML =

"Before the update, the favorite was " + prevState.favoritecolor;

}

componentDidUpdate() {

document.getElementById("div2").innerHTML =

"The updated favorite is " + this.state.favoritecolor;

}

render() {

return (

<div>

<h1>My Favorite Color is {this.state.favoritecolor}</h1>

</div>

);

}

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

خروجی هنگام mount شدن کامپوننت:

مثال :

My Favorite Color is red

1	My Favorite Color is red

خروجی پس از یک ثانیه:

مثال :

My Favorite Color is yellow
Before the update, the favorite was red
The updated favorite is yellow

My Favorite Color is yellow

Before the update, the favorite was red

The updated favorite is yellow

componentDidUpdate

این متد بعد از اینکه کامپوننت در DOM بروزرسانی شد، اجرا می‌شود.

در مثال پایین پس از این که کامپوننت آپدیت شد، تگ mydiv مقدار بروز شده را نمایش می‌دهد.

مثال :

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  componentDidMount() {
    setTimeout(() => {
      this.setState({favoritecolor: "yellow"})
    }, 1000)
  }
  componentDidUpdate() {
    document.getElementById("mydiv").innerHTML =
    "The updated favorite is " + this.state.favoritecolor;
  }
  render() {
    return (
      <div>
      <h1>My Favorite Color is {this.state.favoritecolor}</h1>
      <div id="mydiv"></div>
      </div>
    );
  }
}

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

class Header extends React.Component {

constructor(props) {

super(props);

this.state = {favoritecolor: "red"};

}

componentDidMount() {

setTimeout(() => {

this.setState({favoritecolor: "yellow"})

}, 1000)

}

componentDidUpdate() {

document.getElementById("mydiv").innerHTML =

"The updated favorite is " + this.state.favoritecolor;

}

render() {

return (

<div>

<h1>My Favorite Color is {this.state.favoritecolor}</h1>

</div>

);

}

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

Unmounting

آخرین فاز در چرخه عمر کامپوننت ها در React JS ، فاز Unmounting نام دارد.

این فاز به وقتی که کامپوننت از DOM حذف شود اشاره دارد.

در این فاز تنها یک متد اجرا می‌شود: ()componentWillUnmount

در مثال زیر پس از اینکه کامپوننت unmount شد، هشداری را با استفاده از متد فوق به کاربر نمایش می‌دهیم.

مثال :

class Container extends React.Component {
  constructor(props) {
    super(props);
    this.state = {show: true};
  }
  delHeader = () => {
    this.setState({show: false});
  }
  render() {
    let myheader;
    if (this.state.show) {
      myheader = <Child />;
    };
    return (
      <div>
      {myheader}
      <button type="button" onClick={this.delHeader}>Delete Header</button>
      </div>
    );
  }
}

class Child extends React.Component {
  componentWillUnmount() {
    alert("The component named Header is about to be unmounted.");
  }
  render() {
    return (
      <h1>Hello World!</h1>
    );
  }
}

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

class Container extends React.Component {

constructor(props) {

super(props);

this.state = {show: true};

}

delHeader = () => {

this.setState({show: false});

}

render() {

let myheader;

if (this.state.show) {

myheader = <Child />;

};

return (

<div>

{myheader}

<button type="button" onClick={this.delHeader}>Delete Header</button>

</div>

);

}

class Child extends React.Component {

componentWillUnmount() {

alert("The component named Header is about to be unmounted.");

}

render() {

return (

<h1>Hello World!</h1>

);

}

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

جلسه آموزش چرخه عمر کامپوننت ها در React JS نیز به پایان رسید.

در جلسه بعد به آموزش رویداد ها در React JS خواهیم پرداخت.

QR: جلسه ۰۸ : چرخه عمر کامپوننت ها در React JS

به اشتراک بگذارید

آموزش react js ,آموزش کتابخانه react js ,چرخه زندگی کامپوننت های reactjs

دیدگاه کاربران

تعداد دیدگاه : 2

نازی
مرداد ۳, ۱۴۰۰
snapshot صحیح می باشد نه snapshop 😀
پاسخ دادن
- صادق
  مرداد ۳, ۱۴۰۰
  ممنو بابت تذکر، تصحیح شد.
  پاسخ دادن

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۰۸ : چرخه عمر کامپوننت ها در React JS

چرخه عمر کامپوننت ها در React JS

Mounting

constructor

getDriverdStateFromProps

render

componentDidMount

Updating

getDerivedStateFromProps

shouldComponentUpdate

render

getSnapShotBeforeUpdate

componentDidUpdate

Unmounting

لیست مطالب دوره

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ