Component API در ReactJS – آموزش ReactJS

دوشنبه ۱۳ اسفند ۱۳۹۷
بازدید ۱,۵۶۷ نفر
سعید سیفی زاده
(5 امتیاز از 1 رای)
Loading...

تصویر reactjs-component-api_6133 Component API در ReactJS - آموزش ReactJS

Component API در ReactJS

در این بخش به بررسی Component API در React و متدهای setState،forceUpdate و ReactDOM.findDOMNode خواهیم پرداخت. در کلاس های ES6 باید this را به صورت دستی بایند کنیم. در مثال های این بخش ما از this.method.bind(this) استفاده می کنیم.

متد setState

متد setState به منظور به روز رسانی state در کامپوننت ها استفاده می شود. این متد state را به جایگزین نمی کند، بلکه فقط تغییرات را به state اصلی اضافه می کند.

import React from 'react';
class App extends React.Component {
   constructor() {
      super();
		
      this.state = {
         data: []
      }
      this.setStateHandler = this.setStateHandler.bind(this);
   };
   setStateHandler() {
      var item = "setState..."
      var myArray = this.state.data.slice();
	  myArray.push(item);
      this.setState({data: myArray})
   };
   render() {
      return (
         <div>
            <button onClick = {this.setStateHandler}>SET STATE</button>
            <h4>State Array: {this.state.data}</h4>
         </div>
      );
   }
}
export default App;

import React from 'react';

class App extends React.Component {

constructor() {

super();

this.state = {

data: []

}

this.setStateHandler = this.setStateHandler.bind(this);

};

setStateHandler() {

var item = "setState..."

var myArray = this.state.data.slice();

myArray.push(item);

this.setState({data: myArray})

};

render() {

return (

<div>

<button onClick = {this.setStateHandler}>SET STATE</button>

<h4>State Array: {this.state.data}</h4>

</div>

);

}

export default App;

در ابتدا کار آرایه ما خالی است. هر بار که بر روی دکمه کلیک شود، مقدار state به روز رسانی می شود. اگر پنج بار بر روی دکمه کلیک کنید، خروجی زیر را مشاهده خواهید کرد:

تصویر reactjs-component-api_6133_1 Component API در ReactJS - آموزش ReactJS

متد forceUpdate

گاهی اوقات ممکن است بخواهید کامپوننت را به صورت دستی به روز رسانی کنید. با استفاده از متد forceUpdate می توانید این کار را انجام دهید.

import React from 'react';
class App extends React.Component {
   constructor() {
      super();
      this.forceUpdateHandler = this.forceUpdateHandler.bind(this);
   };
   forceUpdateHandler() {
      this.forceUpdate();
   };
   render() {
      return (
         <div>
            <button onClick = {this.forceUpdateHandler}>FORCE UPDATE</button>
            <h4>Random number: {Math.random()}</h4>
         </div>
      );
   }
}
export default App;

import React from 'react';

class App extends React.Component {

constructor() {

super();

this.forceUpdateHandler = this.forceUpdateHandler.bind(this);

};

forceUpdateHandler() {

this.forceUpdate();

};

render() {

return (

<div>

<button onClick = {this.forceUpdateHandler}>FORCE UPDATE</button>

<h4>Random number: {Math.random()}</h4>

</div>

);

}

export default App;

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

تصویر reactjs-component-api_6133_2 Component API در ReactJS - آموزش ReactJS

متد ReactDOM.findDOMNode

به منظور دستکاری DOM می توانیم از متد ReactDOM.findDOMNode استفاده کنیم. برای استفاده از این متد باید react-dom را import کنید.

import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component {
   constructor() {
      super();
      this.findDomNodeHandler = this.findDomNodeHandler.bind(this);
   };
   findDomNodeHandler() {
      var myDiv = document.getElementById('myDiv');
      ReactDOM.findDOMNode(myDiv).style.color = 'green';
   }
   render() {
      return (
         <div>
            <button onClick = {this.findDomNodeHandler}>FIND DOME NODE</button>
            <div id = "myDiv">NODE</div>
         </div>
      );
   }
}
export default App;