ReactJS - Chế độ Siết chặt: Hướng dẫn cho người mới bắt đầu

Xin chào, những nhà phát triển React tương lai! Hôm nay, chúng ta sẽ cùng tìm hiểu một tính năng quan trọng nhưng thường bị bỏ qua trong React: Chế độ Siết chặt (Strict Mode). Đừng lo lắng nếu bạn mới bắt đầu lập trình - tôi sẽ hướng dẫn bạn từng bước qua khái niệm này, giống như tôi đã làm cho hàng trăm học sinh trong những năm dạy học của mình. Vậy, hãy lấy một tách cà phê (hoặc trà, nếu bạn thích), và cùng nhau bắt đầu hành trình học tập này nhé!

什么是 Chế độ Siết chặt?

Trước khi chúng ta đi sâu vào chi tiết, hãy hiểu Chế độ Siết chặt là gì trong React. Hãy tưởng tượng bạn đang học lái xe. Chế độ Siết chặt giống như có một giáo viên lái xe rất kỹ lưỡng ngồi bên cạnh bạn, chỉ ra mỗi lỗi nhỏ bạn mắc phải. Nó không có ý trách phạt bạn, mà để giúp bạn trở thành một người lái xe giỏi hơn - hoặc trong trường hợp của chúng ta, một nhà phát triển React giỏi hơn.

Chế độ Siết chặt là một công cụ để nổi bật các vấn đề tiềm ẩn trong ứng dụng của bạn. Nó kích hoạt các kiểm tra và cảnh báo bổ sung cho các thành phần con. Hãy xem cách sử dụng nó:

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);

Trong ví dụ này, chúng ta đang bao quanh toàn bộ thành phần App với React.StrictMode. Điều này có nghĩa là tất cả các thành phần trong App sẽ phải chịu các kiểm tra bổ sung này.

Bây giờ, hãy cùng xem Chế độ Siết chặt thực sự kiểm tra điều gì.

Sử dụngUnsafe Lifecycle

什么是生命周期？

Trước khi chúng ta nói về các lifecycle không an toàn, hãy hiểu生命周期 là gì. Trong React, các thành phần trải qua một loạt các giai đoạn từ sinh ra (mounting) đến chết (unmounting). Các giai đoạn này được gọi là lifecycle.

Lifecycle không an toàn

Một số phương thức lifecycle được coi là không an toàn vì chúng có thể dẫn đến lỗi trong渲染 async. Chế độ Siết chặt giúp phát hiện việc sử dụng chúng. Dưới đây là một ví dụ:

class OldComponent extends React.Component {
componentWillMount() {
console.log("Phương thức này không an toàn!");
}

render() {
return <div>Hello, tôi là một thành phần cũ!</div>;
}
}

Nếu bạn sử dụng thành phần này trong Chế độ Siết chặt, bạn sẽ thấy cảnh báo trong console về việc sử dụng phương thức lifecycle không an toàn componentWillMount.

Thay vào đó, bạn nên sử dụng các phương thức an toàn hơn. Dưới đây là bảng các phương thức không an toàn và các phương thức thay thế an toàn:

Phương thức không an toàn	Phương thức thay thế an toàn
componentWillMount	componentDidMount
componentWillReceiveProps	static getDerivedStateFromProps
componentWillUpdate	getSnapshotBeforeUpdate

Sử dụng Ref API Cũ

什么是 Refs?

Refs cung cấp một cách để truy cập các nút DOM hoặc các phần tử React được tạo ra trong phương thức render. Chúng giống như một线路 trực tiếp đến một phần cụ thể của giao diện người dùng của bạn.

Refs bằng chuỗi (Cũ)

Trước đây, refs được tạo ra bằng chuỗi, như thế này:

class OldButton extends React.Component {
componentDidMount() {
this.refs.myButton.focus();
}

render() {
return <button ref="myButton">Nhấn vào tôi!</button>;
}
}

Phương pháp này được coi là cũ và có thể gây ra các vấn đề. Chế độ Siết chặt sẽ cảnh báo bạn nếu bạn sử dụng refs bằng chuỗi.

Sử dụng Ref hiện đại

Thay vào đó, bạn nên sử dụng API createRef hoặc hook useRef:

class ModernButton extends React.Component {
constructor(props) {
super(props);
this.myButton = React.createRef();
}

componentDidMount() {
this.myButton.current.focus();
}

render() {
return <button ref={this.myButton}>Nhấn vào tôi!</button>;
}
}

Trong ví dụ này, chúng ta sử dụng React.createRef() để tạo một ref, điều này an toàn và hiệu quả hơn nhiều.

Sử dụng findDOMNode Cũ

什么是 findDOMNode?

findDOMNode là một phương thức được sử dụng để tìm kiếm cây DOM cho một thực thể thành phần React cụ thể. Tuy nhiên, nó现在已经弃用 due to potential issues it can cause.

Ví dụ sử dụng findDOMNode

class OldFinder extends React.Component {
componentDidMount() {
const node = ReactDOM.findDOMNode(this);
node.style.backgroundColor = 'red';
}

render() {
return <div>Tôi sẽ trở thành màu đỏ!</div>;
}
}

Mã này sẽ thay đổi màu nền của div thành đỏ. Tuy nhiên, việc sử dụng findDOMNode như vậy không được khuyến khích, và Chế độ Siết chặt sẽ cảnh báo bạn về điều này.

Phương án thay thế hiện đại

Thay vì findDOMNode, bạn nên sử dụng refs:

class ModernFinder extends React.Component {
constructor(props) {
super(props);
this.myDiv = React.createRef();
}

componentDidMount() {
this.myDiv.current.style.backgroundColor = 'blue';
}

render() {
return <div ref={this.myDiv}>Tôi sẽ trở thành màu xanh!</div>;
}
}

Điều này đạt được cùng kết quả nhưng an toàn hơn, theo cách thân thiện với React.

Kết luận

Và thế là chúng ta đã cùng nhau hành trình qua vùng đất của React's Chế độ Siết chặt, khám phá các cảnh báo về lifecycle không an toàn, sử dụng ref cũ và phương thức findDOMNode đã lỗi thời. Nhớ rằng, Chế độ Siết chặt là công cụ hàng xóm thân thiện của nhà phát triển React, luôn sẵn sàng giúp bạn viết mã tốt hơn, an toàn hơn.

Khi chúng ta kết thúc, tôi nhớ lại một học sinh đã từng nói với tôi, "React giống như một người cha kỹ lưỡng nhưng quan tâm - nó đặt ra các quy tắc để giữ chúng ta an toàn, nhưng cũng cho chúng ta tự do sáng tạo những điều tuyệt vời." Tôi không thể đồng ý hơn!

Tiếp tục thực hành, tiếp tục học tập, và quan trọng nhất, tiếp tục lập mã. Đến gặp lại lần sau, chúc các bạn may mắn với React!

Credits: Image by storyset