Bài 6: ReactJS - Tìm hiểu về Component API

Trong bài này, chúng ta sẽ tìm hiểu về 3 methods tiêu biểu trong React:  setState(), forceUpdate và ReactDOM.findDOMNode().

Set State

setSate() methods được sử dụng để update state trong component (xem bài 4 nếu bạn không biết state là gì), method này sẽ không tạo state mới mà chỉ update 1 state cũ có sẵn. Các bạn xem vd sau:

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;

Trong ES6  khi bạn viết 1 function trong class, thì nó vẫn chưa được đinh nghĩa trong class, bạn phải định nghĩa nó trong constructor:  this.setStateHandler = this.setStateHandler.bind(this);

Ở ví dụ trên chúng ta bắt đầu với 1 chuỗi rỗng, mỗi lần chúng ta click vào button, state sẽ được update, nếu bạn click 5 lần sẽ được kết quả như hình:

Force Update

Thông thường React sẽ render lại component khi chúng ta update state của nó, nhưng đôi lúc chúng ta muốn tự tay update nó mà không thông qua state, khi đó ta cần đến Force Update:

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;

Chúng ta sẽ render ra 1 số bất kì mỗi khi bấm vào button.

Find Dom Node

Để xử lý các Dom trong React ta làm như nhau:

Đầu tiên ta phải import react-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;

Kết quả khi nhấn button:

Kết thúc bài 6 ở đây mọi người có thắc mắc gì thì comment bên dưới nha.
Sau khi hiểu rõ rồi thì qua Bài 7: ReactJS - Tìm hiểu về Component Life Cycle