Quartz 🪬

Mounting a React Component

3 min read

Quá trình thêm các component vào DOM tree được gọi là mounting.

Các life-cycle method sẽ được gọi lần lượt theo thứ tự sau:

  1. constructor
  2. getDerivedStateFromProps
  3. render
  4. componentDidMount

Có thể chạy đoạn code sau để thấy được thứ tự thực thi của các phương thức:

import { Component } from "react"
 
class App extends Component {
  constructor(props) {
    super(props)
    console.log("I am the `constructor` and I will be the first to run.")
  }
 
  static getDerivedStateFromProps(props, state) {
    console.log("I am `getDerivedStateFromProps` and I will be the second to run.")
    return null
  }
 
  render() {
    console.log("I am `render` and I will be the third to run.")
    return <h1>React Component Life-cycle</h1>
  }
 
  componentDidMount() {
    console.log("I am `componentDidMount` and I will be last to run.")
  }
}

constructor

Constructor có nhiệm vụ thiết lập các giá trị khởi tạo cho state khi một component đang trong quá trình mounting.

constructor(props) {
	super(props)
 
	this.state = {
		firstName: 'Quân',
		age: 0
	}
}

Ngày nay, chúng ta thường viết các class component mà không cần dùng contructor. Với các phiên bản ngày xưa của React, constructor là bắt buộc đối với class component. State cũng được khai báo bên trong constructor khi sử dụng các phiên bản cũ của React.

getDerivedStateFromProps

Như cái tên của phương thức, ta có thể hiểu chức năng của getDerivedStateFromPros là trích xuất state từ props. Bên cạnh đó, chúng ta có thể thiết lập state thông qua phương thức này trước khi component được render hoặc update.

static getDerivedStateFromProps(props, state) {
	return { age: props.age }
}

Đối với phương thức này, bắt buộc phải trả về một object tương tự như object mà chúng ta truyền vào hàm setState hoặc trả về object rỗng hoặc null.

Info

Lý do mà phương thức này là static vì nó không được phép truy cập vào đối tượng được tạo ra của component. Hay nói cách khác, phương thức này không thể truy cập vào this.

render

Phương thức render có giá trị trả về là một JSX element. Phương thức này sẽ được gọi bất cứ khi nào state bị thay đổi.

render() {
	return <h1>My name is {this.state.firstName} and I am {this.state.age} years old</h1>
}

Attention

Đừng bao giờ thay đổi state bên trong render. Hãy tạo ra phương thức riêng để làm điều đó.

componentDidMount

Như cái tên của phương thức, componentDidMount sẽ được gọi sau khi component được render. Bên trong phương thức này sẽ là nơi mà chúng ta thực hiện các tác vụ bất đồng bộ chẳng hạn như gọi hàm setTimeout hoặc gửi request đến API.

componentDidMount() {
	setTimeout(() => {
		this.setState({ firstName: 'Aleister' })
	}, 2000)
}

Trong ví dụ trên, sau hai giây kể từ khi component được render ra màn hình, state sẽ bị thay đổi. Sau khi state bị thay đổi, component sẽ bước qua giai đoạn updating.

Full Example

Toàn bộ code của component App sau khi chỉnh sửa:

import { Component } from 'react'
 
class App extends Component {
    constructor(props) {
        super(props)
 
        this.state = {
            firstName: 'Quân',
            age: 0
        }
    }
 
    static getDerivedStateFromProps(props, state) {
        return { age: props.age }
    }
 
    render() {
        return (
            <div>
                <h1>My name is {this.state.firstName} and I am {this.state.age} years old.</h1>
            </div>
        )
    }
 
    componentDidMount() {
        setTimeout(() => {
            this.setState({ firstName: 'Aleister' })
        }, 2000)
    }
}
sort file.ctime asc

Resources