ReactJS - Constructor: Đá Bán Cơ Bản của React Components

Xin chào, các bạn đang học React! Hôm nay, chúng ta sẽ cùng tìm hiểu một trong những khái niệm cơ bản trong React: constructor. Hãy nghĩ về constructor như là nền móng của một ngôi nhà - nó là nơi mọi thứ bắt đầu. Cuối bài học này, bạn sẽ có thể xây dựng các thành phần React như một chuyên gia!

Constructor là gì?

Trước khi chúng ta nhảy vào các chi tiết cụ thể của React, hãy hiểu constructor là gì trong lập trình nói chung.

Constructor là một phương thức đặc biệt trong một lớp được gọi tự động khi một đối tượng của lớp đó được tạo ra. Nó giống như sự ra đời của một thành phần - điều đầu tiên xảy ra khi thành phần của bạn xuất hiện.

Trong React, constructor là nơi chúng ta thiết lập trạng thái ban đầu của thành phần và liên kết các bộ xử lý sự kiện. Đây là cơ hội đầu tiên của thành phần để nói "Xin chào, Thế giới!"

Hãy nhìn vào một ví dụ cơ bản:

class Welcome extends React.Component {
constructor(props) {
super(props);
console.log("Hello, I'm born!");
}

render() {
return <h1>Welcome to React!</h1>;
}
}

Trong ví dụ này, mỗi khi một thành phần Welcome được tạo ra, nó sẽ ghi "Hello, I'm born!" vào console. Đó giống như tiếng khóc đầu tiên của thành phần!

Khởi tạo Props

Bây giờ, hãy nói về props. Props (viết tắt của properties) là cách các thành phần cha truyền dữ liệu cho các thành phần con. Trong constructor, chúng ta có thể truy cập các props này và sử dụng chúng để thiết lập thành phần của chúng ta.

Dưới đây là cách chúng ta làm điều đó:

class Greeter extends React.Component {
constructor(props) {
super(props);
console.log(`I received a name: ${props.name}`);
}

render() {
return <h1>Hello, {this.props.name}!</h1>;
}
}

Trong ví dụ này, chúng ta đang ghi prop name mà được truyền vào thành phần Greeter. Lưu ý đến gọi super(props) - điều này rất quan trọng! Nó gọi constructor của lớp cha (React.Component) và truyền props cho nó. Luôn nhớ gọi super(props) đầu tiên trong constructor của bạn.

Bạn có thể sử dụng điều này để:

1. Ghi lại props nhận được để gỡ lỗi
2. Thực hiện các phép toán dựa trên props
3. Thiết lập trạng thái ban đầu dựa trên props (điều chúng ta sẽ thảo luận tiếp theo!)

Khởi tạo Trạng thái

Trạng thái là nơi các thành phần lưu trữ dữ liệu có thể thay đổi. Constructor là nơi hoàn hảo để khởi tạo trạng thái này. Hãy xem cách chúng ta làm:

class Counter extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}

render() {
return <h1>Current count: {this.state.count}</h1>;
}
}

Ở đây, chúng ta đang khởi tạo trạng thái của chúng ta với thuộc tính count được đặt là 0. Đây là duy nhất nơi bạn nên gán this.state trực tiếp. Ở tất cả các nơi khác, sử dụng this.setState() để cập nhật trạng thái.

Bạn cũng có thể sử dụng props để khởi tạo trạng thái:

class Timer extends React.Component {
constructor(props) {
super(props);
this.state = {
secondsElapsed: 0,
interval: props.interval || 1000
};
}

// ... phần còn lại của thành phần
}

Trong ví dụ này, chúng ta đang sử dụng một prop (interval) để khởi tạo trạng thái của chúng ta, với giá trị mặc định là 1000 nếu không có prop được cung cấp.

Liên kết các bộ xử lý sự kiện

Sử dụng cuối cùng lớn của constructor là liên kết các bộ xử lý sự kiện. Trong JavaScript, các phương thức lớp không được liên kết mặc định. Nếu bạn quên liên kết chúng và truyền chúng cho các bộ xử lý sự kiện, this sẽ là undefined khi phương thức được gọi.

Dưới đây là cách chúng ta liên kết các phương thức trong constructor:

class ClickCounter extends React.Component {
constructor(props) {
super(props);
this.state = { clicks: 0 };
this.handleClick = this.handleClick.bind(this);
}

handleClick() {
this.setState(prevState => ({
clicks: prevState.clicks + 1
}));
}

render() {
return (
<div>
<p>Clicks: {this.state.clicks}</p>
<button onClick={this.handleClick}>Click me!</button>
</div>
);
}
}

Trong ví dụ này, chúng ta đang liên kết this.handleClick trong constructor. Điều này đảm bảo rằng khi handleClick được gọi, this sẽ tham chiếu đến thực thể của thành phần chúng ta, cho phép chúng ta gọi this.setState.

Kết hợp tất cả lại

Hãy tạo một thành phần sử dụng tất cả các khái niệm này:

class UserGreeting extends React.Component {
constructor(props) {
super(props);
this.state = {
isLoggedIn: false,
username: props.username || 'Guest'
};
this.toggleLogin = this.toggleLogin.bind(this);
}

toggleLogin() {
this.setState(prevState => ({
isLoggedIn: !prevState.isLoggedIn
}));
}

render() {
return (
<div>
<h1>Hello, {this.state.username}!</h1>
<p>You are {this.state.isLoggedIn ? 'logged in' : 'not logged in'}.</p>
<button onClick={this.toggleLogin}>
{this.state.isLoggedIn ? 'Log out' : 'Log in'}
</button>
</div>
);
}
}

Thành phần này:

1. Khởi tạo props (username)
2. Thiết lập trạng thái ban đầu (isLoggedIn và username)
3. Liên kết phương thức toggleLogin

Các phương thức constructor phổ biến

Dưới đây là bảng các phương thức bạn có thể sử dụng trong constructor:

Phương thức	Mô tả
super(props)	Gọi constructor của lớp cha
this.state = {...}	Khởi tạo trạng thái
this.methodName = this.methodName.bind(this)	Liên kết một phương thức
console.log(props)	Ghi lại props nhận được
this.intervalId = setInterval(...)	Thiết lập计时器 hoặc interval

Nhớ rằng constructor chỉ là bắt đầu của hành trình của thành phần bạn. Đó là nơi bạn đặt nền móng cho mọi thứ khác. Sử dụng nó một cách khôn ngoan, và các thành phần của bạn sẽ có một khởi đầu tuyệt vời!

Hy vọng hướng dẫn này đã giúp bạn hiểu constructor trong React tốt hơn. Hãy tiếp tục thực hành, và sớm bạn sẽ có thể xây dựng các thành phần React trong giấc ngủ! Chúc bạn may mắn với mã code của mình!

Credits: Image by storyset