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;

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

متد 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;

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

متد 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;

زمانی که بر روی دکمه کلیک شود، رنگ عنصر myDiv سبز می شود.

نوشته Component API در ReactJS – آموزش ReactJS اولین بار در سورس سرا - آموزش برنامه نویسی. پدیدار شد.