Constructor در ری اکت به چه معناست؟

امید کیانی 1 19 بازدید 1398/07/12
Constructor در ری اکت به چه معناست؟

constructor متدی است که برای مقداردهی اولیه یک شیء در کلاس مورد استفاده قرار می گیرد و مفهوم آن همان چیزی است که در زبان های دیگر برنامه نویسی به کار می رود.

constructor ها در کامپوننت های ری اکت قبل از "mount" شدن کامپوننت صدا زده می شوند.

هنگامی که ما یک constructor برای کامپوننت مان تعریف می کنیم،ما نیاز داریم قبل از هر چیزی متد "(super(props" صدا بزنیم.اگر که ما متد "(super(props" درون constructor صدا نزنیم، this.props تعریف نشده خواهد بود و آن باعث ایجاد مشکل در برنامه ما می شود.

سینتکس

Constructor(props){  
     super(props);  
} 

در ری اکت constructor ها به طور عمده به ۲ دلیل استفاده می شوند:

۱- برای مقدارسازی اولیه local state در کامپوننت با اختصاص دادن یک شیء به "this.state".

۲- برای bind کردن متدهای کنترل رویداد (event handler methods) که در کامپوننت اتفاق می افتد.

نکته:

ما نمی توانیم به صورت مستقیم متد ()setState را درون constructor به کار ببریم و constructor تنها از "this.state" برای اختصاص دادن به state اولیه استفاده می کند.

برای فهم بیشتر به مثال زیر توجه کنید:

App.js

import React, { Component } from 'react';  
  
class App extends Component {  
  constructor(props){  
    super(props);  
    this.state = {  
         data: 'www.laraman.ir'  
      }  
    this.handleEvent = this.handleEvent.bind(this);  
  }  
  handleEvent(){  
    console.log(this.props);  
  }  
  render() {  
    return (  
      <div className="App">  
        <h2>React Constructor Example</h2>  
        <input type ="text" value={this.state.data} />  
        <button onClick={this.handleEvent}>Please Click</button>  
      </div>  
    );  
  }  
}  
export default App;  

Main.js

import React from 'react';  
import ReactDOM from 'react-dom';  
import App from './App.js';  
  
ReactDOM.render(<App />, document.getElementById('app'));  

خروجی:

 

رایج ترین سوالات درباره constructor ها

۱-آیا تعریف constructor در هر کامپوننت ضروری است؟

خیر،آن ضروری نیست تا هر کامپوننت به constructor نیاز داشته باشد.

گاهی اوقات کامپوننت پیچیده نیست و آن تنها یک گره را بر می گرداند.

مثال:

class App extends Component {  
    render () {  
        return (  
            <p> Name: { this.props.name }</p>  
        );  
    }  
}  

۲-آیا وجود متد (super(props در constructor ضروری است؟

بله آن ضروری است.

اگر شما نیاز دارید تا یک property یا دسترسی "this" را درون constructor در کامپوننت خود قرار دهید،شما باید حتما متد ()super را صدا بزنید.

مثال:

class App extends Component {  
    constructor(props){  
        this.fName = "Jhon"; // 'this' is not allowed before super()  
    }  
    render () {  
        return (  
            <p> Name: { this.props.name }</p>  
        );  
    }  
} 

 هنگامی که کد بالا را اجرا می کنیم با خطای " ()this is not allowed before super" مواجه می شویم.

بنابراین اگر نیاز داریم تا به props ها درون constructor دسترسی داشته باشیم باید متد (super(props صدا بزنیم.

 

Arrow Functions

Arrow Functions یک ویژگی جدید در ES6 هستند.اگر شما از arrow function ها استفاده کنید،لازم نیست تا یک event را به "this" اصطلاحا bind کنیم.

در اینجا محدوده ی "this" به صورت global است و محدود به صدا زدن در هر function نیست.

بنابراین اگر از arrow function ها استفاده کنیم،نیازی نیست کلمه "this" را درون constructor اصطلاحا bind کنیم.

import React, { Component } from 'react';  
  
class App extends Component {  
  constructor(props){  
    super(props);  
    this.state = {  
         data: 'www.laraman.ir'  
      }  
  }  
  handleEvent = () => {  
    console.log(this.props);  
  }  
  render() {  
    return (  
      <div className="App">  
        <h2>React Constructor Example</h2>  
        <input type ="text" value={this.state.data} />  
        <button onClick={this.handleEvent}>Please Click</button>  
      </div>  
    );  
  }  
}  
export default App;  

 

ما می توانیم از constructor در راه های زیر استفاده کنیم:

۱) constructor ها برای مقدارسازی اولیه state ها به کار می روند:

class App extends Component {  
  constructor(props){  
        // here, it is setting initial value for 'inputTextValue'  
        this.state = {  
            inputTextValue: 'initial value',  
        };  
  }  
}  

۲) استفاده از "this" درون constructor:

class App extends Component {  
    constructor(props) {  
        // when you use 'this' in constructor, super() needs to be called first  
        super();  
        // it means, when you want to use 'this.props' in constructor, call it as below  
        super(props);  
    }  
} 

۳)مقداردهی کتابخانه ی شخصی:

class App extends Component {  
    constructor(props) {  
  
        this.myBook = new MyBookLibrary();  
  
        //Here, you can access props without using 'this'  
        this.Book2 = new MyBookLibrary(props.environment);  
    }  
}

۴) bind کردن "this" هنگامی که ما به یک متد درون کلاس،با ارسال props به فرزندان آن نیاز داریم:

class App extends Component {  
    constructor(props) {  
  
        // when you need to 'bind' context to a function  
        this.handleFunction = this.handleFunction.bind(this);  
    }  
}

 امیدواریم با مفاهیم constructor ها در کتابخانه ی ری اکت آشنا شده باشید.

مقالات مرتبط
امید کیانی 48 بازدید 1398/06/17
حمید تیموری 509 بازدید 1397/12/04
حمید تیموری 606 بازدید 1397/05/07
حمید تیموری 566 بازدید 1397/04/16
حمید تیموری 591 بازدید 1397/06/16
نظرات (0)
هنوز نظری ثبت نشده است
برای ثبت نظر ابتدا وارد سایت شوید