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

در این بخش از آموزش ReactJS در مورد متدهای مربوط به چرخه حیات کامپوننت ها بحث خواهیم کرد.

متدهای چرخه حیات کامپوننت:

componentWillMount : قبل از رندر شدن در سرور و سمت کلاینت اجرا می شود.
componentDidMount : پس از اولین رندر تنها در سمت کلاینت اجرا می شود. جایی که درخواست های AJAX اتفاق می افتد و DOM یا state به روز می شود.
componentWillReceiveProps : قبل از رندر شدن به محض این که props به روز شود، فراخوانی می شود.
shouldComponentUpdate : مقدار true یا false باز می گرداند. برای تشخیص اینکه کامپوننت به روز شده است یا خیر استفاده می شود (به صورت پیشفرض true است).
componentWillUpdate : درست قبل از رندر شدن فراخوانی می شود.
componentDidUpdate : درست بعد از رندر شدن فراخوانی می شود.
componentWillUnmount : بعد از اینکه کامپوننت از DOM جدا شود، فراخوانی می گردد.

در مثال زیر ما state اولیه را در سازنده تنظیم می کنیم. setNewnumber به منظور به روز رسانی state استفاده می شود. تمام متدهای مربوط به چرخه حیات در داخل کامپوننت 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);

خروجی مثال فوق بعد از اولین رندر: