بخش های اصلی

آموزش ReactJS

ReactJS – Component API

در این آموزش راجع به component API توضیح میدیم و سه متد را آموزش میدیم: setState()، forceUpdate() و ReactDOM.findDOMNode(). در کلاس های جدیدِ ES6 باید بصورت دستی this را bind کنیم. همانطور که در ادامه مشاهده خواهید کرد، در مثال هایی که در ادامه آورده شدن، از this.method.bind(this) استفاده می کنیم.

SetState

متدِ setState() برای به روزرسانی state (وضعیت) کامپوننت استفاده میشه. این متد state (وضعیت) را جایگزین (replace) نمی کند بلکه فقط تغییرات را به 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;
      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 (وضعیت) به روزرسانی می شه. اگه پنج بار روی دکمه کلیک کنین، خروجی به شکل زیر خواهیم داشت:

react component api set state

Force Update

ممکنِه بخواین کامپوننت را بصورت دستی به روز رسانی کنین. برای این کار باید از متدِ 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;

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

react component api force update

Find DOM Node

می توانید از متد ReactDOM.findDOMNode()، برای تغییرِ DOM استفاده کنین. برای این کار ابتدا باید 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 تغییر می کنه.

react component api find dom node

نکته

از آپدیتِ 0.14 به بعد جهت سازگاری با ES6، بیش تر متدهایِ component API قدیمی، حذف شدن یا از استفاده از آن ها اجتناب می شه.

در صورتی که سوال و یا نظری دارید، از بخش نظرات با ما در میان بگذارید.

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

شما چه نظر و یا سوالی درباره این نوشته دارید؟

مبحث آموزشی

آموزش ReactJS

Learn ReactJS

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد