ReactJS - API thành phần

Trong chương này, chúng tôi sẽ giải thích API thành phần React. Chúng ta sẽ thảo luận về ba phương pháp:setState(), forceUpdate và ReactDOM.findDOMNode(). Trong các lớp ES6 mới, chúng ta phải tự ràng buộc điều này. Chúng tôi sẽ sử dụngthis.method.bind(this) trong các ví dụ.

Đặt trạng thái

setState()được sử dụng để cập nhật trạng thái của thành phần. Phương thức này sẽ không thay thế trạng thái, mà chỉ thêm các thay đổi vào trạng thái ban đầu.

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;

Chúng tôi bắt đầu với một mảng trống. Mỗi khi chúng ta nhấp vào nút, trạng thái sẽ được cập nhật. Nếu chúng ta nhấp năm lần, chúng ta sẽ nhận được kết quả sau.

Buộc cập nhật

Đôi khi chúng tôi có thể muốn cập nhật thành phần theo cách thủ công. Điều này có thể đạt được bằng cách sử dụngforceUpdate() phương pháp.

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 tôi đang đặt một số ngẫu nhiên sẽ được cập nhật mỗi khi nút được nhấp.

Tìm nút Dom

Đối với thao tác DOM, chúng ta có thể sử dụng ReactDOM.findDOMNode()phương pháp. Đầu tiên chúng ta cần nhậpreact-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;

Màu sắc của myDiv phần tử thay đổi thành màu xanh lục, khi nút được nhấp.

Note - Kể từ bản cập nhật 0.14, hầu hết các phương thức API thành phần cũ hơn không được dùng nữa hoặc bị loại bỏ để phù hợp với ES6.