Bất kỳ ai có liên kết 3 phút đọc

ReactJS - Component API - Component Life Cycle

Bài đăng này đã không được cập nhật trong 5 năm

1. Component API

Trong phần này chúng ta sẽ cùng tìm hiểu 3 phương thức: setState(), forceUpdate() và ReactDOM.findDOMNode(). Chúng ta sẽ sử dụng this.method.bind(this) trong các ví dụ.

Set State

phương thức setState() được sử dụng để update cập nhật state của component. Phương thức này không thay thế state mà chỉ thêm các thay đổi vào state 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;

Khởi tạo ban đầu cho data là một mảng rỗng. Mỗi lần click vào button thì state sẽ được update. Nếu click 5 lần, kết quả sẽ như sau:

Force Update

Đôi khi chúng ta cần update component theo cách thủ công. khi đó ta cần đến method 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;

Chúng ta đặt một số ngẫu nhiên và nó đc update lại mỗi khi click vào button.

Find Dom Node

Để làm việc với DOM, chúng ta cần sử dụng phương thức ReactDOM.findDOMNode(). trước tiên cần phải import react-dom vào.

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 phần tử myDiv được thay đổi thành green, khi button đc click.

Note: từ khi lên bản 0.14 thì nhiều phương thức cũ loại bỏ để thích hợp với ES6

2. Các phương thức trong vòng đời của component.

componentWillMount: là phương thức được thực hiện trước khi hiển thị, trên cả máy chủ và phía máy khách.

componentDidMount: là phương thức được thực hiện sau khi hàm render chạy lần đầu tiên xong. Phương thức này là nơi thực hiện các AJAX requests, DOM và update state. Nó được sử dụng để tích hợp các JS Framework và các hàm có sử dụng setTimeout hoặc setInterval.

componentWillReceiveProps: là phương thức được gọi ngay sau khi props được update trước khi các component được render lại. Ví dụ dưới đây, ta sẽ gọi nó từ setNewNumber khi chúng ta update state trong setNewNumber

shouldComponentUpdate: phương thức này nên trả về true hoặc false. Điều này sẽ xác định xem các component có được update hay không. Phương thức này sẽ được đặt mặc định là true. Nếu bạn chắc chắn rằng component không cần render lại sau khi state và props được update thì bạn có thể trả nó về false.

componentWillUpdate: Nếu phương thức shouldComponentUpdate trả về giá trị true thì phương thức này sẽ được gọi. và nó được gọi trước khi render.

componentDidUpdate: Phương thức này được gọi ngay sau khi render. thực hiện sau phương thức componentWillUpdate.

componentWillUnmount: là phương thức được gọi sau khi các component bị unmounted từ dom.

Hãy xem ví dụ dưới đây để hiểu rõ hơn về các phương thức ở trên:

App.jsx

import React from 'react';

class App extends React.Component {
   constructor(props) {
      super(props);
      
      this.state = {
         data: 0
      }
      this.setNewNumber = this.setNewNumber.bind(this)
   };
   setNewNumber() {
      this.setState({data: this.state.data + 1})
   }
   render() {
      return (
         <div>
            <button onClick = {this.setNewNumber}>INCREMENT</button>
            <Content myNumber = {this.state.data}></Content>
         </div>
      );
   }
}
class Content extends React.Component {
   componentWillMount() {
      console.log('Component WILL MOUNT!')
   }
   componentDidMount() {
      console.log('Component DID MOUNT!')
   }
   componentWillReceiveProps(newProps) {    
      console.log('Component WILL RECIEVE PROPS!')
   }
   shouldComponentUpdate(newProps, newState) {
      return true;
   }
   componentWillUpdate(nextProps, nextState) {
      console.log('Component WILL UPDATE!');
   }
   componentDidUpdate(prevProps, prevState) {
      console.log('Component DID UPDATE!')
   }
   componentWillUnmount() {
      console.log('Component WILL UNMOUNT!')
   }
   render() {
      return (
         <div>
            <h3>{this.props.myNumber}</h3>
         </div>
      );
   }
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

setTimeout(() => {
   ReactDOM.unmountComponentAtNode(document.getElementById('app'));}, 10000);

Kết quả hiển thị như sau: