ReactJS - Bileşen API'si

Bu bölümde, React bileşen API'sini açıklayacağız. Üç yöntemi tartışacağız:setState(), forceUpdate ve ReactDOM.findDOMNode(). Yeni ES6 sınıflarında, bunu manuel olarak bağlamamız gerekiyor. Kullanacağızthis.method.bind(this) örneklerde.

Durumu Ayarla

setState()yöntem, bileşenin durumunu güncellemek için kullanılır. Bu yöntem durumu değiştirmeyecek, yalnızca orijinal duruma değişiklikler ekleyecektir.

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;

Boş bir diziyle başladık. Düğmeye her tıkladığımızda, durum güncellenecektir. Beş kez tıklarsak, aşağıdaki çıktıyı alacağız.

Güncellemeyi zorla

Bazen bileşeni manuel olarak güncellemek isteyebiliriz. Bu,forceUpdate() yöntem.

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;

Düğmeye her tıklandığında güncellenecek rastgele bir sayı belirliyoruz.

Dom Düğümünü Bul

DOM manipülasyonu için kullanabiliriz ReactDOM.findDOMNode()yöntem. Önce ithal etmemiz gerekiyorreact-dom.

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;

Rengi myDiv düğme tıklandığında öğe yeşile döner.

Note - 0.14 güncellemesinden bu yana, ES6'ya uyum sağlamak için eski bileşen API yöntemlerinin çoğu kullanımdan kaldırıldı veya kaldırıldı.