Một vòng đời trong React có thể được coi là ba giai đoạn khác nhau:gắn, cập nhật và ngắt kết nối. Việc gắn kết xảy ra khi thành phần React kết xuất với DOM (Mô hình đối tượng tài liệu). Khi các thay đổi được thực hiện đối với thành phần đó, thành phần đó sẽ bước vào giai đoạn cập nhật.
Trong giai đoạn cập nhật của vòng đời, một loạt các phương thức nội bộ được chạy để kiểm tra thông tin mới và kết xuất lại thành phần đó. Unmounting chỉ đơn giản là khi một thành phần bị xóa khỏi DOM.
Khóa học trong bài viết này thảo luận về các ý nghĩa rộng rãi của vòng đời và một số phương pháp thường được sử dụng. Có nhiều phương pháp vòng đời hơn có thể được sử dụng mà sẽ không được thảo luận ở đây. Để biết thêm thông tin về các phương pháp vòng đời khác, hãy tham khảo phần giới thiệu này.
Vòng đời phản ứng là gì?
Khi một thành phần được tải vào DOM, nó sẽ đi vào giai đoạn đầu tiên trong ba giai đoạn hoặc vòng đời của nó. Giai đoạn đầu tiên này được gọi là gắn kết. Trong giai đoạn này, thành phần được hiển thị như được xác định ban đầu. Bây giờ nó đã sẵn sàng để tương tác với người dùng và bước vào giai đoạn thứ hai.
Trong giai đoạn thứ hai, người dùng đã tương tác với thành phần và thực hiện một số thay đổi. Trong hầu hết các trường hợp, người dùng đã thực hiện một hành động làm thay đổi trạng thái các thành phần. Chúng tôi hiện đang trong giai đoạn cập nhật của vòng đời.
Trong giai đoạn cập nhật, React sẽ kết xuất lại thành phần để hiển thị các thay đổi. Trong ví dụ của chúng tôi ở trên về việc thay đổi trạng thái để kích hoạt giai đoạn cập nhật, setState() phương thức sẽ được gọi để thay đổi trạng thái ban đầu và bắt đầu quá trình kết xuất. Để biết thêm về setState, hãy đọc bài viết giới thiệu này.
Cuối cùng, khi chúng tôi điều hướng khỏi một thành phần cụ thể, chúng tôi có thể xóa nó khỏi DOM. Đây được gọi là ngắt kết nối và là giai đoạn thứ ba của vòng đời. Mặc dù giai đoạn này không bắt buộc, nhưng nó được khuyến nghị cho các ứng dụng nặng về thành phần.
Các phương pháp vòng đời phổ biến
Bây giờ chúng ta đã xem qua trình tự vòng đời của một thành phần React, hãy cùng xem xét một số phương pháp vòng đời phổ biến. Các phương thức vòng đời là các phương thức React được gọi ở các giai đoạn vòng đời khác nhau. Một số trong số chúng là bắt buộc trong khi một số là tùy chọn. Chúng ta sẽ xem xét các phương pháp tùy chọn được yêu cầu và thường được sử dụng.
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.
Gắn kết
Khi gắn kết một thành phần lớp, phương thức tùy chọn thường được sử dụng đầu tiên là constructor() phương pháp. Ở đây trong phương thức khởi tạo, trạng thái ban đầu của thành phần có thể được khai báo trực tiếp.
class App extends React.Component {
constructor(props) {
super(props);
this.state= {
currentUser : " "
}
}
}
Trong ví dụ này, chúng tôi đang đặt trạng thái ban đầu làm đối tượng cho người dùng hiện tại. Hàm tạo constructor() phương thức yêu cầu bảng soạn sẵn super() phương pháp. Để biết thêm về hàm tạo cơ sở super() , hãy đọc hướng dẫn setState của chúng tôi.
Đối với mục đích của chúng tôi, khi thành phần này được gắn kết, chúng tôi sẽ cho rằng chưa có ai đăng nhập. Để người dùng đăng nhập, chúng ta cần một biểu mẫu đăng nhập. Điều này đưa chúng ta đến phương thức bắt buộc đầu tiên, render() .
Phương thức bắt buộc khi gắn một thành phần là render() phương pháp. Sau khi thành phần lớp được xây dựng với bộ trạng thái ban đầu của nó, chúng ta có thể hiển thị một thành phần khác hoặc HTML.
render(){
return (
<LoginForm />
)
}
Cú pháp của render() và câu lệnh trả về của nó hơi khác so với các phương thức khác. Lưu ý rằng chúng tôi sử dụng dấu ngoặc đơn sau khi trả về và không sử dụng dấu ngoặc nhọn. Ở đây trong câu lệnh trả về, chúng tôi đang hiển thị thành phần LoginForm.
Khi người dùng đăng nhập, chúng tôi sẽ có quyền truy cập vào thông tin đăng nhập. Trong một ứng dụng đang hoạt động, đăng nhập yêu cầu một yêu cầu tìm nạp tới máy chủ để truy xuất thông tin đăng nhập phù hợp. Trong khuôn khổ của bài viết giới thiệu về vòng đời này, chúng tôi sẽ thiết lập trạng thái trực tiếp.
Trong ví dụ đơn giản này, chúng tôi có một người dùng, John. Anh ta nhập mật khẩu của mình và nhấn nút đăng nhập. Thao tác này sẽ gửi một yêu cầu tìm nạp đến máy chủ và máy chủ sẽ phản hồi bằng thông tin đăng nhập của John. Bây giờ John đã đăng nhập, chúng tôi muốn anh ấy tiếp tục đăng nhập cho đến khi anh ấy quyết định đăng xuất.
Để thực hiện việc này, chúng ta có thể sử dụng một phương thức tùy chọn khá phổ biến khác, componentWillMount() . Nếu phương thức vòng đời này được gọi, nó sẽ thực thi sau khi thành phần hiển thị. Đây là một nơi tốt để thiết lập trạng thái mới của chúng tôi.
componentWillMount() {
this.setState({
currentUser: "John"
})
}
Bây giờ, sau khi hiển thị thành phần và trước khi gắn, trạng thái của thành phần được đặt với người dùng hiện tại của John. Ngay cả khi trang được làm mới, trạng thái sẽ được thiết lập với John, vì vậy người dùng của chúng tôi vẫn đăng nhập.
Sử dụng seState() phương pháp này cũng đưa chúng ta vào giai đoạn cập nhật của vòng đời. Khi setState() được gọi, nó báo hiệu cho React rằng một thành phần đã có thay đổi. React bây giờ sẽ hiển thị lại thành phần để hiển thị bất kỳ thay đổi nào được thực hiện cho người dùng. Trong trường hợp của chúng tôi, nó sẽ cho thấy rằng John đã đăng nhập.
Đang cập nhật
Giai đoạn cập nhật trong vòng đời có một số phương pháp vòng đời tùy chọn nằm ngoài phạm vi của phần giới thiệu này. Chỉ cần nói với mục đích của chúng tôi rằng khi một thay đổi được phát hiện (thường là với setState), React sẽ gọi render() được yêu cầu một lần nữa. Sau đó, thành phần sẽ hiển thị lại để phản ánh những thay đổi đã thực hiện.
Ngắt kết nối
Giai đoạn cuối cùng trong vòng đời của một thành phần được gọi là ngắt kết nối. Tại đây, một thành phần bị xóa khỏi DOM. Mặc dù không bắt buộc nhưng nó giúp một ứng dụng nặng thành phần hoạt động hiệu quả hơn.
Việc giải phóng chỉ có một phương pháp tùy chọn, componentWillUnmount() . Người dùng của chúng tôi, John, bây giờ muốn đăng xuất. Khi anh ấy nhấp vào nút đăng xuất, chúng ta có thể sử dụng componentWillUnmount() để xóa hồ sơ người dùng của anh ấy khỏi DOM.
Ví dụ này hơi phức tạp một chút, nhưng cho thấy rõ ràng những gì đang xảy ra ở mỗi giai đoạn của vòng đời.
class UserContainer extends React.Component {
constructor(props) {
super(props);
this.state = {
currentUser: " "
}
}
componentWillMount() {
this.setState({
currentUser: "John"
})
}
logout = () => {
this.setState({
currentUser: " "
})
}
render() {
if this.state.currentUser === "John" {
return (
<UserProfile />
<button type="button" onclick={this.logout}>Logout</button>
)
} else {
return(
<button type="button>">Login</button>
)
}
}
}
class UserProfile extends React.Component {
componentWillUnmount() {
alert("Logged Out")
}
render() {
return (
<h1>Welcome back, John!</h1>
)
}
}
Chúng tôi có hai thành phần. Đầu tiên là UserContainer và nó chỉ chứa thành phần UserProfile. UserProfile chứa thông tin người dùng.
Trong UserContainer, chúng tôi xây dựng thành phần của mình và thiết lập trạng thái ban đầu như trước đây. Thành phần hiển thị bằng một nút đăng nhập rất ngắn gọn. Ngay trước khi chúng tôi gắn kết thành phần, chúng tôi đăng nhập John. Điều này khiến React cập nhật thành phần và hiển thị lại thành phần đó bằng thông tin đăng nhập của John.
Bây giờ John đã đăng nhập, chúng tôi kết xuất thành phần UserProfile. Điều này chứa tất cả thông tin người dùng của John, vì vậy chúng tôi cần xóa thông tin đó khỏi DOM ngay sau khi anh ấy đăng xuất.
Khi nút đăng xuất được nhấp vào, nó thực hiện chức năng đăng xuất của chúng tôi. Chức năng này chỉ đơn giản là trả người dùng hiện tại về trạng thái ban đầu của một chuỗi trống. Vì hàm đăng xuất của chúng ta gọi setState, React sẽ hiển thị lại thành phần vùng chứa. Bây giờ, nó sẽ không hiển thị thành phần UserProfile và chúng tôi sẽ nhận được một cảnh báo bật lên thông báo cho người dùng mà họ đã đăng xuất.
Kết luận
Còn rất nhiều thứ khác về vòng đời của React được đề cập ở đây. Mục tiêu của bài viết này là giới thiệu các khái niệm cơ bản với một số ví dụ mã đơn giản. Bây giờ khái niệm về vòng đời đã được giới thiệu, tài liệu chính thức về React sẽ rõ ràng hơn.
Sau khi đọc hướng dẫn này và các bài viết bổ sung được liên kết, giờ đây bạn đã nắm được vòng đời trong React cũng như khả năng tự đi sâu hơn. Như với tất cả các khái niệm phức tạp trong lập trình, thực hành hàng ngày giúp tìm ra các chi tiết.