آموزش ReactJS – فصل هفتم: رابط کامپوننت ها (Component API)

در اینجا به سه فانکشن اشاره خواهیم کرد، setState(), forceUpdate() و ReactDOM.findDOMNode().

در کلاس های ES6 جدید (تغییر جدید که در ری اکت رخ داده است) باید به صورت دستی این فانکشن ها را bind کنیم تا قادر باشیم از آن ها استفاده کنیم. به عنوان مثال به این صورت: this.method.bind(this)

متود Set State

setState() متودی است که برای آپدیت کردن استیت از آن استفاده می شود. این فانکشن استیت را جایگزین نمی کند بلکه تغییراتی را به 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(); // or: [...this.state.data]
	  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;

با اجرای مثال بالا، ابتدا آرایه date درون state خالی است و با هر بار کلیک بر روی دکمه، کلمه setState… در setState() به آرایه اضافه می شود و چاپ خواهد شد.

در نهایت با چند بار کلیک بر روی دکمه، چیزی مانند تصویر زیر در مرورگر مشاهده می کنید:

متود Force Update

گاهی اوقات نیاز است تا یک کامپوننت را به صورت دستی (Manually) تغییر دهیم. در این هنگام از فانکشن 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;

با اجرای مثال بالا، هر بار که بر روی دکمه کلیک می کنیم، فانکشن forceUpdate اجرا شده و کامپوننت دوباره آپدیت می شود و چون از فانکشن Math.random() برای چاپ اطلاعات استفاده کرده ایم، هر بار یک عدد اتفاقی بر روی صفحه چاپ خواهد شد.

با هر بار کلیک بر روی دکمه، صفحه ای مانند تصویر زیر در مرورگر مشاهده خواهید کرد (هر بار با عدد متفاوت):

ایجاد تغییرات DOM، تغییر یک المان HTML

با فانکشن ReactDOM.findDOMNode() قادر هستید تا یک المان HTML درون صفحه را انتخاب کنید و بر روی آن تغییراتی را اعمال کنید. مانند مثال زیر:

با اجرای مثال بالا با کلیک بر روی دکمه، المان با آی دی myDiv با فانکشن document.getElementById('myDiv') یافته می شود و با استفاده از ReactDOM.findDOMNode() رنگ آن به سبز تغییر می کند.

صفحه ای مانند تصویر زیر با کلیک بر روی دکمه مشاهده خواهید کرد:

از بروزرسانی 0.14 ری اکت، برای سازگار کردن کد ها با ES6 بسیاری از متود های Component API حذف شده اند.